학습 목표
- 사용자가 이해하는 UI/UX 설계의 역할과 적용 조건을 설명할 수 있다.
- 화면 목적과 사용자 흐름을 한 장에 그리세요.
- 사용자에게 등록 과제를 주고 막힌 지점을 수정하세요.
사전 지식
앞선 서비스에 맞는 기술 스택 고르기를 먼저 읽으면 용어를 이해하기 쉽습니다. 이미 아는 내용이면 이 장부터 시작해도 됩니다.
개념 이해
UI는 사용자가 보는 버튼과 화면이고 UX는 목표를 달성하는 전체 경험입니다. 화면이 아름다워도 저장 실패를 모르게 하거나 모바일에서 조작할 수 없으면 좋은 경험이 아닙니다.
사용자 흐름·와이어프레임·정보 구조
사용자가 시작해 목적을 달성하기까지의 이동을 그립니다. 와이어프레임은 장식보다 제목·행동·정보 순서를 검토하는 초안입니다.
디자인 시스템
타이포그래피, 색상, 여백, 정렬과 버튼·입력창의 규칙을 공유합니다. 같은 역할의 컴포넌트는 재사용해 화면마다 기준이 달라지지 않게 합니다.
반응형과 모바일 우선
작은 화면의 핵심 행동부터 설계하고 넓은 화면에서 정보를 확장합니다. 다크모드는 색 반전이 아니라 배경·글자·상태 대비를 별도로 확인합니다.
접근성
입력창에 이름을 붙이고 키보드 이동·초점 표시·명암 대비를 확인합니다. 색만으로 성공과 실패를 구분하지 않습니다.
로딩·오류·빈 화면
응답을 기다리는 상태, 다시 시도하는 상태, 데이터가 아직 없는 상태는 다릅니다. 각 상태에 다음 행동을 안내합니다.
사용성 테스트
처음 보는 사람에게 설명 없이 핵심 과제를 요청합니다. 어디서 멈추는지 관찰하고 실제 문제를 기준으로 화면을 개선합니다.
실제 사용 사례
서비스 등록 화면의 주 행동을 저장 하나로 좁히고, 오류는 해당 입력 근처에 보여주세요. 이미지 업로드 대기와 저장 대기를 구분하면 사용자가 버튼을 반복 누를 이유가 줄어듭니다.
단계별 실습
실습은 운영 서비스가 아닌 별도 연습 프로젝트에서 진행하세요. 기존 파일이 있다면 변경 전 기록을 남깁니다.
- 화면 목적과 사용자 흐름을 한 장에 그리세요.
- 타입 크기·보라색 포인트·중립 배경·여백·모서리의 공통 규칙을 정하세요.
- 입력·버튼·카드의 기본·초점·비활성·오류 상태를 설계하세요.
- 모바일·데스크톱·다크모드·키보드에서 확인하세요.
- 사용자에게 등록 과제를 주고 막힌 지점을 수정하세요.
코드와 프롬프트
아래 요청에서 대괄호 부분을 내 프로젝트에 맞게 바꾼 뒤 AI 도구에 전달하세요.
[화면]의 목적은 [목적], 주 행동은 [행동]이야. 정보 구조와 와이어프레임부터 제안해줘. 글자·색·여백·정렬·공통 컴포넌트를 정의하고 모바일, 다크모드, 키보드, 로딩·오류·빈 상태를 포함한 디자인 시스템을 만들어줘.자주 발생하는 문제와 해결
| 문제와 원인 | 해결 방법과 확인 기준 |
|---|---|
| 예쁘게 해줘만 요청함 | 정보 우선순위와 주요 행동, 상태별 동작을 명시합니다. |
| 제목을 매 화면 다르게 만듦 | 페이지 제목과 카드 제목의 공통 스타일을 만들고 재사용합니다. |
핵심 요약
- 디자인 요청에는 행동과 상태를 적습니다.
- 장식보다 읽기·조작·실패 복구를 먼저 확인합니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 요금·사용 한도·제품 기능·설정 경로는 변경될 수 있으므로 작업 직전 공식 문서와 설치 버전을 확인하세요.