[내일 배움 캠프] 18일차

최준용·2026년 1월 22일

[UI/UX] 길을 잃지 않는 와이어프레임 설계 가이드

디자인을 시작하기 전, 우리는 종종 '예쁜 화면'을 만드는 데 몰입하곤 합니다. 하지만 와이어프레임의 본질은 논리적인 설계도입니다. 오늘은 사용자의 행동을 유도하고 논리적 허점을 줄이는 와이어프레임 & 시각적 위계 설계 원칙을 정리합니다.

와이어프레임은 시각적 정렬에 매몰되기 전, 사용자에게 어떤 경험을 줄 것인지 설계하는 단계입니다.

텍스트를 먼저 쓰세요: 박스를 먼저 그리면 정렬에 신경 쓰느라 사용자 행동을 놓치기 쉽습니다. 정보의 순서를 글로 먼저 나열해 보세요.

한 문장으로 정의하기: "이 화면은 ~를 유도하는 단계이다"라고 명확히 정의할 수 있어야 합니다. 목적이 흐릿하면 UI도 복잡해집니다.

단일 색조 사용: 채색이나 효과는 판단을 흐리게 합니다. 레이아웃과 정보 구조에만 집중하세요.

위계는 단순히 크기를 키우는 것이 아니라, 정보에 '리듬'을 부여하는 작업입니다.

시선의 종착지에는 CTA: 사용자가 정보를 모두 인지한 시점에 CTA(Call to Action) 버튼이 있어야 합니다. 보통 우측 하단이나 스크롤의 끝이 가장 자연스럽습니다.

여백은 호흡이다: 화면이 비어 보인다고 채우지 마세요. 여백은 정보 덩어리를 구분해주고 사용자가 합리적인 판단을 내리도록 돕는 공간입니다.

정보의 순서: 사용자가 고민하는 시간을 줄여주어야 합니다. 인지 → 비교 → 결정의 흐름에 따라 결정에 결정적인 정보를 상단에 배치하세요.

훌륭한 인터페이스는 사용자에게 고민을 강요하지 않습니다.

행동 중심적 문구: '확인'이나 '완료' 같은 모호한 단어는 피하세요. 거래 요청하기, 스터디 신청하기처럼 다음 행동이 직관적으로 떠오르는 문구를 사용해야 합니다.

정보보다 행동 중심: "어떤 정보를 보여줄까?"보다 "이 정보를 보고 사용자가 무엇을 하게 만들까?"를 우선순위에 둡니다.

반복되는 요소는 규칙(Component)으로 관리해야 사용자의 학습 비용이 줄어듭니다.

재사용성 판단: 2번 이상 반복되는 요소는 컴포넌트화하여 효율을 높입니다.

네이밍 컨벤션: Btn/Primary/Default와 같이 기능과 상태를 기준으로 짧고 명확하게 이름을 정하세요.

Auto Layout의 필수화: 피그마의 오토 레이아웃은 단순히 편의 기능이 아니라, 디자인의 뼈대와 일관성을 유지하는 핵심 도구입니다.