완성된 화면보다 더 중요했던 버려진 시안들
지난 글(4편)에서 저는 토스증권 주문 화면의 개선안, 이른바 '비중 확인 기능'의 최종 이미지를 공개했다.
하지만 디자이너를 꿈꾸는 사람으로서 마음 한구석이 찔렸다. '결과'는 보여드렸지만, 그 결과를 만들기 위해 고민했던 '과정'은 보여드리지 못했기 때문이다.
디자인의 본질은 예쁜 화면을 그리는 것이 아니라, 최적의 답을 찾아가는 논리적인 여정이라고 생각한다. 스티브 잡스는 "디자인은 겉모습이 아니라 작동 방식"이라고 했다. 오늘은 지난 글에서 미처 다루지 못한, 최종 시안 뒤에 숨겨진 '버려진 시안들'과 '1px의 디테일'에 대한 이야기를 해보려 한다.
99번 넘어져야 100번째에 서는 법
처음부터 최종안이 나온 것은 아니다. 어릴때부터 투자를 배운 투자자로서 "내 자산 비중을 알고 싶다"는 욕망 하나로 피그마를 켰지만, 초보 디자이너의 초기 시안들은 처참했다.
B컷 1: "그냥 수량 입력창 안에 넣으면 되잖아?"
시도 : 수량을 입력하는 텍스트 필드 바로 옆이나 아래에
(예상 비중 20%) 라고 텍스트로만 넣어보았다.
가장 단순하고 직관적인 방법처럼 보였다.
실패 이유 - 시각적 위계 붕괴 : 토스증권 UX의 핵심 철학은 '큼직한 숫자로 직관성을 극대화'하는 것이다. "몇 주 살래?"를 묻는 숫자 옆에 괄호를 치고 보조 정보를 넣으니, 사용자의 시선이 분산되었다.
무엇보다 사용자가 입력하는 '행위'와 시스템이 알려주는 '정보'가 한 공간에 섞이니 인지적 부하가 발생했다. 구매 버튼을 누르기 직전, 사용자는 "내가 입력한 숫자"에만 집중해야 하는데, 옆에서 다른 정보가 속삭이니 오히려 혼란스러웠다.
B컷 2: "더보기 탭 안에 숨겨두면 깔끔하지 않을까?"
시도 : 주문 화면 하단에 작은 텍스트 링크 (상세 정보 보기 >)를 배치하고, 클릭하면 펼쳐지는 방식으로 "원하는 사람만 보라"는 듯이 비중 정보를 숨겨두었다.
실패 이유 - 접근성 붕괴 + 불안 조성 : 이 시안의 가장 큰 문제는 '정보를 찾기 위해 추가 행동을 요구'한다는 점이었다.
실제로 겪었던 경험을 떠올려봤다. 얼마 전 배달 앱으로 치킨을 주문하려는데, 화면에는 배달비만 나와있었고, 최소 주문 금액이 표시되어 있지 않았다. 그런데 막상 결제를 하려고 하니 최소 금액이 채워지지 않아 주문이 불가능한 상태였다. 결국 다시 홈 화면으로 돌아와 다른 가게에 다른 메뉴를 또 찾다가 배달비가 좀 더 비싸더라도 확실하게 표기되어 있는 어플을 사용했다.
그 순간 든 감정은 단순한 "불편함"이 아니었다. "처음부터 보여줄 수 있었는데 왜 숨긴 거지?"라는 의심과 함께, 묘하게 "일부러 나를 속이려는 건 아닐까?"라는 불신까지 들었다. 결국 그 어플은 지우고 안좋은 기억만 남았다.
내가 만든 시안도 마찬가지였다. 비중이라는 중요한 정보를 작은 링크 뒤에 숨기니, 사용자 입장에서는 "이 앱이 내가 비중을 확인하는 걸 원하지 않는구나"라는 느낌을 받을 수 있었다. 더 큰 문제는, 초보 투자자는 아예 그 링크의 존재조차 모를 수 있다는 점이다.
결론 :
정보는 찾아야 하는 것이 아니라 마주치는 것이어야 한다는 걸 배웠다. 특히 투자처럼 돈이 오가는 의사결정에서는, 중요한 정보를 숨기는 것 자체가 사용자에게 불신을 줄 수 있다. 배달 앱에서 최소 주문 금액을 숨기면 "다시는 안 시킨다"로 끝나지만, 투자 앱에서 중요 정보를 숨기면 "내 자산이 위험해질 수 있다"는 큰 차이가 있다.
그렇게 도출된 것이 바로 '버튼을 누르기 직전에 자연스럽게 시야에 들어오는' 하단의 토스트 메시지 형태였다.
현미경으로 뜯어본 디테일: 14px 안에 담긴 철학
최종안을 결정한 후에는 집착에 가까운 조율이 시작되었다. 단순히 "넣었다"가 중요한 게 아니라, "어떻게 보이느냐"가 사용자 경험을 결정하기 때문이다.
① 배경색은 왜 #333333인가?
토스증권의 다크 모드 배경은 완전한 블랙(#000000)이 아닌 아주 깊은 네이비 톤(#1C1C1E)이다. 여기에 추가될 정보창의 배경색을 정하는 것이 첫 번째 난관이었다.
너무 밝으면? 시선이 '구매하기' 버튼(빨간색, #FF3B30)보다 먼저 간다. (주객전도)
너무 어두우면? 배경에 묻혀서 정보가 안 보인다.
최종 선택 : 배경보다 살짝 밝은 다크 그레이(#2C2C2E ~ #333333) 계열을 선택하고, 투명도(Opacity)를 90%로 조절했다.
빨간색 구매 버튼의 강렬함을 해치지 않으면서, "나 여기 있어요"라고 은근히 속삭이는 정도의 존재감을 원했기 때문이다. 이는 구글의 Material Design 가이드라인에서도 강조하는 '계층적 표면' 개념과 맥을 같이 한다.
② 아이콘은 왜 '저울'인가?
처음엔 느낌표(!) 아이콘을 넣었다. 하지만 느낌표는 사용자에게 '경고'나 '오류'처럼 느껴져 불안감을 준다.
실제로 Nielsen Norman Group의 연구에 따르면, 느낌표 아이콘은 사용자의 심박수를 미세하게 올리고 부정적 감정을 유발한다고 한다. 저는 이 기능이 사용자를 혼내는 게 아니라, 조용히 옆에서 돕는 친구이길 원했다.
그래서 선택한 것이 '균형'을 상징하는 저울 아이콘(⚖️)이다. "당신의 자산이 균형 잡혀 있는지 확인해보세요"라는 부드러운 넛지다. 행동경제학에서 말하는 '선택 설계'의 일종으로, 강요하지 않지만 올바른 방향으로 은근히 안내하는 디자인이라고 할 수 있다.
③ 타이포그래피 14px의 위계
메인 문구 : 내 자산 속 VOO 비중이 20%가 됩니다.
폰트 크기 및 웨이트:
크기: 14px (구매 금액 32px 이상과 비교했을 때 현저히 작음)
웨이트: Regular (Bold가 아닌 일반 두께)
컬러: #8E8E93 (중간 회색, 너무 밝지도 어둡지도 않은 톤)
이유:
이 정보는 '필수'가 아니라 '보조'이기 때문이다.
사고 싶은 사람은 그냥 사면 된다. 하지만 망설이는 사람, 혹은 저처럼 포트폴리오 균형을 중시하는 투자자에게만 보이는 정보여야 한다. 그래서 Regular 웨이트를 사용하여 가독성은 챙기되, 시각적 소음이 되지 않도록 절제했다.
Apple의 Human Interface Guidelines에서도 강조하듯, "정보의 중요도는 크기와 무게로 말한다"는 원칙을 따랐다.
디자이너는 '화가'가 아니라 '설계자'다
이번 리디자인 프로젝트를 통해 배운 것은 하나다.
디자인은 단순히 화면에 요소를 예쁘게 배치하는 그림 그리기가 아니었다.
사용자의 시선 흐름을 방해하지 않는 위치 선정
정보의 중요도에 따른 컬러와 크기의 위계 설정
그리고 사용자의 심리를 고려한 아이콘과 문구의 선택
이 모든 것이 맞물려야 비로소 '쓸만한 기능' 하나가 탄생한다는 것을 깨달았다.
간단하고 보기 편한 UI를 만들고 싶었지만, 동시에 필요한 정보는 반드시 전달되어야 한다는 딜레마 속에서, 저는 '딱딱하지만 필요한 정보형 UI'와 '직관적이고 편안한 UI'가 공존할 수 있다는 가능성을 봤다.
언젠가 제가 그린 이 1px의 고민들이 실제 앱에 반영되어, 저 뿐만 아니라 토스증권의 MAU 410만 명의 '건강한 투자'를 돕는 날이 오기를 상상해 본다.