UI 설계 원칙과 화면 설계
쉽게 말하면
UI는 사용자가 프로그램과 만나는 화면과 조작 방법이에요. 좋은 UI는 설명서 없이도 바로 알 수 있고(직관성), 원하는 일을 정확히 끝낼 수 있고(유효성), 금방 배울 수 있고(학습성), 실수해도 되돌릴 수 있어요(유연성). 화면을 만들기 전에는 선으로 대충 그린 와이어프레임, 설명을 붙인 스토리보드, 실제처럼 눌러 보는 프로토타입 순서로 구체화해요.
시험용 정의
UI(User Interface)는 사용자와 시스템이 정보를 주고받는 접점이고, UX(User Experience)는 사용자가 제품을 쓰며 느끼는 경험 전체다. UI 설계 원칙은 직관성, 유효성, 학습성, 유연성이다. UI 유형은 명령어를 입력하는 CLI, 그래픽으로 조작하는 GUI, 말·몸짓 같은 자연스러운 동작을 쓰는 NUI, 음성의 VUI, 유기적 형태의 OUI가 있다. 화면 설계 산출물은 와이어프레임(뼈대), 스토리보드(와이어프레임 + 설명·흐름), 프로토타입(동작하는 견본), 목업(실물과 비슷한 정적 모형)이다.
비유로 이해하기
자판기를 떠올리자. 버튼이 무엇인지 바로 알고(직관성), 원하는 음료가 정확히 나오고(유효성), 한 번 쓰면 다음엔 쉽고(학습성), 잘못 넣은 돈은 반환 버튼으로 돌려받는다(유연성).
자세히
먼저 알아 둘 말
| 말 | 뜻 |
|---|---|
| UI | 사용자 인터페이스. 화면·버튼·입력 방식 |
| UX | 사용자 경험. 쓰면서 느끼는 만족·편리함 전체 |
| 와이어프레임 | 화면 배치를 선과 상자로만 그린 뼈대 |
| 스토리보드 | 와이어프레임에 기능 설명, 화면 흐름, 데이터 처리를 적은 설계 문서 |
| 프로토타입 | 실제처럼 클릭해 볼 수 있는 견본 |
| 목업 | 실제 화면과 비슷하게 만든 정적인 모형 (동작은 안 함) |
UI 유형
| 유형 | 입력 방식 | 예 |
|---|---|---|
| CLI | 명령어 텍스트 | 터미널, 명령 프롬프트 |
| GUI | 그래픽, 마우스·터치 | Windows 바탕 화면 |
| NUI | 말·몸짓·터치 같은 자연스러운 동작 | 스마트폰 핀치 확대 |
| VUI | 음성 | AI 스피커 |
| OUI | 모든 사물이 입출력 장치가 되는 유기적 인터페이스 | 휘는 디스플레이 |
사용성 평가: 두 가지 차이
- 실행 차(Gulf of Execution): 사용자가 하려는 것과 시스템이 허용하는 방법이 달라 생기는 차이. 기능을 찾기 어렵다
- 평가 차(Gulf of Evaluation): 시스템이 보여 주는 결과를 사용자가 이해하기 어려워 생기는 차이
UI 품질 요구사항(ISO/IEC 9126 기준)은 기능성, 신뢰성, 사용성, 효율성, 유지 보수성, 이식성이다.
UI 설계 도구 순서
와이어프레임 → 스토리보드 → 프로토타입. 목업은 와이어프레임보다 실제에 가깝지만 동작하지 않는다. 유스케이스는 사용자 관점의 기능 요구를 정리하는 데 쓴다.
기출에서 더 나온 것
| 말 | 뜻 |
|---|---|
| 피드백 (Feedback) | 사용자 조작에 시스템이 반응해 진행 상황을 보여 주는 것 |
| 목업 (Mockup) | 실제 화면과 거의 같게 만든 정적 모형. 동작은 하지 않는다 |
| 라디오 버튼 | 여러 선택지 중 하나만 고를 때 쓰는 요소 |
| 체크 박스 | 여러 개를 동시에 고를 수 있는 요소 |
| 토글 버튼 | 켜기·끄기 두 상태를 오가는 요소 |
| UI 개발 시스템의 기능 | 입력 검증, 오류 처리와 메시지, 도움말·프롬프트 제공 (소스 코드 분석은 아님) |
시험에 이렇게 나와요
- 누구나 쉽게 이해하고 쓰게 → 직관성 / 목적을 정확히 달성 → 유효성 / 쉽게 배움 → 학습성 / 요구 수용 → 유연성
- 명령어를 입력해 조작 → CLI, 멀티 터치·동작 인식 → NUI
- UI 설계 도구 → 와이어프레임·스토리보드·목업(실제와 비슷한 정적 화면)·프로토타입
- UI 지침 → 사용자 중심, 오류 메시지는 이해하기 쉽고 회복 방법 제시, 심미성보다 사용성 우선
- 여러 개 중 하나만 고르는 요소 → 라디오 버튼 (여러 개 고르기는 체크 박스)
확인 문제
Q1. '누구나 쉽게 이해하고 사용할 수 있어야 한다'는 UI 설계 원칙은?
- 직관성
- 유효성
- 유연성
- 학습성
정답 보기
1번 직관성
직관성: 누구나 쉽게 이해·사용. 유효성: 목적을 정확히 달성. 학습성: 쉽게 배우고 익힘. 유연성: 요구를 최대한 수용하고 실수를 최소화.
Q2. 사용자의 말이나 몸짓 같은 자연스러운 동작으로 기기를 조작하는 인터페이스는?
- CLI
- API
- NUI
- GUI
정답 보기
3번 NUI
Natural User Interface.
Q3. 화면 흐름, 기능 설명, 데이터 처리 내용까지 적은 UI 설계 산출물은?
- 스토리보드
- 와이어프레임
- 목업
- 유스케이스
정답 보기
1번 스토리보드
스토리보드는 와이어프레임에 설명을 더한 설계 문서다.
Q4. UI 설계 원칙 중 '사용자의 요구를 최대한 수용하고 실수를 최소화'하는 것은?
- 학습성
- 유효성
- 직관성
- 유연성
정답 보기
4번 유연성
유연성이다. 직관성은 쉽게 이해하고 쓰기, 유효성은 목적을 정확히 이루기, 학습성은 쉽게 배우기다.
Q5. 여러 선택지 중 하나만 고르게 할 때 쓰는 UI 요소는?
- 텍스트 박스
- 체크 박스
- 라디오 버튼
- 토글 버튼
정답 보기
3번 라디오 버튼
여러 개를 함께 고르게 할 땐 체크 박스.
Q6. 실제 화면과 거의 같게 만들었지만 동작은 하지 않는 정적 모형은?
- 스토리보드
- 프로토타입
- 와이어프레임
- 목업
정답 보기
4번 목업
와이어프레임은 뼈대만 그린 것, 프로토타입은 실제처럼 동작해 보는 모형이다.
헷갈리기 쉬운 O·X
목업은 실제로 클릭해 동작을 확인할 수 있는 견본이다.
정답 보기
X 목업은 정적 모형. 동작하는 견본은 프로토타입.
CLI는 명령어를 텍스트로 입력해 조작하는 방식이다.
정답 보기
O
UX는 화면의 버튼 배치만을 가리키는 말이다.
정답 보기
X UX는 사용 경험 전체다. 버튼 배치는 UI에 가깝다.