이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
반응형 웹 디자인을 구현할 때 모바일 화면을 먼저 설계하고 더 큰 화면으로 확장하는 방식이 콘텐츠 우선순위를 더 잘 반영한다고 생각합니다. 데스크탑에서는 사이드바로 보여줬던 정보가 모바일에서는 노출이 어려워 무엇을 남기고 무엇을 숨길지 명확한 기준이 없으면 화면이 어지러워집니다.
브레이크포인트 설정은 단순히 화면 크기 기준이 아니라 콘텐츠가 자연스럽게 재배치되는 지점을 기준으로 정하는 것이 실용적이었습니다. 터치 타겟 크기와 스크롤 흐름은 모바일에서 특히 중요한데, 버튼이 너무 작으면 실수 클릭이 잦아집니다. 반응형 작업에서는 개발자와 초기에 그리드와 제약을 함께 합의하면 나중에 수정 사이클이 줄어든다는 걸 경험으로 배웠습니다. 화면 크기가 달라져도 의도가 전달되는 설계가 좋은 반응형이라고 생각합니다.
반응형 웹 디자인을 처음 제대로 접한 것은 기존에 데스크탑 기준으로 만든 설계를 모바일로 내려보내는 과정에서 레이아웃이 전부 무너지는 것을 경험했을 때입니다. 그때부터 모바일 화면을 먼저 설계하고 큰 화면으로 확장하는 방식으로 순서를 바꿨습니다. 터치 타겟 크기가 너무 작아 버튼 오클릭이 자주 발생하는 것을 테스트에서 발견하고, 44×44dp 기준을 의식하게 됐습니다.
브레이크포인트를 기기 기준이 아니라 콘텐츠가 깨지는 지점 기준으로 설정하는 방식이 훨씬 자연스러운 재배치를 만든다는 걸 그때 배웠습니다. 이미지가 고해상도 모바일에서 흐릿하게 나오는 것도 srcset 대응으로 해결한 경험이 있습니다. 반응형은 화면 크기를 줄이는 것이 아니라 맥락이 바뀌는 것에 맞게 재설계하는 것입니다.
반응형 디자인에서 설계로 끝나지 않고 실기기에서 직접 확인하는 것이 왜 중요한지를 경험으로 배웠습니다. 디자인 툴에서는 잘 보이던 레이아웃이 실제 스마트폰에서 열었을 때 폰트 크기가 다르거나 스크롤 흐름이 예상과 다른 경우가 있었습니다. 브라우저마다 기본 스타일과 렌더링 방식이 달라서, iOS Safari와 Android Chrome에서 같은 CSS가 다르게 보이는 것을 QA 단계에서 잡아야 했습니다.
줌 200% 확대 상태에서도 콘텐츠가 가로로 잘리지 않는지 확인하는 것이 접근성 기준에 포함돼 있다는 걸 배우면서 QA 체크리스트에 추가했습니다. 실기기 테스트는 에뮬레이터로 대체하기 어렵고, 실제 손으로 쓰는 경험에서만 잡히는 문제가 있습니다. 반응형 완성은 실기기에서 손으로 확인했을 때입니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 에피드게임즈 UX/UI 디자이너 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.