Refresh the Interface
#Design Process, #Note · 2024. 10. 6
그동안 알게 모르게 몇 가지 작게 UI와 인터렉션을 조정하기는 했지만, 무언가 불편한 마음이 사라지지 않아서 블로그를 만든지 거의 1년 만에 인터페이스를 조금 더 다듬었다. 왜 불편한지 곰곰이 생각해 보니, 언젠가 글에 써두었던 것처럼 만들 때는 욕심을 많이 덜어내려고 노력했던 것 같은데 무언가를 계속해서 추가하는 작업만 진행했던걸 깨달았다.
나에게 블로그란 일종의 취미 또는 디자인적인 취향을 반영하는 무언가라, 소속된 조직에서 업무로 제품을 다루는 것과는 상황에 따라서 약간 또는 아주 많이 다르게 동작한다. 업무로서 제품에 마음이 들지 않는 부분이 있다면 상황과 리소스를 고민하고, 협의*와 결정을 통해서 '수정'이 진행되겠지만, 블로그는 내가 온전히 처음부터 끝까지 모든 걸 다 할 수 있기 때문에 참아야 하는 과정 없이 거의 즉각 수정과 변경이 결정되고 이뤄진다.
* 물론 문제에 대한 합의가 되지 않는다면 참고 기다리는.. 혹은 눈 감고 지나가는 상황도 많이 발생한다
좀 더 산만해진 페이지 간 전환 트랜지션, 직관적이지 않은 하단 메뉴바, 많은 디자인 규칙 등 정리를 하고 싶은 문제들이 계속 늘어나기 전에 훨씬 더 단순한 규칙들로 인터페이스를 정리하는 걸 목표로 했다.
쓸모없는 페이지들과 거추장스러워진 하단 메뉴바를 제거하고, 이전에는 여러 톤을 갖고 있는 gray 색상들을 사용했다면, 거의 모든 색상을 제거하고 완전한 모노톤만 사용해서 훨씬 간소한 색상 토큰을 구성했다. 타이포그래피는 크기를 통한 1차원적인 대비에서 굵기와 크기를 적절히 조정해서 미세한 대비가 전달되도록 의도했다. 레이아웃에서도 16, 24, 32 ~ 80까지 사용하던 토큰들을 모두 제거하고 16px 단일 토큰만 사용하도록 정리했다. 전보다 훨씬 더 오밀조밀해진 간격 속에서 전반적인 body 넓이를 늘려서 글을 읽는데 답답함이 없도록 했다.
트랜지션은 조금 더 많이 고민했다. 페이지 간 전환에 굳이 0.1~0.5ms 정도의 시간차를 주고 싶지 않은 마음과 움직이는 무언가를 계속 만들고 싶다는 일종의 의지 또는 고집** 사이에서 갈등했다. 우선 페이지 간 전환 이외에 거추장스러운 호버, 클리커블 애니메이션은 거의 다 제거하고, 클릭되는 요소들의 상호작용은 모두 blue 색상과 아주 미세한 scale 트랜지션으로 만 구성했다.
** 디자이너로서 움직이는 요소를 만들고 싶다는 건 꽤 중요한 동기 같다. 내가 편집 디자이너에서 UI에 관심을 갖게 된 계기, 블로그를 만들어야겠다고 결심한 계기 모두 움직이는 걸 만들고 싶다는 동기가 출발점이었다.
취향이 바뀌면 언제 또 갑자기 스타일이 변경될지 모르지만, 당장은 아주 단순한 구조와 인터페이스 구성을 계속해서 유지하고 싶다.
적절한 대비, 단순한 규칙, 일관된 이미지 톤, 방해하거나 느리게 느껴지지 않는 애니메이션 혹은 상호작용.