정보처리기사 실기 — 02 화면설계 정리

정보처리기사 실기 — 02 화면설계 정리

NCS·교재에서 통상 「Ⅱ. 화면설계」 또는 2장 화면설계로 묶이는 범위입니다. 실기에서는 UI/UX 용어, 산출물 구분(와이어프레임·목업·프로토타입·스토리보드), 설계 원칙, 메뉴·입출력 화면, 접근성 등이 단답·필답으로 자주 나옵니다.

---

1. 이 단원이 다루는 것

소단원(일반적 구성)	핵심 키워드
UI·UX 개요	사용자 인터페이스, 사용자 경험, 인터페이스 유형(CUI·GUI·NUI 등)
화면 설계 절차·산출물	요구 반영, 와이어프레임, 목업, 프로토타입, 스토리보드
설계 원칙·가이드	직관성, 일관성, 피드백, 유연성, 단순성, 오류 방지 등
메뉴·입출력	메뉴 구조, 입력 검증, 출력·레이아웃, 내비게이션
품질·표준	사용성, 웹 표준, 웹 접근성(KWCAG 등)

---

2. UI와 UX

용어	뜻(시험용 한 줄)
UI (User Interface)	사용자가 시스템과 상호작용하는 화면·조작 수단(버튼, 메뉴, 폼 등)의 설계
UX (User Experience)	사용 과정 전반에서 느끼는 만족도·효율·감정 등 경험의 질

관계: UI는 UX를 구현하는 한 요소이며, 좋은 UX를 위해서는 정보 구조, 업무 흐름, 성능, 접근성 등이 함께 고려됩니다.

---

3. 사용자 인터페이스 유형(암기)

유형	설명(요지)
CUI / CLI	명령줄 기반(텍스트 명령 입력). 자원 소모 적으나 학습 비용 큼
GUI	그래픽·아이콘·창 등 시각 요소와 마우스 등으로 조작
NUI	자연스러운 동작(음성, 제스처, 터치 등)으로 제어 — Natural User Interface
VUI	음성 중심 인터페이스(Voice UI)
OUI	여러 사물·디바이스가 연결된 환경의 UI(Object·사물 인터넷 맥락에서 교재에 따라 정의)

시험에서는 GUI vs NUI 구분, CUI 특징 정도가 단답으로 자주 나옵니다.

---

4. 화면 설계 절차(개략)

1. 요구사항·유스케이스·업무 흐름 파악
2. 정보 구조·화면 흐름(내비게이션, 화면 간 이동) 정의
3. 레이아웃·컴포넌트 배치(와이어프레임 → 상세화)
4. 입력 규칙·검증·메시지(오류·안내) 정의
5. 가이드·접근성 반영 후 검토(워크숍, 사용성 점검 등)

---

5. UI 설계 산출물 — 자주 섞어 내는 구분

산출물	특징	역할
와이어프레임 (Wireframe)	저충실도 선·박스 위주, 색·이미지 최소	영역·배치·흐름을 빠르게 합의
목업 (Mock-up)	고충실도 정적 화면, 시각 스타일 반영	최종 느낌·브랜드 확인
프로토타입 (Prototype)	동작 시뮬레이션(클릭·전환 등)	사용 흐름·피드백 수집
스토리보드 (Storyboard)	화면별로 정책·업무·입출력·DB 연동·예외 등 설명과 함께 기술한 문서	개발·테스트의 상세 기준이 되는 핵심 UI 설계서에 해당하는 경우가 많음

단답 팁: “정책·프로세스·와이어프레임·기능·DB 연동 등 대부분의 정보가 한 화면 단위로 들어 있는 문서” → 스토리보드로 묻는 출제가 있습니다. (정보처리기사_실기_단답형_100제_문제-정답-해설.md 047번 맥락)

---

6. 화면 설계 원칙(교재별 표현은 다를 수 있음)

다음 키워드는 정의 + 예 형태로 한 문장씩 쓸 수 있게 정리해 두면 좋습니다.

• 직관성: 처음 봐도 무엇을 해야 할지 알 수 있게 배치·용어 사용
• 유연성: 초보·숙련 사용자 모두 효율적으로 쓸 수 있는 단축·옵션
• 일관성: 같은 동작은 같은 위치·같은 용어·같은 피드백
• 피드백: 입력·처리 결과를 즉시·명확히 알림(로딩, 성공/실패 메시지)
• 단순성: 불필요한 요소 제거, 한 화면 한 목적에 가깝게
• 가독성: 글자 크기·대비·여백으로 읽기 쉬움
• 오류 방지·복구: 입력 제한, 확인 대화상자, 실행 취소 등
• 학습 용이성: 도움말, 툴팁, 일관된 패턴으로 익히기 쉬움

국제적으로는 닐슨(Nielsen) 휴리스틱, 슈나이더만 8대 황금률 등이 별도 주제로 나올 수 있으나, 실기에서는 위 한글 원칙 이름 위주가 많습니다.

---

7. 메뉴 설계

구조: 계층형(트리) — 상위·하위 메뉴로 업무를 나눔. 깊이가 너무 깊지 않게(과다 클릭 방지).

유형(이름만이라도 구분):

유형	요지
풀다운(Pull-down)	상단 메뉴바에서 아래로 펼침
팝업(Pop-up)	특정 위치·상황에서 잠시 뜨는 메뉴
아이콘·타일	그림·타일로 진입(모바일·대시보드)

설계 시 고려: 빈도 높은 기능에 접근 경로 짧게, 메뉴명은 업무 용어와 일치, 권한별 메뉴 노출 등.

---

8. 입력·출력 화면

입력

• 필수/선택 항목 구분, 입력 형식(날짜, 숫자, 길이) 명시
• 즉시 검증(클라이언트) + 서버 검증 병행 원칙 이해
• 오류 시 어떤 항목이 왜 잘못됐는지 구체적 메시지

출력

• 목록·상세·통계 등 목적에 맞는 형식(표, 차트, 인쇄 미리보기)
• 데이터 많을 때 페이징·정렬·필터
• 민감 정보 마스킹(주민번호 일부, 카드번호 등)

---

9. 사용성·품질 특성과의 연결

ISO/IEC 25010 등에서 말하는 사용성(Usability)은 적절성 인식성, 학습성, 사용성, 오류 방지, 접근성 등으로 세분화되는 경우가 있습니다. 화면설계 단원은 비기능 요구사항 중 사용성과 자연스럽게 연결됩니다. (01 요구사항 정리와 함께 보면 좋음)

---

10. 웹 표준·웹 접근성

개념	요지
웹 표준	HTML, CSS, JavaScript 등 권고 표준에 맞춰 구조·표현·동작을 분리해 작성
웹 접근성	장애·고령자 등 다양한 사용자가 동등하게 정보에 접근·이용할 수 있게 설계

접근성 실무 포인트(단답·서술): 의미 있는 제목 구조, 대체 텍스트(alt), 키보드만으로 조작, 색만으로 정보 전달 금지, 충분한 명도 대비, 레이블·폼 연결 등.

국내에서는 한국형 웹 콘텐츠 접근성 지침(KWCAG) 이름이 문제에 나올 수 있습니다.

---

11. 반응형·UI 패턴(간단히)

• 반응형 웹: 화면 크기(모바일·태블릿·PC)에 따라 레이아웃이 유연하게 바뀌는 설계
• UI 패턴: 내비게이션 바, 브레드크럼, 모달, 탭 등 검증된 반복 패턴을 재사용해 일관성·개발 효율 확보

---

12. 시험 직전 체크리스트

• UI vs UX 한 줄씩 정의
• CUI / GUI / NUI(필요 시 VUI) 특징 구분
• 와이어프레임·목업·프로토타입·스토리보드 차이와 “정보가 가장 많이 실리는 문서” = 스토리보드
• 화면 설계 원칙 5~7가지 이름 + 예시 한 가지씩
• 계층형 메뉴, 풀다운·팝업 이름
• 입력 검증, 오류 피드백, 출력 페이징 등 키워드
• 웹 표준, 웹 접근성, KWCAG 용어 인지

---

13. 이 저장소의 관련 자료

• 정보처리기사_실기_단답형_100제_문제-정답-해설.md — UI 설계 산출물(스토리보드 등) 단답
• 정보처리기사/2022년-1회-실기-복원문제-해설.md — NUI 등 인터페이스 유형
• info/정보처리기사-실기-01-요구사항확인-정리.md — 사용성·비기능 요구와 연계

---

본 문서는 NCS·일반 교재 구성을 바탕으로 학습용으로 정리한 것이며, 시험 공고·출제 범위는 매년 한국산업인력공단 공식 안내를 확인하세요.