이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
HTML5와 CSS3를 함께 사용한 대표 작업은 반응형 랜딩 페이지 제작이었습니다. Flexbox로 수평 배치를 처리하고, 그리드 구조가 필요한 카드 영역은 CSS Grid를 사용해 2단·3단 전환을 미디어 쿼리로 분기했습니다.
CSS3에서 자주 활용한 기능은 변수 선언이었습니다. 색상과 간격 값을 :root에 선언해두면 디자인 수정 시 한 곳만 바꾸면 전체에 반영됩니다. 팀원들도 변수 이름만 보고 의도를 파악할 수 있어 유지보수가 수월했습니다.
HTML5 시맨틱 태그도 적극 활용했습니다. header, nav, main, footer 구조를 갖추면 스크린 리더 접근성이 개선되고, 코드를 처음 보는 사람도 페이지 구조를 빠르게 파악할 수 있었습니다. 시맨틱 마크업은 습관으로 만들어두면 추가 비용이 거의 없습니다.
HTML5와 CSS3를 쓰면서 CSS로 할 수 있는 것과 할 수 없는 것의 경계를 직접 부딪혀 알게 됐습니다. CSS 애니메이션과 트랜지션으로 상당히 많은 것을 구현할 수 있었는데, 스크롤 위치에 따라 요소가 나타나는 인터랙션을 CSS만으로 만들려다가 한계를 경험했습니다.
IntersectionObserver가 필요한 시점이었는데, CSS만으로는 스크롤 이벤트에 반응하는 동적 동작을 만들 수 없는 결이 있었습니다. 또한 CSS Grid와 Flexbox를 함께 쓰는 구조가 구버전 환경에서 예상대로 동작하지 않는 경우도 있었습니다.
브라우저 호환성은 개발 환경에서 잘 보이더라도 실제 사용자 환경에서 다를 수 있는 결이 있다는 것을 이 경험에서 배웠습니다. CSS는 무엇을 구현하느냐보다 어떤 브라우저를 지원해야 하느냐가 설계의 기준이 되는 결이 있었습니다.
CSS 트랜지션을 자주 쓰다가 모바일에서 애니메이션이 버벅이는 문제를 경험했습니다. margin이나 width를 직접 변경하는 애니메이션은 레이아웃 재계산(Reflow)이 발생해 성능에 영향을 주는 반면, `transform`과 `opacity`는 GPU 가속을 받아 훨씬 부드럽게 동작한다는 것을 이 경험에서 처음 이해했습니다. 이후에는 움직임이 필요한 요소에는 `transform: translateX()`로 위치를 변경하고, left/top 직접 수정은 피하는 방식을 쓰고 있습니다. CSS를 작성할 때 시각적으로 같아 보이는 방식도 브라우저가 처리하는 방식이 다른 결이 있다는 것을 배웠습니다.
렌더링 파이프라인을 의식하고 CSS를 작성하는 것이 성능 문제를 피하는 가장 효과적인 결이라는 것을 이 경험에서 알게 됐습니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 올웨이즈 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.