HTML/CSS 미드레벨 기술면접

Critical CSS를 인라인으로 head에 삽입하여 첫 화면 렌더링에 필요한 스타일을 즉시 적용하고, 나머지 CSS는 비동기로 로드합니다. CSS 파일에 media 속성을 명시하여 불필요한 스타일시트의 렌더링 블로킹을 방지합니다. 폰트는 font-display: swap을 사용하고 preload로 미리 로드하며, 사용하지 않는 CSS를 제거하여 파일 크기를 줄입니다. HTML 문서 상단에는 스크립트 태그를 배치하지 않거나 defer/async 속성을 사용하여 파싱을 차단하지 않도록 합니다. 이미지는 loading='lazy' 속성으로 지연 로딩하고 중요한 히어로 이미지만 preload 처리합니다.

nav 요소로 전체를 감싸고 ul/li로 메뉴 구조를 만들며, 서브메뉴가 있는 버튼에는 aria-haspopup='true'와 aria-expanded 속성을 추가합니다. 서브메뉴는 role='menu'와 aria-labelledby로 부모 버튼과 연결하고, 각 메뉴 아이템은 role='menuitem'을 부여합니다. 키보드 네비게이션을 위해 Tab, Enter, Space, Arrow 키 이벤트를 처리하고, 메뉴가 닫힐 때는 포커스를 트리거 버튼으로 되돌립니다. 숨겨진 메뉴는 display:none이나 hidden 속성으로 처리하여 스크린 리더가 읽지 않도록 하며, 시각적 포커스 인디케이터를 명확히 표시합니다.

BEM은 Block-Element-Modifier 구조로 클래스명을 체계화하여 명시도 충돌을 방지하고 컴포넌트 독립성을 보장하지만, 클래스명이 길어지는 단점이 있습니다. OOCSS는 구조와 스킨을 분리하고 컨테이너와 콘텐츠를 분리하여 재사용성을 극대화하지만, 과도한 추상화로 HTML이 복잡해질 수 있습니다. SMACSS는 Base, Layout, Module, State, Theme으로 카테고리를 나누어 규칙을 정리하며 대규모 프로젝트에 적합하지만 학습 곡선이 있습니다. 실무에서는 BEM을 기본으로 하되 유틸리티 클래스는 OOCSS 원칙을 적용하고, 프로젝트 규모에 따라 SMACSS의 카테고리 분류를 혼합하는 하이브리드 접근이 효과적입니다.

브레이크포인트는 특정 디바이스가 아닌 콘텐츠가 깨지는 지점을 기준으로 설정하며, 일반적으로 320px, 768px, 1024px, 1440px 등을 기본으로 조정합니다. Mobile-First 접근법으로 작은 화면부터 스타일을 작성하고 min-width 미디어 쿼리로 확장하면 모바일 성능이 향상됩니다. 상대 단위(em, rem, %, vw)를 사용하여 유연한 레이아웃을 구성하고, CSS Grid와 Flexbox를 활용해 복잡한 미디어 쿼리를 줄입니다. 이미지는 srcset과 sizes 속성으로 반응형 처리하고, picture 요소로 아트 디렉션을 구현합니다. CSS 변수로 브레이크포인트별 값을 관리하면 유지보수가 용이합니다.

먼저 Can I Use나 MDN을 통해 문제가 되는 CSS 속성의 브라우저 지원 여부를 확인하고, 개발자 도구로 해당 브라우저에서 직접 디버깅합니다. Flexbox나 Grid 같은 최신 기능은 Autoprefixer로 벤더 프리픽스를 자동 추가하고, 지원하지 않는 브라우저를 위한 폴백 스타일을 작성합니다. Feature Query(@supports)를 사용하여 브라우저 기능 지원 여부에 따라 다른 스타일을 적용합니다. 개발 단계에서는 Browserslist 설정으로 타겟 브라우저를 명시하고, Stylelint에 브라우저 호환성 룰을 추가하며, BrowserStack이나 Sauce Labs로 크로스 브라우저 테스트를 자동화합니다.

CSS 셀렉터는 오른쪽에서 왼쪽으로 매칭되므로 깊은 자손 셀렉터나 범용 셀렉터를 피하고 클래스 기반으로 단순화합니다. will-change 속성이나 transform, opacity를 사용하여 합성 레이어를 생성하고 GPU 가속을 활용합니다. 레이아웃 변경(width, height, margin)보다는 transform을 사용하고, 애니메이션은 requestAnimationFrame으로 최적화합니다. contain 속성으로 CSS Containment를 적용하여 특정 영역의 스타일 재계산을 격리시킵니다. 개발자 도구의 Performance 탭과 Rendering 탭에서 레이어 구조와 리페인트 영역을 분석하여 병목을 찾아냅니다.

article 태그로 독립적인 콘텐츠를 감싸고, header에는 h1으로 제목과 time 태그로 작성일을 명시합니다. 본문은 section으로 주제별로 나누고 각 섹션에 h2~h6로 계층 구조를 만듭니다. 저자 정보는 address 태그나 rel='author'를 사용하고, 관련 콘텐츠는 aside로 분리합니다. nav로 페이지네이션이나 목차를 구성하고, footer에는 메타 정보를 배치합니다. 구조화된 데이터는 JSON-LD로 Schema.org의 Article 스키마를 추가하여 검색엔진에 명확한 정보를 제공합니다. 이미지에는 의미 있는 alt 텍스트를 작성하고, figure와 figcaption으로 캡션을 연결합니다.

Flexbox는 행 또는 열의 1차원 방향으로 아이템을 정렬할 때 적합하며, 네비게이션 바나 카드 내부 요소 배치에 유용합니다. CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃에 강력하며, 전체 페이지 구조나 복잡한 그리드 시스템에 적합합니다. Flexbox는 콘텐츠 크기에 따라 유연하게 조정되는 반면, Grid는 명시적으로 영역을 정의하여 일관된 구조를 만듭니다. 실무에서는 Grid로 전체 레이아웃 프레임을 구성하고, 각 Grid 셀 내부의 콘텐츠 정렬에는 Flexbox를 사용하는 중첩 패턴이 효과적입니다. 반응형 디자인에서는 Grid의 auto-fit, auto-fill과 minmax() 함수를 활용하면 미디어 쿼리 없이도 유연한 레이아웃을 구현할 수 있습니다.

시맨틱 HTML 사용 여부, 적절한 태그 선택, 불필요한 div 중첩을 확인하고, CSS는 명명 규칙 준수, 중복 코드, 명시도 관리를 검토합니다. 접근성 측면에서는 alt 텍스트, ARIA 속성, 키보드 네비게이션을 체크하고, 성능은 불필요한 리플로우 유발 코드나 과도한 셀렉터를 찾습니다. Stylelint와 HTMLHint를 CI/CD에 통합하여 자동으로 코드 스타일을 검증하고, Prettier로 포맷팅을 통일합니다. EditorConfig로 들여쓰기와 줄바꿈을 일관되게 유지하고, 팀 위키에 CSS 방법론과 네이밍 컨벤션을 문서화합니다. Lighthouse CI로 매 배포마다 성능과 접근성 점수를 측정하여 품질을 모니터링합니다.

먼저 구체적인 문제점(색상 대비율 부족, 애니메이션 성능 등)을 데이터와 근거(WCAG 기준, Lighthouse 점수)로 정리하여 디자이너에게 공유합니다. 문제를 지적하는 것에 그치지 않고, 디자인 의도를 최대한 살리면서 기준을 충족하는 대안을 2-3가지 제시합니다. 예를 들어 색상 대비가 부족하면 명도를 조정한 팔레트를 제안하거나, 복잡한 애니메이션은 reduce-motion을 고려한 단순 버전을 함께 구현합니다. 정기적인 디자인-개발 싱크 미팅을 통해 초기 단계부터 제약사항을 공유하고, 디자인 시스템에 접근성과 성능 가이드라인을 함께 문서화하여 반복적인 문제를 예방합니다. 최종적으로는 사용자 경험과 법적 요구사항을 우선하되, 협업 관계를 유지하는 것이 중요합니다.