Design Methods

한눈에 보기

기획 의도를 정보구조, 화면 상태, 컴포넌트 규칙, 디자인 QA 기준으로 전환하는 디자인 작업 방식입니다.

• Start: Flow + state — 예쁜 화면보다 사용 흐름과 상태
• Artifact: Representative screen set — 대표 화면과 변형 상태
• Review: Usability + implementation — 사용성과 구현 가능성 동시 검토

정보구조 먼저

디자인은 첫 화면을 예쁘게 만드는 작업보다 사용자가 어디에서 무엇을 판단하는지 정리하는 작업에 가깝다. IA, 탐색 구조, 주요 작업 경로를 먼저 잡아야 화면이 기능 목록처럼 흩어지지 않는다.

• 사용자 목표와 주요 작업 경로
• 탐색 구조와 메뉴 우선순위
• 화면별 핵심 판단 정보
• 반복 사용자가 빠르게 스캔할 수 있는 밀도

상태 기반 화면 설계

실제 서비스 화면은 정상 상태만 존재하지 않는다. 빈 상태, 로딩, 오류, 권한 없음, 저장 중, 검토 필요 같은 상태를 함께 설계해야 개발과 QA가 같은 화면을 상상한다.

• empty/loading/error/forbidden 상태
• 권한별 노출/비노출
• 폼 검증과 저장 실패
• 운영자가 다시 확인해야 하는 상태

대표 화면과 변형

모든 페이지를 처음부터 풀 디자인하지 않는다. 대표 화면으로 레이아웃, 밀도, 컴포넌트 규칙을 고정한 뒤 목록, 상세, 작성, 설정, 빈 상태 같은 변형을 빠르게 확장한다.

• 대표 화면 1~2개로 시각 기준 확정
• 컴포넌트 규칙: 버튼, 탭, 필터, 테이블, 카드, 모달
• 반응형 기준: 모바일, 태블릿, 데스크톱
• 브랜드 톤보다 업무 효율이 중요한 화면 구분

디자인 QA

디자인 QA는 픽셀을 맞추는 일만이 아니다. 텍스트가 잘리지 않는지, 버튼과 상태가 빠지지 않았는지, 개발된 화면이 기획 의도와 다른 방향으로 흐르지 않는지 확인하는 게 핵심이다.

• 텍스트 오버플로우와 모바일 줄바꿈
• 상태별 화면 누락
• 컴포넌트 일관성
• 브라우저 캡처와 실제 구현 비교

연결 문서

• Prototype & Handoff Methods — 디자인 시안을 개발 검토 가능한 형태로 넘기는 방식
• Planning Methods — 디자인 이전에 필요한 범위와 상태 정의
• Work Method Library — 직무별 방법론 허브