The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명
20년 간 HTML/CSS에 집중한 개발자
배우기 쉽다고 생각하면 쉬운 문제만 해결할 수 있습니다. 더 높은 수준의 문제를 찾아 도전하고, 더 가치 있는 일에 시간을 투자하세요.
CSS는 명세를 깊이 있게 이해하지 못한 상태로 브라우저 버그까지 만나게 되면 무척 어렵게 느껴집니다. 그럼에도 HTML/CSS는 처음에 한 번 배워 놓으면 필요가 없다고 생각하는 경우가 있죠, 정말 알아야 하는 웹 성능, 검색엔진 최적화, 웹 접근성에 대해서는 제대로 알지 못합니다.
개발자는 실무에서 여러 문제를 맞닥뜨리게 되는데, 현업에서 문제를 해결한다는 것은 문법 외적인 지식을 요구합니다. 이 강의에서는 철저하게 실무에서 마주할 수 있는 문제 위주로 정리하고 실제로 문제를 해결했던 사례들을 함께 다루었습니다. 경험 많은 20년 차 실무자가 후배들에게 알려주고 싶은 중요한 내용들입니다.
by 정찬명
View Point
개발자가 찾던 HTML/CSS 심화 강의!
문법에만 매몰되지 말아야 한다
The Red Story
정찬명의 성능과 사용성 개선 사례
최근에는 jpg보다 압축률도 뛰어나면서 원본에 가까운 퀄러티를 유지하는 훌륭한 이미지 포맷들이 등장했어요. webp, avif 포맷입니다. 하지만 인터넷 익스플로러는 webp 포맷을 지원하지 않고요 avif 포맷은 아직 크롬 브라우저만 지원하는 상황이에요.
레진코믹스는 콘텐츠에 이미지를 많이 사용하기 때문에 이 문제에 관심이 있었고요. 일찌감치 webp 포맷을 지원하기 시작했어요. 하지만 인터넷 익스플로러도 함께 지원해야 하기 때문에 webp, jpg를 동시에 지원해야 했고요.
브라우저 지원 상황에 알맞게 필요한 이미지를 다운로드해서 렌더링 해 줄 수 있는 기법이 필요한 상황에서 이 문제를 해결해 주는 HTML 요소는 picture 요소이고 CSS 값에 사용할 수 있는 명세는 image-set() 함수입니다. 브라우저 지원 현황에 알맞게 가장 적은 용량의 이미지를 렌더링 해 주기 때문에 성능이 급격하게 좋아졌어요. 이 사례 하나가 성능과 사용성을 모두 개선한 최고의 사례라고 할 수 있겠네요.
정찬명에게 HTML/CSS를 배우면
네 가지가 바뀝니다.
표준 명세 기반으로 코드를 작성하면 오랫동안 영속될 수 있는 코드를 작성할 수 있게 됩니다.
단순한 웹사이트의 구현을 뛰어 넘어 성능 및 구조를 개선을 할 수 있게 됩니다.
자주 발생하는 오류! 실제 사례와 실무 상황에서 유연하게 해결 하는 노하우를 얻을 수 있습니다.
인터넷에서 쉽게 접할 수 없는 내용으로 검색 엔진이 좋아하는 웹 사이트를 만들 수 있게 됩니다.
▫️이번 강의를 통해서 검색엔진 최적화 점수를 확인할 수 있는 도구 사용법을 배우고 비즈니스를 표현하면서도 적절한 타이틀 값을 지정하는 방법을 배울 수 있습니다.
▫️겉보기에는 똑같아 보일지라도, 논리적이고 효율적으로 작성된 코드는 웹 성능을 개선할 수 있습니다.
▫️대규모 웹 사이트에서 동료들과 원만하게 협업하고 쉬운 유지보수를 돕는 BEM의 올바른 적용 방법을 살펴봅니다.
▫️2.5초 안에 중요한 정보를 렌더링해야 고객 이탈률을 낮추고 검색 엔진으로부터 좋은 점수를 받을 수 있습니다.
▫️페이지에서 시각적 요소를 담당하는 중요한 이미지들은 로딩이 느릴수록 고객 경험이 나빠집니다.
▫️LCP를 개선해서 초고속 웹 사이트로 환골탈태한 노하우, The Red에서 확인하세요.
▫️모든 이미지 또는 요소에 대체 텍스트가 필요한 건 아닙니다.
▫️애플이 접근성에 투자하는 이유는 궁극적으로 사용자 경험을 높이기 위함입니다.
Top of Top
HTML/CSS 웹표준, 웹 접근성, UI 베테랑 개발자 정찬명
레진엔터테인먼트 웹툰 플랫폼 UI 개발 및 성능, SEO 개선자
11번가 쇼핑 플랫폼 UI개발 및 웹 접근성 가이드 수립자
네이버 공통 UI 콤포넌트 및 스마트에디터 UI 개발자
HTML/CSS 20년 차 UI 개발자
SK T아카데미 웹 접근성 강연
SK planet 반응형 웹 기술 강연
네이버 개발자 컨퍼런스 DEVIEW
반응형 웹 구축기
웹 표준 개발자 컨퍼런스 WSConf.
'CSS Selector' 표준 사용법
레진엔터테인먼트 (레진코믹스)
- 웹툰 플랫폼 UI 개발
- 웹 접근성 / WAI-AIRA 가이드라인 개발
- HTML/CSS 컨벤션 개발
• 2013 ~ 2017
SK플래닛 (11번가)
- 쇼핑 플랫폼 UI 개발
- O2O 마케팅 솔루션 UI 개발
- 웹 접근성 가이드라인 개발
네이버
- 공통 UI 콤포넌트 개발
- 스마트에디터 UI 개발
- 오픈소스 XE UI 개발
- DEVIEW 웹 사이트 개발
• 2006 ~ 현재
한국지능정보사회진흥원
- 자문위원
- 한국형 웹 접근성 지침 2.0 개발 참여
Curriculum
Part 1. HTML
Part 2. CSS
Part 3. Performance
Part 4. Accessibility
그리고 한 걸음 더
강의에 대해 궁금하셨나요?
한 걸음 더 들어가봅니다.