디자인 원칙

명확성 우선

모든 화면은 세 가지 질문에 바로 답해야 한다. 지금 어디에 있는가? 무엇을 할 수 있는가? 방금 무슨 일이 있었는가? 해외로 돈을 보내려면 신뢰가 있어야 한다. 모든 것을 보여 주고, 아무것도 숨기지 않는다.

• 구체적이고 분명한 라벨을 쓴다. "Submit"이 아니라 "Send 250 USD"
• 고민을 줄이도록 화면마다 주요 액션은 하나만 둔다
• 상태 피드백은 즉시, 헷갈리지 않게 준다
• 전문 용어를 피한다. Senco 사용자는 영어 원어민이 아닐 수 있다
• 확인 전에 정확한 수수료와 환율을 보여 준다
• 비용 구성을 눈에 보이게 나눠 보여 준다 (송금 수수료 + 환전 마진 = 합계)
• 한눈에 알아볼 수 있는 상태 라벨을 쓴다 (Pending → Sent → Completed)

포기하는 것

명확성에는 화면 공간이 들고, 전환율도 떨어진다. 확인 전에 수수료 내역을 보여 주면, 합계 숫자 하나만 봤다면 끝까지 갔을 사용자 일부가 마지막 단계에서 이탈한다. 의도한 결과다. 수수료를 보고 나서 보내지 않을 사용자라면 보내지 않는 게 맞다.

신뢰는 좋은 소식보다 나쁜 소식에서 생긴다

성공한 송금은 어떤 제품이든 보기 좋게 보여 줄 수 있다. 신뢰는 환율이 바뀌었을 때, 송금이 늦어질 때, 인증이 반려됐을 때 제품이 어떻게 대응하느냐에 달려 있다. 이런 화면도 해피 패스만큼 공을 들인다. 구체적인 이유와 분명한 다음 단계를 보여 주고, 돌려 말하지 않는다. "Your transfer could not be completed"는 명확하지 않다. "The recipient's account number was rejected by the receiving bank"는 명확하다.

실제 예

기능보다 속도

사용자는 급한 상황에서 돈을 보낸다. 기능이 아니라 단계를 줄인다.

• 핵심 송금 플로우는 탭 세 번으로 끝난다: Amount → Recipient → Confirm
• 마지막으로 쓴 값(통화, 수취인)을 미리 채워 둔다
• 환율 비교는 "more info" 링크 뒤에 숨기지 않고 화면에 바로 보여 준다
• 로딩 중에는 스켈레톤 화면을 보여 준다. 빈 화면은 절대 보여 주지 않는다

포기하는 것

기능 요청은 모두 핵심 플로우의 탭 수를 기준으로 판단한다. 예약 송금, 분할 결제, 여러 수취인에게 한 번에 보내기는 모두 미뤘다. 가치가 없어서가 아니다. 대부분의 사용자가 시간에 쫓기며 마치는 플로우에, 하나같이 결정할 거리를 하나씩 더하기 때문이다. 시스템은 첫 송금이 아니라 아흔 번째 송금에 맞춰 최적화한다.

속도는 체감 속도다

스켈레톤을 보여 주는 400ms 응답이 아무것도 안 보이는 250ms 응답보다 빠르게 느껴진다. 기준은 요청이 끝나는 시점이 아니라 사용자가 행동할 수 있는 시점이다. 그래서 텍스트를 이미지보다, 캐시 데이터를 새 데이터보다 먼저 그리고, 등장 애니메이션이 끝나기 전에도 주요 액션을 탭할 수 있게 한다.

일부러 속도를 늦추는 곳

확인 단계다. 건너뛸 수 없고, 실수로 누른 Enter로 실행되지 않으며, 미리 선택된 상태로 두지 않는다. 제품에서 되돌릴 수 없는 액션은 이것 하나뿐이고, 마찰이 필요한 곳도 여기뿐이다.

제약을 전제로 디자인

Senco 사용자는 느리거나 불안정한 연결, 저사양 휴대폰을 쓰는 경우가 많다. 모든 화면은 이미지가 하나도 로드되지 않아도 온전히 동작해야 한다.

핵심 규칙

이미지는 보조 수단이지 콘텐츠가 아니다. 금융 데이터, 거래 상태, 조작할 수 있는 UI는 이미지가 하나도 없어도 표시되고 동작해야 한다. 이건 대비책이 아니라 기본 조건이다.

터치 타깃

터치 타깃은 최소 48px이다. 화면이 깨졌거나 이동 중에 앱을 쓰는 사용자도 있다. 탭 영역을 넉넉히 두면 중요한 금융 액션에서 잘못 누르는 일을 막을 수 있다.

텍스트 우선 렌더링

중요한 콘텐츠(잔액, 거래 상태, 금액)는 텍스트로 먼저 불러온다. 아바타나 배너 같은 이미지는 스크롤해서 화면에 들어올 때만 지연 로드한다. 이미지가 하나도 뜨기 전에 사용자는 이미 자기 데이터를 보고 행동할 수 있다.

단계별 이미지 전략

srcset에는 최소 세 가지 크기를 넣는다. 큰 이미지 하나를 모든 기기에 똑같이 보내지 않는다.

Save-Data 모드

사용자가 데이터 절약 모드(Save-Data: on 헤더)를 켜면 Senco는 꼭 필요하지 않은 이미지를 뺀다. 프로모션 배너를 숨기고, 프로필 사진 대신 이니셜을, 차트 대신 텍스트 환율을 보여 준다. 페이지가 깨져 보이지 않고, 브랜드다운 깔끔한 모습을 유지한다.

캐시 우선 로딩

서비스 워커가 정적 에셋과 최근 데이터를 캐시한다. 다시 방문하면 앱은 캐시로 바로 화면을 그리고, 새 데이터는 백그라운드에서 동기화한다. 이미지 캐시는 최대 10–15 MB로 잡는다. 장식용 에셋보다 금융 데이터가 먼저다.

오프라인 대응

오프라인일 때 Senco는 캐시된 데이터를 언제 받은 것인지("Updated 3 min ago") 분명히 표시해서 보여 준다. 아바타는 이니셜 원으로, 배너는 텍스트로 바뀐다. 금융 정보는 모두 그대로 볼 수 있다. 송금은 기기에 대기열로 쌓아 두었다가 연결이 돌아오면 동기화한다.

오래된 데이터는 오래됐다고 밝힌다

시각 표시가 없는 캐시 데이터는 데이터가 없는 것보다 나쁘다. 사흘 전 잔액인지 3초 전 잔액인지 사용자가 구분할 수 없기 때문이다. 캐시된 금융 값에는 모두 언제 값인지 붙여 둔다. 유효 시간이 지난 환율은 취소선을 긋고 새로 고침 액션과 함께 보여 준다. 현재 환율처럼 보여 주는 일은 없다.

포기하는 것

웹폰트, 장식 이미지, 히어로 애니메이션, 차트 위주 대시보드를 포기한다. 사무실 와이파이에 연결된 최신 플래그십 폰을 기준으로 만든 경쟁 제품보다 화면이 수수하다. 알고 택한 절충이다. 제품은 사용자가 실제로 쓰는 기기에서 돌아가야 한다.

디자인 도구 체인에도 제약이 생긴다. Figma MCP 파이프라인은 이미지와 커스텀 폰트를 넘겨주지 않는다. 시스템이 둘 다 쓰지 않으니 여기서는 잃을 게 없다.

경로는 하나로

목표마다 분명한 경로를 하나만 두어 인지 부담을 줄인다.

• 송금 플로우는 한 방향으로만 진행한다 (갈래가 나뉘는 마법사 없음)
• Bank와 Crypto는 선택 트리가 아니라 비교로 고른다
• 설정은 기능이 아니라 할 일 기준으로 묶는다 ("Notifications", "Security")
• 내비게이션은 얕게 둔다. 최대 2단계

설정하게 하지 말고 비교하게 한다

은행과 크립토 중 고르는 화면이 가장 좋은 예다. 선택 트리로 만들면 사용자는 돈을 보내기 전에 정산 방식부터 이해해야 한다. 비교로 만들면 두 옵션을 나란히 놓고 선택을 가르는 숫자 두 개, 총비용과 도착 시간만 보여 준다. 사용자는 한 줄을 고르면 된다. 할 수 있는 일은 같고, 전문 지식은 필요 없다.

포기하는 것

파워 유저는 지름길을 잃는다. 건너뛰기도, 저장된 템플릿도, 고급 모드도 없다. 백 번째 송금도 첫 송금과 단계 수가 같다. 이 비용은 미리 채우기로 대부분 만회하고, 관리해야 할 두 번째 경로를 만들지 않아도 된다.

2단계까지만

내비게이션 깊이는 2단계까지다. 3단계가 필요한 설정이 있다면 그룹을 잘못 나눈 것이다. 더 깊이 넣지 말고 할 일 기준으로 다시 묶는다. 이 제한 덕분에 모바일에서는 브레드크럼도 필요 없다.

원칙 적용 방법

디자인을 결정할 때 다음 순서로 묻는다.

1. 명확하고 투명한가? 설명 없이도 사용자가 무슨 일이 일어나는지 알 수 있는가? 비용과 상태가 모두 미리 보이는가?
2. 빠른가? 단계를 하나 줄이거나, 필드를 미리 채우거나, 정보를 더 일찍 보여 줄 수 있는가?
3. 제약 속에서도 동작하는가? 저사양 폰, 3G 연결에서도 로드되는가?
4. 경로가 하나인가? 더 단순한 플로우로 될 일을 복잡하게 만들고 있지 않은가?

하나라도 "아니오"라면 출시 전에 다시 디자인한다.

원칙이 부딪힐 때

순서대로 정한다. 실제 사례는 다음과 같다.

원칙이 다루지 않는 것

이 원칙은 스타일 가이드가 아니고, 시각적인 문제를 정해 주지 않는다. 어떤 radius를 쓸지는 원칙으로 알 수 없다. 그건 Tokens에서 정한다. 컴포넌트를 두고 벌어진 논쟁이 토큰으로 정리된다면, 원칙을 꺼낼 문제가 아니다.