마음기록 앱 디자인 리프레시, 화이트+그린으로 바꾼 이유

화면을 열 때마다 어딘가 소란스럽다고 느낀 적 없나요? 기능은 그대로인데 색이 많으면 앱 전체가 시끄러워져요. 개발 중인 플랜티(plan-t) 시안이 딱 그랬어요.

왜 색부터 손댔을까요

플랜티는 마음을 기록하고 돌보는 걸 목표로 만들고 있는 AI 정신건강 앱이에요. 혼자 운영하면서 기능 개발에만 집중하다 보니, 시안에는 어느새 포인트 색이 네 가지나 쌓여 있었어요. 버튼은 파랑, 그래프는 보라, 알림은 주황. 하나씩 보면 괜찮은데 한 화면에 모이니 눈이 갈 곳을 잃더라고요.

마음을 다루는 앱이라면 화면부터 조용해야 한다는 결론에 닿았어요. 그래서 색을 전부 걷어내고 화이트+그린 두 축으로 다시 시작했어요.

규칙은 세 줄이면 충분했어요

• ✓배경은 옅게 톤을 얹은 화이트
• ✓포인트는 그린 1색, 화면당 1회
• ✓텍스트는 순검정 대신 짙은 잉크색

거창한 디자인 문서 대신 세 줄짜리 규칙을 먼저 세웠어요. 배경은 순수한 흰색이 아니라 아주 옅게 초록 기운을 얹은 화이트로. 포인트 그린은 한 화면에 1번만. 텍스트는 눈이 덜 피로하도록 순검정 대신 짙은 잉크색으로 정했어요.

직접 적용해 봤더니 규칙이 짧으니까 고민도 짧아졌어요. "여기 무슨 색 쓰지?"라는 질문이 사라진 게 가장 큰 수확이에요.

전면 교체는 이렇게 진행했어요

색 토큰 정리→시맨틱 이름 붙이기→컴포넌트 일괄 적용

작업은 3단계로 나눴어요. 먼저 흩어진 색 값을 모아 토큰으로 정리하고, 각 토큰에 배경·강조·경고 같은 시맨틱 이름을 붙인 다음, 컴포넌트가 색 값이 아니라 이름만 바라보게 바꿨어요. 간격은 8px 배수로만 쓰고 글꼴 굵기도 2종으로 줄였어요.

이름 기준으로 정리해 두니 전면 교체인데도 이틀이면 충분했어요. 화면마다 색 값을 하드코딩했다면 훨씬 오래 걸렸을 거예요.

바꾸고 나서 배운 것

새 팔레트로 돌려 보니 같은 기능인데 앱의 인상이 완전히 달라졌어요. 기록하는 화면이 조용해지니 글자에 집중하게 되더라고요. 무료 금융계산기 플랜씨(plan-c)를 만들 때도 비슷한 경험을 했는데, 숫자를 다루는 화면일수록 장식을 덜어낼 때 신뢰가 생겼어요.

색을 바꾸는 일은 결국 앱이 사용자에게 말을 거는 톤을 바꾸는 일이에요. 여러분의 프로젝트도 색이 몇 개인지 한번 세어 보세요. 다섯 개가 넘는다면, 두 축으로 줄이는 실험부터 가볍게 해보시길 권해요.