화면 설계, UI 원칙과 설계 도구 정리
정보처리기사 실기 6장 화면 설계는 사용자가 시스템과 직접 마주하는 접점인 사용자 인터페이스(UI)를 어떻게 설계하고 시각화할 것인지를 다루는 영역이다. 아무리 기능이 뛰어난 시스템이라도 사용자가 쉽게 이해하고 편하게 사용할 수 없다면 결국 외면받기 마련이며, 이러한 이유에서 UI 설계는 시스템 성공의 결정적인 변수로 평가받는다. 시험에서는 UI와 UX의 차이, UI 설계 4대 원칙, 그리고 와이어프레임부터 프로토타입에 이르는 다섯 가지 설계 도구의 명칭과 특징이 매회 출제된다. 본 글은 한 글에 1~2개 핵심 원칙에 따라 이 세 영역을 시험 답안에 직접 활용 가능한 형태로 정리한다.
UI와 UX의 차이와 UI 설계 4대 원칙
UI(User Interface)와 UX(User Experience)는 함께 언급되지만 결코 같은 개념이 아니다. UI는 사용자가 시스템과 상호작용하기 위해 마주하는 시각적·물리적 매개체를 의미한다. 버튼, 메뉴, 입력창, 아이콘, 화면 레이아웃처럼 사용자가 직접 보고 만지는 모든 요소가 UI에 속한다. 반면 UX는 사용자가 그 시스템을 사용하면서 느끼는 모든 경험과 감정의 총체를 의미한다. 화면이 빠르게 로딩되는지, 흐름이 자연스러운지, 사용자가 만족과 신뢰를 느끼는지 같은 종합적 가치가 UX의 영역이다. 한마디로 UI는 보이는 디자인이고 UX는 느끼는 경험이라고 정리할 수 있으며, 두 개념은 분리되지 않고 서로 보완하는 관계로 작동한다.
좋은 UI는 단순히 예쁜 화면이 아니라 정해진 원칙을 충실히 따르는 화면이다. 정보처리기사 시험에서 매회 출제되는 UI 설계의 4대 원칙은 직관성, 유효성, 학습성, 유연성이다. 첫째, 직관성(Intuitiveness)은 누구나 쉽게 이해하고 사용할 수 있도록 만드는 원칙이다. 처음 접한 사용자도 화면만 보고 다음 행동을 자연스럽게 떠올릴 수 있어야 하며, 일관된 아이콘과 보편적인 위치 배치가 직관성을 높이는 가장 기본적인 수단이다. 둘째, 유효성(Efficiency)은 사용자의 목적을 정확하고 완벽하게 달성할 수 있도록 만드는 원칙이다. 핵심 기능에 도달하는 경로가 짧고 명확해야 하며, 불필요한 단계나 클릭을 최소화해야 한다.
셋째, 학습성(Learnability)은 사용자가 시스템을 처음 접했을 때 쉽게 배우고 익힐 수 있도록 만드는 원칙이다. 첫 사용 경험에서 사용자가 어떻게 동작하는지를 빠르게 파악할 수 있도록, 친절한 안내와 일관된 패턴, 그리고 적절한 피드백을 제공해야 한다. 넷째, 유연성(Flexibility)은 사용자의 다양한 요구사항을 최대한 수용하고 실수를 최소화하는 원칙이다. 같은 작업을 여러 방식으로 수행할 수 있도록 단축키와 마우스 동작을 함께 지원하거나, 사용자가 실수했을 때 되돌릴 수 있는 취소 기능을 제공하는 일이 모두 유연성에 속한다. 이 네 가지 원칙은 영문 첫 글자가 IELE 또는 한글 직유학유로 외워두면 시험 답안에서 빠르게 활용할 수 있다.
UI 설계 도구 — 와이어프레임부터 프로토타입까지
UI 설계 단계에서는 화면의 형태와 흐름을 시각화하기 위해 다양한 도구가 사용된다. 정보처리기사 실기에서 자주 출제되는 다섯 가지 UI 설계 도구는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스이다. 각 도구는 추상화 수준과 목적이 다르기 때문에, 프로젝트 단계와 의사소통 대상에 따라 적절한 도구를 선택해야 한다. 다섯 도구의 명칭과 특징을 정확히 구분해 외워두는 것이 시험 답안의 핵심이다.
와이어프레임(Wireframe)은 화면의 골격을 단순한 선과 박스로 표현한 가장 기본적인 설계 도구이다. 색상이나 이미지 같은 디자인 요소를 배제하고 레이아웃과 정보 구조에만 집중하기 때문에, 빠른 시간 안에 여러 화면을 스케치하고 비교 검토하기에 적합하다. PowerPoint, Balsamiq, Sketch 같은 도구가 널리 사용된다. 목업(Mockup)은 와이어프레임에 색상, 타이포그래피, 이미지 같은 시각 디자인을 입힌 정적 모형이다. 실제 화면이 어떻게 보일지를 매우 사실적으로 표현하지만 동작은 하지 않는다는 점에서 와이어프레임과 프로토타입의 중간 단계라고 할 수 있다. Figma, Adobe XD, Photoshop이 대표적인 도구이다.
스토리보드(Storyboard)는 디자인뿐만 아니라 화면 동작 방식, 정책, 프로세스, 데이터 흐름까지 종합적으로 기술한 가장 상세한 산출물이다. 디자이너·개발자·기획자가 모두 참고하는 작업 지침서 역할을 수행하며, 일반적으로 화면 단위로 정리해 좌측에는 화면 이미지를, 우측에는 설명을 배치하는 형태로 작성된다. 스토리보드가 잘 만들어진 프로젝트는 개발자가 별도의 추측 없이 코드만 작성하면 되도록 만들어져 있다. 프로토타입(Prototype)은 사용자 인터랙션이 가능한 동적 모형이다. 실제 클릭과 입력에 반응하며 화면 사이의 전환도 수행하기 때문에, 사용자 테스트를 통해 설계의 타당성을 검증하기에 가장 효과적인 도구이다. 빠른 폐기를 전제로 만드는 페이퍼 프로토타입과 실제 코드로 동작하는 디지털 프로토타입으로 구분된다. 마지막으로 유스케이스(Use Case)는 사용자 관점에서 시스템이 제공해야 할 기능을 시나리오 형태로 기술한 도구로, 화면 설계뿐 아니라 요구사항 분석 단계에서도 폭넓게 활용된다.
UI 시나리오 문서와 화면 설계 절차
UI 설계의 결과물을 표준화된 형식으로 문서화한 것이 UI 시나리오 문서이다. 이 문서는 단순한 화면 모음이 아니라, 사용자가 어떤 흐름으로 시스템을 이용하고 각 화면에서 어떤 동작이 발생하는지를 시간 순서에 따라 정리한 종합 명세서이다. 설계자뿐 아니라 개발자, 테스터, 운영자가 모두 같은 이해를 공유할 수 있도록 작성하는 것이 핵심이며, 시험에서 자주 출제되는 작성 원칙은 여섯 가지로 정리된다.
UI 시나리오 문서가 갖추어야 할 첫 번째 원칙은 완전성(Completeness)으로, 사용자가 시스템에서 수행할 모든 행동과 그에 따른 시스템의 반응이 빠짐없이 기술되어야 한다는 원칙이다. 두 번째는 일관성(Consistency)으로, 동일한 행동에 대해서는 동일한 반응이 일어나야 하며 표기 방식과 용어도 문서 전체에서 통일되어야 한다. 세 번째는 이해성(Understandability)으로, 누가 읽어도 모호함 없이 같은 의미로 해석될 수 있도록 명확한 언어로 작성해야 한다. 네 번째는 가독성(Readability)으로, 도표·번호·색상 같은 시각적 요소를 활용해 한눈에 파악할 수 있는 구조로 정리해야 한다. 다섯 번째는 수정 용이성(Modifiability)으로, 요구사항이 변경되었을 때 부분 수정만으로 반영될 수 있도록 모듈화되어 있어야 한다. 여섯 번째는 추적 용이성(Traceability)으로, 시나리오의 각 항목이 어떤 요구사항에서 비롯되었고 어떤 화면 또는 코드와 연결되는지를 추적할 수 있어야 한다.
화면 설계의 일반적인 절차는 일반적으로 다섯 단계로 진행된다. 첫째 단계는 UI 요구사항 확인으로, 사용자의 명시적·암묵적 요구사항을 도출하고 우선순위를 부여한다. 둘째 단계는 UI 표준 및 지침 정의로, 색상·폰트·아이콘·레이아웃 같은 시각 표준과 명명 규칙·접근성 가이드 같은 지침을 정한다. 시스템 전체에 일관성을 부여하기 위한 가장 중요한 단계이다. 셋째 단계는 UI 프로토타입 제작 및 검토로, 와이어프레임과 목업, 스토리보드를 만들어 이해관계자와 검토하며, 필요한 경우 프로토타입을 만들어 실제 사용성을 점검한다.
넷째 단계는 UI 설계서 작성으로, 검토를 거쳐 확정된 설계를 표준화된 양식으로 문서화한다. 이 단계의 산출물이 바로 앞서 다룬 UI 시나리오 문서이며, 표지·개정 이력·요구사항 정의·시스템 구조·시나리오·결재 같은 항목으로 구성된다. 마지막 다섯째 단계는 UI 디자인을 위한 산출물 제작으로, 실제 시각 디자인과 자산을 만들어 개발팀에 전달한다. 이 다섯 단계가 한 번에 끝나는 것이 아니라, 사용자 테스트와 피드백에 따라 반복적으로 다듬어진다는 점이 중요하다. 좋은 화면 설계란 한 번에 완성되는 결과물이 아니라, 사용자의 실제 행동을 관찰하면서 끊임없이 개선해 나가는 과정이라는 사실을 기억해야 한다.
메타 디스크립션: 정보처리기사 실기 6장 화면 설계의 핵심인 UI/UX 차이, UI 설계 4대 원칙(직관성·유효성·학습성·유연성), 설계 도구 5종(와이어프레임·목업·스토리보드·프로토타입·유스케이스), UI 시나리오 문서와 화면 설계 절차를 시험 답안 기준에 맞춰 정리합니다.