이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
졸업 프로젝트에서 처음에는 데스크탑 화면을 먼저 만들고 모바일을 나중에 줄이는 방식으로 진행하였습니다. 그러나 CSS를 작성할수록 모바일에서 수정해야 할 부분이 너무 많았습니다. max-width로 줄이는 것이 아니라 완전히 다른 레이아웃을 새로 짜야 하는 경우가 발생하였습니다. 팀원이 '모바일 퍼스트로 짜면 이 문제가 줄어든다'고 알려주었습니다. 중간에 방식을 바꿨고, 리팩토링에 이틀이 걸렸습니다. 이후에는 min-width 미디어 쿼리 기준으로 작성하였더니 모바일 기본에서 데스크탑으로 확장하는 것이 훨씬 자연스러웠습니다. 디자인 원칙이 실제 CSS 방향성에 영향을 준다는 것을 이때 처음 느꼈습니다.
인턴 때 디자이너가 만들어둔 피그마 파일을 보고 직접 구현하는 작업을 맡았어요. 처음엔 그냥 시각적으로 똑같이 만드면 된다고 생각했어요. 그런데 폰트 크기, 여백이 기기별로 어떻게 달라지는지 피그마엔 모바일과 데스크탑 프레임만 있고 중간 단계가 없었어요. 어떻게 보간할지 판단해야 했는데, 처음엔 중간 크기에서 레이아웃이 어색하게 깨졌어요. breakpoint를 768px과 1024px 두 단계로 설정하고 나서 안정됐어요.
디자인 파일은 가이드이지 완벽한 명세가 아니라는 걸 배웠어요. 구현 중 판단이 필요한 부분을 먼저 디자이너와 확인하는 습관도 생겼어요. 그 과정이 값진 배움이었습니다.
포트폴리오 프로젝트에서 카드 목록 화면을 반응형으로 만들 때 처음엔 미디어 쿼리로 컬럼 수를 하나씩 지정했어요. 코드가 너무 길어지고 특정 해상도에서 카드 크기가 어색한 경우가 생겼어요. CSS Grid의 auto-fill과 minmax를 써봤는데 딱 한 줄로 반응형 그리드가 만들어지는 게 신기했어요.
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 한 줄이 미디어 쿼리 10줄을 대체했어요. 간결한 코드가 오히려 더 유연한 결과를 만들 수 있다는 걸 처음 경험했어요. 이 패턴 이후로 레이아웃 문제를 만나면 Grid를 먼저 검토하는 습관이 생겼어요.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 비즈테크아이 솔루션 아키텍트 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.