버튼 하나에 들어갈 텍스트를 두고 팀 회의가 30분 넘게 이어진 적이 있습니다. "확인"으로 할지, "삭제하기"로 할지를 두고요. 그때는 솔직히 좀 피곤했습니다. 그런데 제가 직접 B2B SaaS 대시보드 프로젝트를 운영하면서 생각이 완전히 바뀌었습니다. 화면 위 글자 한 줄이 이용자의 행동을 결정한다는 게 과장이 아니었습니다.
40조 번 눌린 키패드가 증명한 것
혹시 스마트폰에서 전화번호를 입력할 때 숫자 배열이 왜 이렇게 생겼는지 생각해 본 적 있으십니까? 1-2-3이 맨 위, 아래로 내려가며 7-8-9가 오는 이 배열은 1950년대 벨연구소(Bell Labs)의 인간공학 팀이 수십 가지 대안을 직접 테스트한 끝에 선택한 결과입니다. UX 분야의 권위자인 야콥 닐슨(Jakob Nielsen)은 이 키패드 인터페이스가 설계 이후 지금까지 약 40조 번 이용되었다고 추산합니다(출처: UX Tigers).
여기서 UX(User Experience)란 이용자가 제품이나 서비스와 상호작용하는 모든 경험을 설계하는 학문을 뜻합니다. 화면이 예쁜지가 아니라, 이용자가 원하는 것을 얼마나 쉽게 찾을 수 있는지, 실수했을 때 당황하지 않는지, 다시 쓰고 싶은지까지 모두 포함하는 개념입니다. 돈 노먼(Don Norman)이 1993년 애플에서 이 용어를 공식화했을 때, 그는 기존의 '인터페이스 디자인'이나 '이용성'이라는 개념이 너무 협소하다고 판단했습니다. 그가 원한 것은 산업 디자인부터 매뉴얼 한 장까지, 이용자와 제품이 닿는 모든 접점을 아우르는 틀이었습니다.
닐슨은 UX의 본질을 이렇게 압축합니다. "UX의 핵심은 설계라는 예술에 과학적 방법론을 적용하는 것이다." 벨연구소 팀이 키패드 배열을 감으로 결정하지 않고 테스트 이용자를 관찰하며 입력 시간과 오류율을 측정했듯이, UX는 추측이 아니라 관찰에 기반합니다.
마이크로카피 한 줄이 전환율을 바꾼다
그렇다면 UX 라이팅은 어디에 위치할까요? UX 라이팅이란 이용자가 디지털 제품을 이용하는 과정에서 마주치는 모든 텍스트를 설계하는 작업입니다. 버튼 문구, 에러 메시지, 온보딩 안내, 툴팁처럼 화면 위에 존재하는 모든 글자가 대상입니다. 이런 짧은 텍스트들을 마이크로카피(microcopy)라고 부릅니다. 마이크로카피란 글자 수는 적지만 이용자의 행동을 직접적으로 유도하거나 차단하는 힘을 가진 인터페이스 텍스트를 말합니다.
에어비앤비(Airbnb)가 예약 화면에 "You won't be charged yet(아직 결제되지 않습니다)"이라는 한 줄을 추가했을 때, 예약 진행률이 개선되었다고 알려져 있습니다. 이 한 문장이 결제에 대한 이용자의 불안이라는 심리적 장벽을 걷어낸 것입니다. 아마존(Amazon)도 "Place your order"라는 명확한 버튼 문구로 모호함을 없앴습니다.
제가 직접 써봤는데, 이 차이가 생각보다 훨씬 크게 느껴집니다. 프로젝트 초반에 버튼에 그냥 "확인"이라고 써뒀을 때, 내부 테스트에서 "이게 저장되는 건지 취소되는 건지 모르겠다"는 피드백이 계속 들어왔습니다. "저장하기"로 바꾸고 나서야 그 피드백이 멈췄습니다. 단어 하나의 차이였지만, 이용자 입장에서는 완전히 다른 경험이었습니다.
이용성(Usability)을 측정하는 닐슨의 5가지 품질 속성 중 오류(Errors) 항목이 이를 잘 설명합니다. 이용성이란 이용자가 제품을 얼마나 쉽게, 효율적으로, 만족스럽게 이용할 수 있는지를 나타내는 품질 지표입니다. 좋은 에러 메시지의 구조는 다음과 같습니다.
- 현재 상태를 먼저 알린다 ("입력한 이메일 주소 형식이 올바르지 않아요")
- 원인을 설명한다 ("@를 포함해야 합니다")
- 해결 방법을 제시한다 ("example@domain.com 형식으로 입력해주세요")
"Error 404"와 "페이지를 찾을 수 없어요. 홈으로 돌아가시겠어요?"는 기술적으로 같은 상황이지만, 이용자가 느끼는 감정은 완전히 다릅니다.
개발자가 쓰면 안 되나요? 디자인 시스템이 답합니다
"버튼 텍스트 쓰는 데 왜 전문가가 필요해?"라고 묻는 분도 계실 겁니다. 저도 처음엔 그렇게 생각했습니다. 그런데 제가 맡았던 B2B SaaS 대시보드 프로젝트에서 디자이너 2명이 각자 다른 표현을 쓰기 시작하자 문제가 빠르게 드러났습니다. 같은 저장 동작에 대해 한 화면은 "저장", 다른 화면은 "완료", 또 다른 화면은 "확인"이 쓰였습니다. 이용자 입장에서는 같은 앱 안에서 서로 다른 언어로 말하는 여러 사람을 만나는 셈이었습니다.
토스가 전사적 UX 라이팅 체계를 구축한 이유도 같습니다. 토스의 라이팅 원칙 중 'Predictable hint'는 버튼을 누른 뒤 어떤 일이 일어날지 이용자가 예측할 수 있어야 한다는 원칙입니다. "확인/취소" 대신 "삭제하기/돌아가기"를 쓰는 것이 그 구현입니다. 그리고 'Find hidden emotion'은 단순한 정보 전달을 넘어 이용자의 감정에 공감하는 텍스트를 쓰라는 원칙으로, 토스가 대출 완전 상환 이용자에게 "축하해요"라는 푸시 알림을 보냈을 때 "힘이 됐다"는 반응을 이끌어낸 사례가 대표적입니다.
이 문제를 구조적으로 해결하기 위해 저는 디자인 토큰(Design Token) 시스템을 도입했습니다. 디자인 토큰이란 색상, 간격, 서체 같은 디자인 속성을 변수로 정의하여 디자인과 코드가 동일한 값을 공유하도록 만드는 시스템입니다. Figma에서 Tokens Studio 플러그인을 써서 Primitive → Semantic 2단계 토큰 구조를 설계했는데, 이 구조에서 Primitive 토큰이란 color.neutral.100처럼 실제 값 자체를 정의하는 가장 기본 단위이고, Semantic 토큰이란 text/primary처럼 그 값이 어떤 용도로 쓰이는지를 이름에 담은 상위 레이어입니다. 다크모드 전환 시 Semantic 레벨만 바꾸면 전체 테마가 한 번에 전환됩니다.
결과는 수치로 바로 나왔습니다. 디자인 변경 후 개발 반영까지 걸리던 평균 3일이 반나절로 단축됐고, 다크모드 관련 버그 리포트는 월 8건에서 1건으로 줄었습니다.
파이프라인의 한계, 솔직하게 말하면
그렇다고 이 구조가 완벽한 건 아닙니다. 제가 직접 운영해보니 분명한 약점이 있었습니다. 타입스크립트(TypeScript) 환경에서 토큰 값을 string으로 직접 입력해야 하는 상황이 생기는데, 자동완성이 되지 않아 오타 하나로 빌드가 깨지는 상황이 꽤 자주 발생했습니다. 개발자 경험(DX)이란 개발자가 도구를 사용할 때 느끼는 효율성과 편의성을 의미하는 개념인데, 디자이너 경험을 개선하는 과정에서 DX가 오히려 후퇴하는 아이러니가 생긴 것입니다.
정보 설계(Information Architecture) 관점에서 보면, 디자인 토큰의 네이밍 컨벤션이 곧 시스템의 멘탈 모델이 됩니다. 정보 설계란 이용자가 정보를 직관적으로 탐색하고 이해할 수 있도록 구조화하는 작업을 말합니다. surface/primary, text/secondary 같은 Semantic 이름은 디자이너와 개발자가 동일한 언어로 대화할 수 있게 만들어 주는 공유 어휘(shared vocabulary)입니다. 네이밍이 엉망이면 토큰 시스템 자체가 새로운 혼란의 원인이 됩니다. 도구가 좋아도 어휘가 틀리면 시스템이 무너진다는 걸 몸으로 배웠습니다.
닐슨은 AI를 활용한 UX의 미래를 논하면서 "더 이상 'Lorem ipsum' 같은 더미 텍스트로 테스트하지 말고 현실적인 콘텐츠로 테스트하라"고 강조합니다(출처: Nielsen Norman Group). 화면 위의 텍스트가 빈 칸 채우기가 아니라 설계의 대상이라는 인식이 확산되고 있다는 뜻입니다.
결국 UX 라이팅과 디자인 시스템은 별개의 이야기가 아닙니다. 텍스트도 토큰처럼 일관된 원칙 아래 설계되어야 하고, 토큰도 텍스트처럼 이용자와 대화하는 어휘여야 합니다. 제가 경험한 가장 인상적인 순간은 디자이너가 Figma에서 브랜드 컬러를 수정하자 GitHub PR이 자동으로 올라왔을 때였습니다. 개발자가 "이게 진짜 되네?"라고 말한 그 짧은 한마디가, 시스템이 실제로 작동하고 있다는 가장 확실한 증거였습니다. 디지털 제품을 만드는 분이라면, 화면 위의 글자 하나도 설계의 대상으로 바라보는 시각이 결국 제품 전체의 품질을 바꿔놓는다는 점을 꼭 기억하시길 권합니다.
참고: https://www.nngroup.com/articles/definition-user-experience/
https://www.nngroup.com/articles/ai-ux/
https://oliveyoung.tech/2024-12-16/Design-System-Token-Automation/