UI와 UX (User Interface, User Experience)

좋은 UI의 원칙

좋은 UI는 몇 가지 검증된 원칙 위에 선다. 일관성(Consistency)은 같은 동작이 어디서나 같은 모습과 방식으로 제공되어 학습 부담을 줄이는 것으로, 실무에서는 색, 타이포그래피, 컴포넌트 규격을 정의한 디자인 시스템(Design System)으로 구현된다. 어포던스(Affordance)는 버튼은 눌러 보이고 입력창은 입력해 보이게 만들어, 설명 없이도 조작 방법이 드러나게 하는 성질이다. 피드백(Feedback)은 사용자의 행동에 시스템이 즉각 반응을 보여 주는 것으로, 버튼의 눌림 상태, 로딩 표시, 저장 완료 안내가 그 예다. 위계(Hierarchy)는 크기, 색, 여백으로 중요한 것부터 눈에 들어오게 배치하는 원리다. 마지막으로 접근성(Accessibility)은 저시력, 색각 이상, 키보드만 쓰는 사용자를 포함한 모두가 쓸 수 있게 만드는 요건으로, 웹에서는 충분한 명도 대비, 대체 텍스트, 키보드 탐색, 시맨틱(Semantic) 마크업을 요구하는 WCAG(Web Content Accessibility Guidelines) 표준을 따른다. 접근성은 부가 기능이 아니라 품질과 법적 요건의 영역으로 자리 잡았다.

UX 설계와 검증 과정

UX 작업은 추측이 아니라 조사에서 출발한다. 인터뷰와 데이터 분석으로 사용자의 목표와 불편을 파악하고, 대표 사용자상인 페르소나(Persona)와 사용 과정을 단계별로 펼친 사용자 여정 지도(User Journey Map)로 문제를 구조화한다. 이어 화면의 뼈대인 와이어프레임(Wireframe)과 동작하는 시제품인 프로토타입을 만들어, 실제 사용자에게 과업을 시켜 보는 사용성 테스트로 가설을 검증한다. 출시 후에는 지표로 경험을 측정한다. 과업 성공률, 이탈률, 전환율(Conversion Rate), 재방문율 같은 행동 지표와 함께, 두 가지 안을 무작위로 나눠 보여 주고 성과를 비교하는 A/B 테스트가 대표적인 정량 검증 수단이다. 개발자에게도 이 과정은 남의 일이 아니다. 응답 지연, 레이아웃 흔들림, 불명확한 오류 메시지는 모두 코드에서 비롯되는 UX 문제이며, 프런트엔드 성능 지표인 코어 웹 바이탈(Core Web Vitals)이 곧 경험 지표로 쓰이는 이유이기도 하다.

면접에서 이렇게 물어본다

• UI와 UX의 차이를 포함 관계가 드러나게 예를 들어 설명해 보라.
• UI는 좋은데 UX가 나쁜 서비스의 사례를 들고 원인을 분석해 보라.
• 디자인 시스템이 개발과 디자인 양쪽에 주는 이점은 무엇인가.
• 웹 접근성을 코드 수준에서 개선하는 방법을 말해 보라.
• 개발자로서 UX 개선에 기여한 경험이나 기여할 수 있는 방법을 이야기해 보라.