디자인 — Stitch로 목업을 잡고, 시스템으로 굳혔다

디자이너 없이 앱을 만들 때 가장 두려운 건 "촌스러워지는 것"이 아니다. 화면마다 조금씩 달라지는 것이다. 이 화면의 주황과 저 화면의 주황이 미묘하게 다르고, 버튼 높이가 들쭉날쭉한 것. 사용자는 이유를 몰라도 "어딘가 엉성하다"고 느낀다.

이건 감각의 문제가 아니라 기억의 문제다. 어제 만든 화면의 여백이 몇이었는지 사람은 기억하지 못한다. 사람 팀에서는 디자이너 한 명이 그 기억을 대신 붙들고 있어서 티가 안 날 뿐이다. 그 역할이 없는 팀에서 화면을 스무 개 만들면, 스무 개의 조금씩 다른 규칙이 생긴다.

첫 인상은 Google Stitch로 잡았다. 컨셉과 화면 구성을 설명하면 그럴듯한 목업(실물 크기 시안)을 뽑아주는 AI 디자인 도구다. 홈·라이브러리·설정 3개 탭의 뼈대와 전체적인 무드를 Stitch에서 여러 번 굴리며 눈으로 확정했다. 기획자에게 이건 축복이다 — 예전 같으면 와이어프레임 그려서 디자이너에게 넘기고 시안을 기다렸을 일이, 밤 11시에 혼자 "이 방향 아니네, 다시"를 열 번 하는 일이 됐다.

시안을 열 번 버릴 수 있다는 건 생각보다 큰 변화였다. 사람에게 부탁한 시안은 버리기가 미안해서 어떻게든 살릴 방법을 찾게 된다. 그렇게 마음에 안 드는 방향이 "이미 만들었으니까"라는 이유로 살아남는다. 아무에게도 미안하지 않으니 미련 없이 버릴 수 있었고, 결과적으로 처음 잡았던 방향과 최종 방향은 꽤 달라졌다.

그리고 여기서 멈추지 않은 게 핵심이었다. 목업은 그림일 뿐이라, 그대로 개발하면 결국 화면마다 흘러내린다. 그래서 Stitch에서 확정한 방향을 디자인 시스템 문서로 굳혔다.

• 브랜드 컬러 : 테라코타(#C9603A). 흙과 온기의 색
• 쓰는 곳 : 채록이의 정체성이 드러나는 곳에만 — 스플래시, 온보딩, 채록이 아바타
• 안 쓰는 곳 : 그 외 일반 화면. 절제된 무채색으로 간다
• 강조 규칙 : 한 화면에 강조는 한 곳만

희소해야 브랜드다.

모든 색은 라이트 모드/다크 모드 쌍으로 정의해 토큰(이름 붙은 값)으로 만들었고, AI 팀원은 화면을 만들 때 색상 코드를 직접 쓰지 않고 토큰만 참조한다. 토큰으로 만들어 두면 좋은 점이 하나 더 있다. 나중에 "이 회색이 좀 탁한데"라고 생각했을 때 고칠 자리가 한 곳이다. 화면 스무 개를 뒤지는 대신 값 하나를 바꾸면 전부 따라온다. 결과적으로 열흘간 수십 개 화면이 만들어졌는데 색이 흘러내린 곳이 없다. 일관성은 감각이 아니라 시스템이다. 사람 팀에서도 진리였지만, AI 팀에서는 생존 조건이었다.