1. HTML
1. DOCTYPE 🔥
💡 면접관의 의도 HTML 문서의 동작 원리와 브라우저 렌더링 모드(표준 모드 vs 쿼크 모드)에 대한 기초 지식이 있는지 확인.
🗣️ 답변 예시
DOCTYPE은 문서의 타입을 브라우저에게 알려주는 선언문입니다. 브라우저가 문서를 파싱할 때 최신 웹 표준에 맞게 렌더링하는 표준 모드(Standards Mode) 로 동작할지, 아니면 오래된 웹 페이지의 하위 호환성을 위해 쿼크 모드(Quirks Mode) 로 동작할지 결정하는 중요한 역할을 합니다.
HTML5 환경에서는 문서 최상단에
<!DOCTYPE html>이라고 선언하며, 이를 누락하거나 잘못 작성하면 브라우저마다 UI가 다르게 깨져 보이는 크로스 브라우징 이슈가 발생할 수 있으므로 반드시 명시해야 합니다.
2. 웹 표준 및 웹 접근성 🔥
💡 면접관의 의도 시맨틱 마크업의 중요성과 다양한 사용자를 배려하는 웹 서비스 구축에 대한 인식을 확인. (SEO와의 연관성 포함)
🗣️ 답변 예시
웹 표준은 W3C에서 권고하는 기술 규격을 준수하여 마크업을 작성하는 것을 의미합니다. 특정 브라우저에 종속되지 않고 동일한 경험을 제공하기 위해 필수적이며, 특히
header,nav,main,article같은 시맨틱 태그를 목적에 맞게 사용하여 문서의 구조와 의미를 브라우저와 검색 엔진이 명확히 이해할 수 있도록 하는 것이 핵심입니다. 이는 곧 검색 엔진 최적화(SEO) 효율을 높이는 결과로 이어집니다.웹 접근성은 장애인이나 고령자를 포함한 모든 사용자가 신체적, 환경적 조건에 제약 없이 웹 서비스에 동등하게 접근할 수 있도록 보장하는 것입니다. 실무에서는 이미지에
alt속성을 명확히 부여하고, 스크린 리더가 폼 요소를 이해할 수 있도록label이나aria-label을 연결합니다. 또한 마우스 없이 키보드(Tab 키)만으로도 논리적인 순서대로 화면을 탐색할 수 있도록 마크업 구조를 설계하는 데 신경 쓰고 있습니다.
3. 대용량 이미지 렌더링 개선 (그 외) 🔥
💡 면접관의 의도 프론트엔드 성능 최적화(특히 리소스 로딩)에 대한 실제 고민과 해결 방법을 알고 있는지 확인.
🗣️ 답변 예시
이미지로 인한 렌더링 지연은 사용자 경험(UX)과 직결되므로 몇 가지 단계로 최적화를 진행합니다.
첫째, 이미지 포맷 최적화입니다. 기존 PNG, JPG 대신 압축률이 뛰어난 WebP나 AVIF 같은 차세대 포맷을 사용합니다.
<picture>태그를 활용해 브라우저 지원 여부에 따라 적절한 포맷을 제공할 수 있습니다.둘째, 지연 로딩(Lazy Loading) 의 적용입니다. 초기 화면(뷰포트)에 보이지 않는 이미지는 HTML의
loading="lazy"속성이나 Intersection Observer를 활용해 사용자가 스크롤을 내릴 때 비로소 로드되도록 처리하여 초기 렌더링 속도를 높입니다.셋째, 반응형 이미지 제공입니다. 디바이스 화면 크기에 맞게 불필요하게 큰 이미지를 다운받지 않도록
srcset속성을 활용해 적절한 사이즈의 이미지를 서빙합니다.
4. SVG란 ? 🔥
💡 면접관의 의도 래스터(비트맵) 이미지와 벡터 이미지의 차이를 이해하고, 상황에 맞는 이미지 포맷을 선택할 수 있는지 확인.
🗣️ 답변 예시
SVG(Scalable Vector Graphics)는 픽셀로 이루어진 기존의 래스터 이미지(PNG, JPG)와 달리, 수학적 계산을 기반으로 그려지는 2D 벡터 이미지 포맷입니다.
장점은 아무리 확대하거나 해상도가 높은 디바이스에서 보아도 픽셀 깨짐 없이 선명함이 유지된다는 것입니다. 또한, 내부가 XML 기반의 코드로 이루어져 있기 때문에 CSS나 JavaScript를 통해 색상을 변경하거나 동적인 애니메이션을 조작하기가 매우 용이합니다. 단순한 아이콘 형태라면 파일 용량도 훨씬 작습니다.
단점은 코드로 렌더링 연산을 수행해야 하므로, 복잡하고 디테일한 사진 같은 이미지를 표현할 때는 오히려 브라우저의 연산 비용이 증가해 렌더링 성능이 떨어지고 파일 크기도 기하급수적으로 커질 수 있다는 점입니다. 따라서 로고, 아이콘, 단순한 일러스트 등에 주로 활용하는 것이 적합합니다.
