기능마다 필요한 화면을 따로 만들면 각 흐름에 맞게 고치기 쉽습니다. 비슷한 화면 요소를 하나로 묶으면 같은 디자인을 유지하기 편합니다. 두 방법 모두 필요했지만, 어느 쪽에 집중하느냐에 따라 놓치는 부분도 달랐습니다.
여행 정산 앱인 여행가계에서는 기능별 화면을 만드는 동안 디자인의 공통 기준을 충분히 챙기지 못했습니다. Optimize SaaS에서는 같은 모양을 유지하려고 뱃지를 공통화하면서 화면마다 달랐던 동작을 한 컴포넌트 안에 모으게 됐습니다.
기능별로 나누며 달라진 화면의 기준
여행가계에서는 여행 생성, 참가자와 회비 등록, 지출 기록, 최종 정산을 각 기능에 맞는 화면으로 만들었습니다. 기능을 완성한 뒤 화면을 하나씩 보며 어색한 부분을 수정했습니다.
그런데 아이콘이나 버튼을 개별적으로 바꾸는 것만으로는 전체적인 인상이 쉽게 정리되지 않았습니다. 아이콘마다 굵기와 표현 방식이 달랐고, 색상이 맡는 역할도 화면마다 조금씩 달랐습니다. 제목과 숫자, 설명의 크기 차이가 일정하지 않았고, 같은 행동을 어떤 곳에서는 버튼으로, 다른 곳에서는 아이콘이나 텍스트로 보여주기도 했습니다.
기능별로 화면을 만들다 보니 각 화면 안에서는 자연스러운 선택도 전체 흐름에서는 다른 기준처럼 보였습니다. 화면을 이어서 사용하면 서로 다른 시점에 만든 것을 모아둔 듯한 느낌이 남았습니다. 기능에 맞게 화면을 나누더라도 색상, 타이포그래피, 아이콘, 간격과 행동을 표현하는 방식은 함께 맞춰야 한다는 생각이 들었습니다.
디자인을 맞추려다 한곳에 모인 동작
Optimize SaaS에서는 사용자가 올린 데이터의 컬럼을 뱃지 형태로 보여줬습니다. 비슷한 뱃지가 여러 화면에서 필요해 처음에는 하나의 공통 컴포넌트로 관리했습니다. 같은 모양을 유지하고 색상과 아이콘, 텍스트 배치를 한곳에서 맞추기 위한 선택이었습니다.
사용하면서 뱃지의 역할이 화면마다 다르다는 점이 드러났습니다. 분석 결과 화면에서는 이미 처리된 결과를 읽는 정보였고, 컬럼 설정 화면에서는 상세 설정으로 이어지는 입구였습니다. 컬럼 사이의 관계를 설정하는 화면에서는 다른 컬럼과 연결하는 흐름에 참여했습니다.
같은 디자인을 유지하려고 뱃지를 하나로 관리하면서 이 차이도 컴포넌트의 조건으로 처리하게 됐습니다. 결과 화면에서는 설정 기능을 비활성화해야 했고, 나머지 화면에서는 각각 다른 동작을 허용해야 했습니다. 한 화면의 요구를 반영해 공통 컴포넌트를 수정하면 다른 화면의 동작도 함께 확인해야 했습니다. 중복된 표현 코드는 줄었지만, 수정 뒤 검토할 범위는 예상보다 넓어졌습니다.
기능을 나눌 때는 화면 사이의 디자인 기준을 놓쳤고, 디자인을 맞추려 할 때는 역할이 다른 동작까지 한곳에 모았습니다.
디자인의 기준과 기능의 역할을 따로 보기
여행가계에서는 기능별 화면을 만들면서도 함께 확인할 디자인 기준이 필요했습니다. 색상의 역할과 글자 크기, 아이콘과 간격을 정리하고, 화면별 체크리스트와 기기별 스크린샷으로 반복해서 확인하는 편이 도움이 됐을 것입니다.
Optimize SaaS의 뱃지에서는 기본 형태와 시각적 규칙은 공유하되, 분석 결과를 보여주는 일과 컬럼을 설정하는 일은 각자의 동작으로 나누는 편을 검토하게 됐습니다. 외형이 같은지보다 상태 변화와 허용하는 행동이 같은지, 한곳의 변경이 다른 곳에도 함께 적용되어야 하는지를 살펴볼 필요가 있었습니다.
한쪽에서는 기능을 나누면서 공통된 모양을 놓쳤고, 다른 쪽에서는 모양을 맞추면서 다른 기능까지 묶었습니다. 두 경험을 거치며 화면은 각 기능에 맞게 만들되, 여러 화면에 반복되는 디자인 규칙은 함께 확인하는 편이 낫겠다고 생각했습니다. 같은 모양의 요소라도 화면에서 맡는 역할이 다르면 동작을 따로 다루는 편이 수정할 때 확인해야 할 범위를 줄일 수 있었습니다.