안녕하세요! 방구석에서 코딩으로 자본주의 생존 도구를 빚어내고 있는 1인 개발자입니다.
지난 1편에서는 제가 왜 기존의 답답한 엑셀 파일들을 버리고, 직접 '올인원 배당 파이어족 은퇴 시뮬레이터'를 만들게 되었는지 그 기획 배경을 말씀드렸죠. 목표 금액이 아니라 '은퇴 날짜'를 역산해서 보여준다는 아이디어까지 구상하고 나니, 이제 남은 건 이 멋진 기획을 사용자들의 눈앞에 어떻게 예쁘고 편하게 보여줄 것인가 하는 '디자인' 문제였습니다.
오늘은 프론트엔드 개발자로서 제가 UI/UX(사용자 환경 및 경험)를 설계할 때 어떤 고민을 했는지, 그리고 색깔 하나하나에 어떤 심리학적 의미를 담았는지에 대한 재미있는 디자인 썰을 풀어보려고 합니다.
숫자 타이핑은 최악의 경험이다: 슬라이더(Slider)의 도입
여러분, 스마트폰으로 웹사이트에 접속해서 은행 계좌번호나 금액을 입력해 본 경험 다들 있으시죠?
입력창을 터치하는 순간, 화면 아래에서 거대한 숫자 키보드가 불쑥 튀어나오면서 화면의 절반을 가려버립니다. 게다가 '100만 원'을 입력하려고 '1000000'을 치다 보면, 내가 0을 5개 쳤는지 6개 쳤는지 눈이 빠져라 세어봐야 해요. 출퇴근길 흔들리는 버스 안에서 0 하나 잘못 눌러서 100만 원이 1000만 원이 되어버리면, 계산 결과가 안드로메다로 가버리거든요.
저는 제 시뮬레이터에 접속한 사용자들이 이런 짜증을 겪게 하고 싶지 않았습니다. 그래서 과감하게 사용자가 직접 숫자를 타이핑하는 방식을 버리고, 손가락으로 쓱쓱 좌우로 밀어서 값을 조절하는 '슬라이더(Range Input)' 방식을 도입했습니다.
슬라이더 UI의 장점은 압도적입니다. 시드머니를 5천만 원에서 1억 원으로 올리고 싶을 때, 숫자를 지우고 새로 치는 게 아니라 그냥 동그란 버튼을 잡고 오른쪽으로 쓱 밀기만 하면 됩니다. 사용자는 키보드에 화면을 뺏길 일도 없고, 오타를 낼 일도 없죠. 무엇보다 손가락을 움직일 때마다 우측의 '은퇴 날짜'가 실시간으로 휙휙 변하는 걸 눈으로 직접 보면, 마치 내 인생의 타임머신을 조종하는 듯한 묘한 쾌감마저 듭니다.
물론 슬라이더만 있으면 미세한 단위(예: 125만 원)를 맞추기 어려울 수 있기 때문에, 슬라이더 양옆에 [-] 버튼과 [+] 버튼을 달아서 터치 한 번에 정해진 금액씩 깔끔하게 오르내리도록 디테일도 챙겼습니다. 이런 작은 배려들이 모여서 "이 사이트 진짜 쓰기 편하다!"라는 경험을 만들어 내는 거니까요.
컬러 심리학 1: 내 인생의 D-Day는 묵직하고 믿음직한 '파란색'으로
레이아웃을 잡은 뒤에는 색상을 칠할 차례였습니다. 이 웹사이트에서 사용자의 시선이 가장 먼저, 그리고 가장 오래 머무는 곳은 어디일까요? 맞습니다. 바로 "당신의 은퇴 예정일은 OOOO년 O월입니다"라고 결과를 띄워주는 메인 결과창입니다.
저는 이 결과창의 배경색을 깊고 선명한 '파란색(Blue)'으로 칠했습니다. 여기에는 아주 다분히 의도적인 컬러 심리학이 숨어 있습니다.
우리가 흔히 쓰는 토스(Toss), 신한은행, 우리은행, 삼성페이 같은 금융 앱들을 떠올려 보세요. 대부분의 금융권 메인 컬러가 파란색 계열입니다. 파란색은 사람의 무의식 속에 '신뢰, 안정감, 전문성, 그리고 확신'을 주는 색상이기 때문입니다.
내 남은 인생의 뼈대를 세우고, 내가 언제 사표를 던질 수 있는지 중대한 결과를 확인하는 창이 너무 가벼운 핑크색이나 불안해 보이는 빨간색이면 신뢰가 뚝 떨어지지 않을까요? 그래서 저는 사용자가 결과를 확인하는 순간, "아, 이 날짜라면 내가 믿고 지금부터 투자를 시작해 봐도 되겠다"라는 심리적 안도감을 느낄 수 있도록 결과창을 단단하고 묵직한 파란색으로 디자인했습니다.
컬러 심리학 2: 자산이 쑥쑥 자라나는 마법, 그래프는 '초록색'으로
마지막으로 화면 하단에 펼쳐지는 거대한 J커브 성장 그래프의 색상입니다. 시간이 지날수록 배당금이 재투자되면서 총자산이 로켓처럼 솟구쳐 오르는 이 곡선에는 '초록색(Green)'을 입혔습니다.
한국 주식시장에서는 상승이 빨간색이지만, 글로벌 금융 시장이나 일반적인 심리학에서 빨간색은 '경고, 위험, 정지'를 의미하는 경우가 많습니다. 반면 초록색은 어떤가요? 봄에 피어나는 새싹, 우거진 숲, 평화로움, 그리고 서양에서는 '돈(달러)' 자체를 상징하기도 합니다.
저는 사용자들이 이 그래프를 보면서 본인의 돈이 단순히 기계적으로 늘어나는 게 아니라, 마치 한 그루의 튼튼한 나무(Money Tree)가 쑥쑥 자라나는 듯한 생명력을 느끼길 바랐습니다. 초록색 상승 곡선은 마음을 아주 편안하게 해 주면서도, "이대로만 꾸준히 물(배당금)을 주면 내 자산의 숲이 완성되겠구나"라는 긍정적인 심리적 암시를 팍팍 심어주거든요.
디자인은 곧 사용자에 대한 '배려'입니다.
1인 개발자로서 기획부터 코딩, 디자인까지 혼자 다 하다 보면 가끔 "그냥 대충 보기 편하게 흰 배경에 검은 글씨로 만들지 뭐" 하는 타협의 유혹이 찾아옵니다. 하지만 이번 파이어족 계산기를 만들면서 다시 한번 뼈저리게 느꼈습니다. 좋은 UI/UX와 색상 배치는 단순한 '꾸미기'가 아니라, 화면 너머에 있는 사용자의 상황과 감정까지 고려하는 따뜻한 '배려'라는 것을요.
이렇게 겉모습(UI/UX)을 예쁘고 직관적으로 포장해 두었으니, 이제 이 예쁜 껍데기 속에서 톱니바퀴처럼 돌아가는 복잡한 로직들을 조립할 차례입니다.
다음 3편에서는 프론트엔드 개발자들의 영원한 친구, [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #03] React와 Vite를 활용한 초기 세팅과 복잡한 상태(State) 관리 전략이라는 본격적인 코딩 이야기로 찾아오겠습니다. 눈에 보이는 화면 뒤편에서 어떤 치열한 코드들이 돌아가고 있는지, 다음 편도 기대해 주세요!
[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #03] React + Vite 초기 세팅 및 복잡한 상태(Stat
안녕하세요! 방구석에서 코딩으로 자본주의 생존 도구를 뚝딱뚝딱 만들어가고 있는 1인 개발자입니다.지난 2편에서는 엑셀의 답답함을 벗어던지기 위해 슬라이더 UI를 도입하고, 파란색과 초록
code-bricks.tistory.com
