면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.
포트폴리오 프로젝트 게시판에서 검색창에 자동완성 기능을 추가하였습니다. 기존에는 검색어 전체를 입력하고 엔터를 쳐야 했는데, 사용자 피드백으로 타이핑 중에 미리 볼 수 있으면 좋겠다는 의견이 있었습니다. 디바운스를 처음 적용하였는데, 300ms로 설정하니 너무 느리게 느껴지고, 100ms로 줄이니 API 요청이 너무 많아지는 균형 잡기가 어려웠습니다. 최종적으로 200ms와 이전 요청 취소 방식을 사용하여 안정화하였습니다.
사용자 경험은 작은 딜레이 차이에도 체감이 다르다는 것을 느꼈습니다. 이 기능 하나로 검색 사용률이 이전보다 30% 정도 늘었습니다. 수치로 보니 더 보람찼습니다.
동아리 프로젝트 웹사이트에서 다크모드를 추가해달라는 요청이 여러 번 있었어요. 제가 자원해서 구현을 맡았는데, CSS 변수로 테마를 관리하는 방식으로 했어요. 처음엔 모든 컴포넌트에 직접 색상을 박아놔서 다크모드로 전환해도 일부 컴포넌트가 원래 색으로 남는 문제가 있었어요. 기존 색상 코드를 CSS 변수로 교체하는 리팩토링에 하루가 더 걸렸어요. 시스템 설정을 따라가도록 prefers-color-scheme 미디어 쿼리도 적용했어요.
사용자 설정을 존중하는 작은 배려가 UX에서 중요하다는 걸 느꼈어요. 구현 후 팀원들 반응이 좋아서 사용자 요청을 직접 구현하는 일이 뿌듯했어요.
사이드 프로젝트 피드 화면에서 페이지 버튼을 계속 누르는 게 불편하다는 피드백을 받았어요. 무한 스크롤로 바꾸려고 Intersection Observer를 처음 써봤어요. 처음엔 구현이 됐는데 스크롤 위치를 기억하지 못해서 뒤로가기를 눌렀을 때 맨 위로 돌아오는 문제가 있었어요. 사용자가 읽던 위치를 잃어버리는 거라 UX가 오히려 나빠졌어요. sessionStorage에 스크롤 위치를 저장하고 복원하는 로직을 추가했어요. 기능 하나를 추가할 때 그로 인해 생기는 새로운 문제도 같이 생각해야 한다는 걸 배웠어요. 사용자 경험 개선은 단순히 추가가 아니라 전체 흐름을 설계하는 것이에요.
같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.
진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.