소프트웨어 설계 4강. 화면 설계와 UI

스리마일섬 원자력발전소의 계기판에는 경고등이 백 개 넘게 켜져 있었습니다. 운전원은 어느 것이 진짜인지 알 수 없었죠. 화면 설계는 취향의 문제가 아닙니다.

풀고 시작

경고등 백 개가 켜지면 아무것도 켜지지 않은 것과 같습니다

1979년 3월, 스리마일섬 원자력발전소에서 냉각수 밸브 하나가 열린 채 닫히지 않았습니다. 정작 사고를 키운 것은 밸브가 아니라 제어실이었습니다. 계기판에는 밸브에 닫으라는 신호를 보냈다는 표시만 있었지, 밸브가 실제로 닫혔는지를 보여 주는 표시가 없었거든요. 게다가 경보가 백여 개 동시에 울려 운전원들은 무엇이 원인이고 무엇이 결과인지 구분하지 못했습니다. 이 사고 이후 인터페이스 설계는 공학의 정식 주제가 됩니다.

여기서 나오는 개념이 행위 지원성(affordance)과 피드백입니다. 손잡이가 달린 문은 당기게 생겼고 평평한 판이 붙은 문은 밀게 생겼습니다. 생김새가 사용법을 말해 주는 것이 행위 지원성이죠. 그리고 사용자가 무언가를 했으면 시스템은 결과를 알려 줘야 합니다. 스리마일섬에서 없었던 것이 바로 이 피드백입니다.

UI의 네 가지 원칙과 다섯 가지 유형

정보처리기사가 묻는 UI 설계 원칙은 넷입니다. 직관성은 누구나 쉽게 이해하고 사용할 수 있어야 한다는 것, 유효성은 정확하고 완벽하게 목적을 이루게 해야 한다는 것, 학습성은 초보자도 쉽게 배우고 익힐 수 있어야 한다는 것, 유연성은 사용자의 요구를 최대한 수용하고 실수를 방지해야 한다는 것입니다. 네 낱말을 각각 한 문장으로 짝지어 두면 보기를 섞어 놓아도 골라낼 수 있습니다.

유형은 입력 방식으로 나뉩니다.

그리기 전에 그리는 것들

화면을 만들기 전에 만드는 산출물이 넷 있고, 이 넷의 구분이 시험에 그대로 나옵니다.

와이어프레임(wireframe)은 선과 상자로만 그린 화면 뼈대입니다. 어디에 무엇이 놓이는지 배치만 봅니다. 목업(mockup)은 와이어프레임에 색과 이미지를 입힌 정적 화면으로, 실제처럼 생겼지만 눌러도 아무 일이 없습니다. 프로토타입(prototype)은 상호작용이 되는 시제품이라 눌러 보면 다음 화면으로 넘어갑니다. 스토리보드(storyboard)는 와이어프레임에 설명과 기능 정의, 화면 간 이동 흐름까지 적은 것으로, 개발자와 디자이너가 함께 보는 최종 산출물입니다.

정적인가 동적인가로 구분하시면 간단합니다. 목업까지는 정지 화면이고, 프로토타입부터 움직입니다.

접근성은 배려가 아니라 요건입니다

웹 접근성은 장애 여부나 사용 환경과 무관하게 누구나 정보에 닿을 수 있어야 한다는 요건입니다. 한국에서는 국가표준으로 한국형 웹 콘텐츠 접근성 지침이 있고, 국제적으로는 WCAG가 기준입니다. 원칙은 넷으로 정리됩니다. 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성입니다.

대체 텍스트가 대표적입니다. 이미지에 설명을 달아 두면 화면 낭독기를 쓰는 사용자도 내용을 알 수 있고, 덤으로 검색 엔진도 그 이미지를 이해합니다. 접근성을 지키면 접근성만 좋아지는 게 아니라는 뜻이죠.

사용성(usability)과 혼동하지 마세요. 사용성은 얼마나 편하고 효율적으로 쓸 수 있느냐이고, 접근성은 애초에 쓸 수 있느냐입니다. 접근성이 문턱이라면 사용성은 문턱을 넘은 다음의 이야기입니다.

다음 강에서는 화면 뒤편으로 들어가, 시스템의 뼈대를 어떻게 짜는지 아키텍처와 디자인 패턴을 봅니다.

인출 문제

생각해볼 질문 (정답 없음)

익숙해지면 편한 인터페이스와 처음부터 쉬운 인터페이스 중 하나만 고를 수 있다면, 어떤 서비스에서 어느 쪽을 택하시겠습니까. 그 선택은 누구를 배제하게 될까요.

이전: 3강 UML과 객체지향 설계 · 다음: 5강 아키텍처와 디자인 패턴