5.0 5부 소개: UI/UX 디자인

이 부는 소프트웨어가 그것을 쓰는 사람들을 만나는 곳에 관한 것입니다. 많은 것을 다룹니다. 사용자가 필요로 하는 것을 드러내는 리서치, 그것을 제시하는 인터페이스와 디자인 시스템, 행동을 이끄는 말, 모두가 쓸 수 있게 하는 접근성과 언어 지원, 그리고 그것을 실제 브라우저와 기기의 지저분한 현실로 전달하는 프런트엔드 엔지니어링입니다. 이 모두를 마지막에 입히는 장식으로 다루고 싶은 유혹이 있습니다. 부디 저항하십시오. 여기가 모든 상류의 작업이 사용자에게 닿거나 무너지는 곳이며, 마지막 화면이 다듬어지기 한참 전에 결정됩니다.

큰 팀에게 제품 디자인은 사실 조율의 문제입니다. 수십 개 스쿼드가 하나의 공유 제품에 출하할 때, 독립적 결정이 쌓여 난장판이 됩니다. 중복된 흐름, 모순되는 용어, 일관성 없는 컴포넌트, 아무도 소유하지 않는 언어 파이프라인입니다. 여기 모든 장의 해법은 같은 모양입니다. 일회성 결정을 공유되고 다스려지는 자산, 곧 페르소나, 디자인 시스템, 콘텐츠 전략, 국제화(i18n) 프레임워크, 컴포넌트 라이브러리, 성능 예산으로 바꿔, 따로 일하는 많은 팀이 합쳐서 하나의 일관된 경험이 되게 하는 것입니다.

기업과 정부는 이해관계를 더 높입니다. 기업 소프트웨어는 흔히 갇힌 사용자를 가지며, 그들은 떠나는 것이 아니라 교육, 오류, 지원 부하로 나쁜 디자인의 값을 치릅니다. 정부 서비스는 위기에 처한 사람, 오래된 기기를 쓰는 사람, 낮은 디지털 자신감을 가진 사람, 대안 제공자가 없는 사람을 포함해 전체 대중에게 닿으므로, 디자인 품질은 형평성과 시민의 신뢰 문제가 됩니다. 여기서 접근성은 있으면 좋은 것이 아니라 법적 의무입니다. 공공 기관은 법에 따라 장애가 있는 사람이 쓸 수 있는 소프트웨어를 만들어야 하며, 쉬운 언어와 언어 접근 의무도 흔히 법적 효력을 지닙니다.

이 부의 장

• 5.1 UX 기초: 조직이 추측하는 대신 증거 기반 제품 결정을 내리게 하고 모든 팀에 사용자에 대한 같은 지도를 주는 리서치, 사용자 모델링, 디자인 씽킹 실천.

• 5.2 UI 디자인과 디자인 시스템: 사람들이 보고 만지는 것을 빚는 기술, 그리고 여러 팀의 수천 개 화면을 일관되게 유지하는 토큰, 컴포넌트, 패턴의 공유되고 다스려지는 시스템.

• 5.3 접근성: 장애가 있는 사람이 지각하고, 조작하고, 이해하고, 사용할 수 있는 소프트웨어를 만드는 것으로, 법적 의무이자 윤리적 의무이자 그저 좋은 디자인으로 동시에 다룹니다.

• 5.4 콘텐츠와 커뮤니케이션 디자인: 말이 인터페이스이므로, 쉬운 언어와 일관된 목소리로 사람들이 행동하도록 돕는 제품의 말, 메시지, 커뮤니케이션을 빚는 것.

• 5.5 국제화와 현지화: 소프트웨어가 어떤 언어와 지역에도 적응하게 하는 아키텍처, 그리고 각 로케일에 맞춰 번역하고 문화적으로 적응시키는 워크플로.

• 5.6 프런트엔드 엔지니어링: 통제하지 않는 환경을 위해 클라이언트 대면 계층을 만드는 것으로, 프레임워크 수명, 렌더링 전략, 성능, 복원력에 유의합니다.

• 5.7 모바일 애플리케이션 개발: 네이티브, 크로스 플랫폼, 프로그레시브 웹 접근, 플랫폼 디자인 지침, 오프라인, 배터리, 단편화 제약, 앱 스토어 배포, 모바일 보안과 접근성을 다루며 모바일 기기를 위해 만드는 것.

• 5.8 디자인 리서치와 사용성 테스트: 생성적 및 평가적 리서치, 각 질문에 알맞은 방법, 잘 수행한 사용성 테스트, 대표성 있는 모집, 실제로 결정을 바꾸는 종합을 통해 잘못된 것을 만들 위험을 줄이는 것.

• 5.9 서비스 디자인: 서비스 청사진과 여정 지도를 쓰고 조직을 단일 화면만이 아니라 서비스 뒤에 정렬하며, 사람이 채널에 걸쳐 시간에 따라 경험하는 전체 서비스를 앞무대와 뒷무대로 설계하는 것.

• 5.10 데이터 시각화 디자인: 질문에 알맞은 차트를 고르고 데이터를 정직하게 인코딩하며, 그래픽의 탁월함, 접근 가능하고 색맹에 안전한 팔레트, 분명한 주석을 적용해 차트가 오도하지 않고 결정에 정보를 주게 하는 것.

이 장들이 서로 맞물리는 방식

이 장들은 이해에서 전달까지 하나의 관통선을 이룹니다. UX 기초(5.1)는 사용자가 누구이고 어떤 일을 하려는지 확립합니다. UI와 디자인 시스템(5.2)은 그 이해에 일관된 시각적 형태를 줍니다. 콘텐츠 디자인(5.4)은 그것을 실어 나르는 말을 공급합니다. 프런트엔드 엔지니어링(5.6)은 결과를 출하합니다. 접근성(5.3)과 국제화(5.5)는 별도의 단계가 아니라 다른 모든 것에 엮인 품질입니다. 접근 가능하고 번역 가능한 경험은 공유 컴포넌트, 콘텐츠 패턴, 코드에 처음부터 설계되어 들어가며, 나중에 덧붙여지지 않습니다. 특히 5.3장은 각 컴포넌트에서 접근성을 한 번 해결하려고 5.2장에, 의미 있는 표준 기반 마크업에서 그것을 보존하려고 5.6장에 기댑니다.

이 부는 가이드북 전반에도 닿습니다. 여기의 “일회성보다 자산” 패턴은 8.4장(플랫폼 엔지니어링과 개발자 경험)의 공유 플랫폼 사고를 반영하며, 1.1장과 1.4장의 가치와 일하는 방식은 디자인 일관성을 애초에 가능하게 하는 조직적 조건을 정합니다. 접근성, 시각적 회귀, 성능 예산 검사는 8.1장(CI/CD와 전달)의 전달 파이프라인에 속해, 품질이 출시 직전에 감사되는 대신 모든 변경에서 시행됩니다. 그리고 프런트엔드 성능이 의존하는 실사용자 모니터링(실제 사용자의 기기와 네트워크에서 수집한 성능 데이터)은 9.2장의 관측 가능성 실천에 직접 연결됩니다. 잘 하면, 여기의 작업이 다른 곳에 기술된 시스템을 그것이 섬기려는 사람들이 실제로 쓸 수 있게 만드는 것입니다.