예시 답변 1
약 84초
디자이너 의도 확인·컴포넌트 분리·반응형 처리 단계별 진행으로 변환 결
와이어프레임을 코드로 변환할 때 저는 디자이너와 의도를 먼저 확인하는 것을 우선합니다. 단순히 시각적으로 맞추는 것과 인터랙션 흐름을 정확히 구현하는 것은 다르기 때문에, 피그마 주석과 프로토타입을 함께 살피며 모호한 부분을 미리 질문합니다.
그다음은 컴포넌트 단위로 분해하는 작업입니다. 반복 등장하는 UI 패턴을 파악해 재사용 가능한 단위로 추출하면 이후 수정이 훨씬 수월해집니다. 인턴 때 동일한 카드 컴포넌트가 세 화면에 쓰이는 것을 발견하고 공통화한 뒤 props로 변형을 처리해 중복을 크게 줄였습니다.
마지막으로 반응형 분기점 처리를 챙깁니다. 와이어프레임이 데스크톱 기준으로만 그려진 경우가 많아 모바일 축소 시 레이아웃이 깨지는 문제가 자주 발생했습니다. 개발 초기에 분기점을 팀과 합의해두면 나중에 수정 비용을 줄일 수 있었습니다.
이 결의 특징
와이어프레임 변환을 디자이너 의도 확인부터 컴포넌트 분해까지 단계별로 풀어낸 흔적이 있습니다.
이 결이 통하는 자리
반응형 분기점을 팀과 미리 합의해 수정 비용을 줄인 구체 방법이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 자리를 자주 봅니다.