웹 퍼블리셔(UI 개발자)의 역할은 단순히 디자이너가 준 시안을 코드로 옮기는 것을 넘어, 다양한 기기와 브라우저 환경에서 유연하고 웹 표준에 부합하는 레이아웃을 작성하고 모든 사용자가 차별 없이 이용할 수 있게 보장하는 일입니다.
CSS Flexbox와 Grid의 유연한 활용 하드코딩 마진과 절대 좌표값에만 의존해 요소를 정렬하면 모바일 기기에서 뷰포트가 뒤틀리기 쉽습니다. Flexbox를 활용한 선형 정렬과 Grid를 활용한 격자형 레이아웃을 목적에 맞게 배합해 유연한 유동형 화면을 짜는 연습을 합니다.
모바일 뷰포트와 디바이스 안전 영역 대응 최신 스마트폰의 상단 노치나 하단 스와이프 홈 바 영역에 주요 버튼이 겹쳐 클릭되지 않는 문제를 예방하기 위해, safe-area-inset을 감안해 높이값을 동적으로 조절하는 디바이스 적응형 CSS 코딩 기법을 익힙니다.
웹 접근성(a11y) 가이드라인 준수와 키보드 탐색 스크린 리더 사용자를 위해 모든 콘텐츠 이미지에 대체 텍스트 속성을 정확히 부여하고, 마우스 없이 키보드 탭 키만으로 화면의 모든 대화형 요소를 논리적 흐름에 맞춰 이동하며 컨트롤할 수 있도록 마크업 구조를 설계합니다.
가상의 시나리오 예시 모달 팝업이 띄워졌을 때 백그라운드의 링크로 포커스가 도망가지 않도록 포커스 트랩(Focus Trap) 개념을 적용하고 닫기 버튼으로 키보드 포커스가 우선 정렬되도록 HTML 뎁스를 교정하는 퀘스트를 해결합니다.
퍼블리셔 온보딩 체크리스트 - 기기별 뷰포트와 브라우저 호환성을 감안해 CSS를 작성했는가 - 스크린 리더 대응용 alt 속성이 빠짐없이 기입되어 있는가 - 키보드 접근성과 논리적 흐름이 마크업에 정확히 반영되었는가
---