15Start Flow + state / Artifact Representative screen set / Review Usability + implementation
Design Methods
기획 의도를 정보구조, 화면 상태, 컴포넌트 규칙, 디자인 QA 기준으로 전환하는 디자인 작업 방식.
예쁜 화면보다 사용 흐름과 상태
대표 화면과 변형 상태
사용성과 구현 가능성 동시 검토
Method / UX / UI Design화면 기준선
method v1.0 · portfolio draft
01작업 요약
기획 의도를 정보구조, 화면 상태, 컴포넌트 규칙으로 바꿔 사용자와 개발자가 같은 화면을 상상하게 만듭니다.
디자인 기준이 약하면 예쁜 대표 화면만 남고, 빈 상태와 오류, 권한, 모바일 줄바꿈은 구현 후반에 다시 발견됩니다.
02입력 의존성
- Project Cardready
사용자와 핵심 목표
- Flow & State Mapready
화면 전환과 상태값
- Brand / tone guidewatch
없으면 서비스 성격 기준으로 결정
- Component inventorymissing
기존 UI가 없으면 대표 화면에서 생성
03리스크 신호
| Signal | Severity | Meaning | First response |
|---|---|---|---|
hero_like_app_ui | medium | 업무 도구인데 랜딩 페이지처럼 보임 | 밀도, 정보 계층, 반복 사용성을 우선 |
missing_ui_state | high | 정상 화면만 설계됨 | empty/loading/error/forbidden 상태 추가 |
component_drift | medium | 버튼, 필터, 표 규칙이 화면마다 다름 | 대표 컴포넌트 규칙 정리 |
mobile_text_overflow | high | 긴 문구가 모바일에서 잘림 | 실제 viewport 캡처로 검증 |
04반복 절차
IA와 작업 경로 정리
화면 시안을 만들기 전탐색 구조와 주요 작업 경로를 먼저 정해 화면이 기능 목록처럼 흩어지지 않게 합니다.
IA mapPrimary flowScreen list대표 화면 설계
디자인 방향을 빠르게 맞출 때모든 페이지를 풀 디자인하지 않고 대표 화면으로 레이아웃, 밀도, 컴포넌트 규칙을 고정합니다.
목록상세작성/수정빈 상태디자인 QA
개발 반영 전후텍스트 오버플로우, 상태 누락, 반응형, 컴포넌트 불일치를 실제 화면 캡처로 확인합니다.
Desktop captureMobile captureDesign gap list05역할 분담
| Role | Primary work | Handoff |
|---|---|---|
| UX | 사용자 흐름과 정보구조 | IA / Flow map |
| UI | 시각 기준과 컴포넌트 규칙 | Representative screen set |
| FE | 구현 가능성, 반응형, 상태 렌더링 | Component notes |
| QA | 상태별 누락과 화면 품질 | Design QA checklist |
06완료 체크리스트
화면 목적이 분명함
각 화면은 사용자가 무엇을 판단하고 완료하는지 설명되어야 합니다.
상태 변형이 포함됨
빈 상태, 로딩, 오류, 권한 없음, 저장 실패 화면이 있어야 합니다.
컴포넌트 규칙 유지
버튼, 필터, 탭, 테이블, 모달 사용 기준이 흔들리지 않아야 합니다.
반응형 캡처 통과
긴 텍스트와 버튼 라벨이 모바일과 데스크톱에서 잘리지 않아야 합니다.