화면 설계

백엔드가 아무리 빨라도 사용자가 못 쓰면 소용없다 — 시스템에 사용자 옷을 입히는 단계. 1과목에서 안정적으로 점수를 챙기는 단원으로, 핵심은 두 묶음 — UI 설계 4원칙과 UI 산출물 4종.

핵심 암기 5종: UI 4원칙 직유학유 · 산출물 4종 와목프스 · UI는 점/UX는 선 · 목업↔프로토타입 목정프동 · 표준↔지침 표강지권

---

UI/UX 기초

UI란 ·정의·

[정의] UI(User Interface, 사용자 인터페이스) = 사람과 시스템(SW·기기) 사이에서 정보를 주고받는 모든 접점. 화면 속 버튼·메뉴·입력창부터 음성 명령·손짓까지, 사람과 시스템이 만나는 모든 경계.

[분류] 물리적 UI(키보드·마우스·터치스크린) + 소프트웨어 UI(화면 안 버튼·메뉴·아이콘)

💡 보충 UI는 '예쁜 화면'이 아니라 사용자와 시스템 사이의 약속된 언어 — 둥근 버튼은 '누를 수 있다', 빨간색은 '위험'. ⚠️ 함정 'UI는 화면 안 그래픽 요소만 의미한다'는 보기는 물리적 UI를 뺀 함정 → 오답. '물리적 UI도 UI 범주'가 정답.

UX란 ·정의·

[정의] UX(User Experience, 사용자 경험) = 사용자가 시스템·서비스를 이용하는 전체 과정에서 느끼는 총체적 경험. 검색·탐색·구매·결제·배송 추적·사후 만족까지 모든 여정.

🔑 암기 UI가 '한 장면'이면 UX는 '영화 한 편'. 레스토랑이면 UI=메뉴판·식기, UX=예약부터 식사 후 후기까지. 💡 보충 UX는 측정이 어려워 작업 완료율·소요 시간·에러율·만족도(NPS) 같은 사용성 지표로 쪼개 평가한다. ⚠️ 함정 'UX는 시각 디자인이다'는 보기는 오답 — 시각은 UI 영역, UX는 시각·청각·맥락·감정까지 포함하는 더 큰 우산.

UI vs UX ·비교·

[비교]

🔑 암기 UI는 점, UX는 선 — UI가 모여 UX가 된다. '이 화면 예쁘다'=UI 칭찬, '이 서비스 쓰기 편하다'=UX 칭찬. 🎯 빈출 단어 한 끗(접점이냐 경험이냐)으로 정답이 갈리는 비교 단골.

UI 유형 4종 ·유형·

[분류] 시대 발전에 따른 UI 4유형 (CLI → GUI → NUI → OUI)

🔑 암기 진화 방향 = '사용자가 기계 언어를 배우는 시대(CLI) → 기계가 사용자 언어를 이해하는 시대(NUI/OUI)'. ⚠️ 함정 VUI(Voice UI)는 NUI의 하위 분류. 'OUI가 음성·터치를 포함한다'는 보기는 함정 — OUI는 사물 자체(휘는 화면·반지·시계)에 초점. 🎯 빈출 설명→유형 매칭. '터치·제스처·음성'=NUI, '플렉시블 디스플레이·웨어러블'=OUI.

---

UI 설계 원칙과 지침

UI 설계 4원칙 ·이 강의 핵심·

[분류] 시험 단골 1순위.

🔑 암기 직유학유 (직관성·유효성·학습성·유연성) — "직접 유학 다녀온 유연한 사람" ⚠️ 함정 구분 키 두 개 — ① 직관성(보자마자) ↔ 학습성(시간 들여 익힘): 시간 개념이 들어가면 학습성. ② 직관성(입구·이해) ↔ 유효성(출구·완료): 이해 다음 끝까지 가는가가 유효성. 🎯 빈출 '4원칙이 아닌 것' 소거형 최빈출. 학습성 자리에 효율성·신뢰성·이식성 같은 ISO 품질 특성이 끼면 그게 정답(아닌 것). 직유학유 외엔 다 거짓.

UI 설계 9지침 ·설계 지침·

[분류] 4원칙(방향성)을 실무에 적용하는 9가지 지침.

🔑 암기 9가지를 다 외우지 말 것 — '사용자 중심' 한 방향만. 보기가 '사용자를 위한 것'인지 '시스템 내부 편의'인지만 구분. 🎯 빈출 '개발자 편의 우선'·'내부 로직 우선'처럼 사용자 중심의 정반대 표현이 끼면 즉시 오답(아닌 것).

UI 표준 vs 지침 ·표준/지침·

[비교]

🔑 암기 표강지권 (표준=강제 / 지침=권고) ⚠️ 함정 'UI 지침은 시스템 전체에 강제 적용된다'는 보기는 강제성을 뒤바꾼 함정 → 오답. 지침은 권고, 표준이 강제. 🎯 빈출 두 단어가 함께 나오면 강제 vs 권고로 즉시 구분.

---

UI 설계 산출물

산출물 4종 흐름 ·산출물·

[흐름] 화면 설계는 한 번에 완성되지 않고 정밀도를 높여가는 4단계를 거친다.

🔑 암기 와목프스 — 이 두문자 자체가 곧 정밀도 오름차순. 집 짓기면 평면 스케치→조감도→샘플하우스→도면집. 🎯 빈출 '정밀도 순서로 나열한 것' 패턴. 순서가 뒤바뀐 보기는 즉시 오답.

와이어프레임 ·산출물①·

[정의] 화면의 윤곽과 정보 구조를 단순한 선과 박스로 표현한 저정밀 산출물. 색·이미지·폰트 등 시각 요소는 거의 없고 '어디에 무엇을 둘지'만 표시. 인터랙션 없음. 도구는 발사믹·손그림 등.

🔑 암기 '선과 박스', '저정밀', '초기 기획' 3대 키워드 = 와이어프레임 확정. 건물 평면도(방 위치만, 벽지·가구 없음). ⚠️ 함정 '와이어프레임은 색·이미지를 포함한다'는 보기는 오답 — 선·박스만. (고정밀 와이어프레임은 사실상 목업 단계로 간주)

목업 vs 프로토타입 ·산출물②③·

[비교] 정밀도 인접 두 단계 — 인터랙션 유무가 결정적 차이.

🔑 암기 목정프동 (목업=정적 / 프로토타입=동적). 도구는 둘 다 피그마·스케치·어도비 XD 계열. ⚠️ 함정 '목업은 인터랙션이 가능하다'가 시험 함정 최다 단골 → 오답. 목업은 무조건 정적, 프로토타입이 동적. 🎯 빈출 이 한 줄 차이만 잡으면 산출물 문제 대부분 방어.

스토리보드 ·산출물④·

[정의] 정책·화면·기능 명세를 통합한 최종 산출물. 디자이너·개발자·기획자가 모두 참고하는 최종 청사진이며, 4종 중 가장 정밀하고 분량이 많다.

[구성] 화면 디자인 + 사용자 시나리오 + 기능 명세(버튼·필드 동작) + 정책(예외·에러·권한)

🔑 암기 본질은 '통합 명세' 한 단어. 영화 스토리보드는 그림 중심이지만 UI 스토리보드는 그림+정책+기능+시나리오를 합친 책 한 권. ⚠️ 함정 스토리보드를 '단순 만화'·'그림만'·'색·폰트만 정의한 스타일 가이드'로 좁히는 보기는 모두 오답. 💡 보충 SI 프로젝트에서는 외주사가 '이대로 만들겠다'를 약속하는 계약서·검수 기준이 된다.

---

부가 — 사용자 분석·도구·품질 평가

사용자 분석·도구·품질 평가 ·부가·

[분류] 화면 설계 주변에서 보기로 종종 등장 — 정의 한 줄씩만.

🌟 가볍게 출제 빈도 낮음. 페르소나·여정 지도·IA는 화면 그리기 전 사용자 분석 도구이지 산출물이 아니라는 점만. ⚠️ 함정 설계 도구 자리에 '한글·MS Word' 같은 문서 도구가 끼면 오답 — UI 설계 도구는 시각·인터랙션 표현이 본업.

---

기출 다지기

[기출 1 출제] 다음 설명에 해당하는 UI 설계 4원칙은? (정의 매칭)

사용자가 별도의 학습이나 설명 없이도 인터페이스를 보고 즉시 사용 방법을 파악할 수 있어야 한다는 원칙.

• ① 유효성
• ② 직관성
• ③ 학습성
• ④ 유연성

정답 및 해설 보기

정답 ②

선지	판정	근거
① 유효성	오답	목적한 작업을 정확히 완료(출구)
② 직관성	정답	별도 학습 없이 보자마자 파악
③ 학습성	오답	빠르게 익힘(시간 개념 포함)
④ 유연성	오답	다양한 요구·실수 수용

🔑 '별도 학습 없이 보자마자' = 직관성. '빠르게 익힌다'면 학습성 — 입구(직관성)와 시간(학습성)을 구분.

[기출 2 출제] 다음 설명에 해당하는 UI 설계 산출물은? (정의 매칭)

화면의 윤곽과 정보 구조를 단순한 선과 박스만으로 표현한 저정밀 산출물로, 색상·이미지는 거의 포함하지 않고 초기 기획 단계에서 배치를 합의하기 위해 사용한다.

• ① 와이어프레임
• ② 목업
• ③ 프로토타입
• ④ 스토리보드

정답 및 해설 보기

정답 ①

선지	판정	근거
① 와이어프레임	정답	선·박스, 저정밀, 색·이미지 없음
② 목업	오답	시각 완성된 정적 산출물
③ 프로토타입	오답	인터랙션 가능한 시제품
④ 스토리보드	오답	정책·화면·기능 통합 명세

🔑 '선과 박스'·'저정밀'·'초기 기획'이면 와이어프레임 확정. 다른 산출물엔 '선과 박스만'이라는 표현을 안 쓴다.

[기출 3 출제] 다음 중 UI 설계 4원칙에 해당하지 않는 것은? (소거형)

• ① 직관성
• ② 유효성
• ③ 효율성
• ④ 유연성

정답 및 해설 보기

정답 ③

선지	판정	근거
①·②·④	4원칙	직유학유 중 하나
③ 효율성	해당 없음	ISO 9126/25010 품질 특성이지 UI 원칙 아님

🔑 직유학유. 보기에서 학습성이 빠지고 효율성·신뢰성·이식성 같은 ISO 품질 특성이 끼면 그게 정답(아닌 것).

[기출 4 출제] UI 설계 산출물과 설명이 잘못 짝지어진 것은? (짝짓기 오류형)

• ① 와이어프레임 — 선과 박스로 화면 윤곽을 표현한 저정밀 산출물
• ② 목업 — 시각적으로 완성된 정적인 산출물(색·이미지 포함)
• ③ 프로토타입 — 인터랙션 가능한 시제품으로 사용성 테스트에 활용
• ④ 스토리보드 — 색상과 폰트만을 정의한 시각 디자인 가이드

정답 및 해설 보기

정답 ④

선지	판정	근거
①·②·③	올바른 짝	각 산출물 정의와 일치
④ 스토리보드	잘못된 짝	'색·폰트만'이 아니라 정책·화면·기능을 통합한 최종 명세

🔑 스토리보드 본질 = '통합 명세'. '단순 시각 가이드'·'스타일 가이드'로 좁히면 함정.

[기출 5 출제] 다음 설명에 해당하는 UI 유형은? (정의 매칭)

사용자가 별도의 학습 없이 일상에서 익숙한 자연스러운 신체 동작(터치·제스처·음성)으로 시스템과 상호작용하는 인터페이스. 스마트폰의 핀치 줌, 음성 비서 등이 대표 사례이다.

• ① CLI
• ② GUI
• ③ NUI
• ④ OUI

정답 및 해설 보기

정답 ③

선지	판정	근거
① CLI	오답	명령어 기반(터미널)
② GUI	오답	그래픽 기반(마우스·아이콘)
③ NUI	정답	자연스러운 신체 동작(터치·제스처·음성)
④ OUI	오답	사물 자체가 인터페이스(휘는 화면·웨어러블)

🔑 '자연스러운 신체 동작'·'터치/제스처/음성'이면 NUI. VUI는 NUI의 하위 개념.

[기출 6 출제] 스토리보드(Storyboard)에 대한 설명으로 옳은 것은? (설명 판단형)

• ① 인터랙션이 가능한 시제품으로 사용자가 클릭하여 흐름을 검증할 수 있다
• ② 화면 윤곽만 표현한 저정밀 산출물로 색상·이미지는 포함하지 않는다
• ③ 정책·화면·기능 명세를 통합해 디자이너·개발자·기획자가 모두 참고하는 최종 청사진이다
• ④ 시각적으로 완성된 정적인 산출물로 클릭하거나 전환할 수 없다

정답 및 해설 보기

정답 ③

선지	판정	근거
①	프로토타입 정의	인터랙션 시제품
②	와이어프레임 정의	저정밀·색 없음
③	정답	스토리보드 = 정책·화면·기능 통합 청사진
④	목업 정의	정적·시각 완성

🔑 4종 정의가 보기 4개에 흩어진 패턴 — 키워드 한 단어로 매칭. 선·박스=와이어프레임, 정적=목업, 인터랙션=프로토타입, 통합=스토리보드.

[기출 7 출제] 바람직한 UI 설계 지침으로 가장 거리가 먼 것은? (거리형)

• ① 사용자 중심으로 설계하여 누구나 쉽게 이해·사용하게 한다
• ② 비슷한 기능은 비슷한 방식으로 동작하도록 일관성을 유지한다
• ③ 오류 발생 시 상황과 해결 방법을 명확히 안내한다
• ④ 개발자의 편의를 최우선으로 하여 내부 로직에 맞게 화면을 구성한다

정답 및 해설 보기

정답 ④

선지	판정	근거
①·②·③	UI 설계 지침	사용자 중심·일관성·오류 해결
④ 개발자 편의 우선	거리가 멂	UI의 근본 철학은 사용자 중심 — 정반대 방향

🔑 '개발자 편의'·'내부 로직 우선'·'관리자 권한'처럼 사용자가 아닌 주체가 들어가면 즉시 오답. '사용자 중심' 한 방향만 잡으면 끝.

---

한 장 요약

🎯 합격 한 끗: 직유학유(4원칙=방향)와 와목프스(4산출물=단계) 두 묶음, 그리고 시험 단골 비교 4쌍(UI/UX·표준/지침·목업/프로토타입·와이어프레임/스토리보드)을 한 단어 차이로 잡으면 4강은 거의 다 잡힌다.