3~4년차 프론트엔드는 이력서에 어떤 내용을 넣어야 하나요?

안녕하세요! 이번 글에서는 제가 그동안 작업해온 프론트엔드 프로젝트들을 소개하려고 해요. 단순한 작업물 소개가 아니라, 인터랙션과 UX 측면에서 제가 어떤 고민을 했고, 그걸 어떻게 해결했는지에 초점을 맞췄습니다.
결국, 사용자에게 더 나은 경험을 주기 위해 어떤 선택을 했는지, 실무에서 깨달은 것들을 하나씩 공유해 보려고 해요. 프론트엔드로서 어떤 생각을 하고 있는지 공유해보겠습니다 ㅎㅎ 여러분들의 이력서 작성에도 영감이 되었으면 좋겠습니다!!

프로젝트 1: 검색창 UX 개선 – 부드러운 페이지 전환과 슬라이드 인터랙션

문제점: 끊기는 페이지 전환으로 인한 혼란

검색창에서 페이지 간 전환이 부드럽지 않으면, 사용자는 쉽게 혼란에 빠지곤 합니다. 특히 검색 결과를 여러 페이지에 걸쳐 살펴볼 때, 페이지 전환이 툭툭 끊기면 지금 내가 어디에 있는지, 다음에 무엇을 볼지 파악하기 어려워집니다.

해결책: 슬라이드 인터랙션 적용

이를 해결하기 위해 저는 검색 결과 페이지에 슬라이드 인터랙션을 적용했습니다.
다음 페이지로 이동할 때는 콘텐츠가 왼쪽으로 슬라이드되고, 이전 페이지로 돌아갈 때는 오른쪽으로 슬라이드되게 했습니다. 이 과정에서 이동 속도를 일관되게 유지하는 것이 중요했습니다. 예를 들어, 1페이지에서 3페이지로 바로 이동할 때는 이동 거리가 길기 때문에 그만큼 슬라이드 시간이 길어져야 했습니다. 이를 통해 페이지 간 전환이 자연스럽고 매끄럽게 느껴지도록 했습니다.

UX 측면: 맥락 유지

UX 측면에서 중요한 것은 맥락 유지였습니다. 페이지 전환이 단순히 새로고침되는 것이 아니라, 전환 과정을 눈으로 보여주는 것이죠. 이를 통해 사용자는 현재 자신이 어디에 있는지, 다음에 무엇을 보게 될지를 쉽게 파악할 수 있습니다. 특히, 이전 페이지의 마지막 열과 다음 페이지의 첫 번째 열이 자연스럽게 연결되도록 레이아웃을 구성함으로써 이전 페이지와의 흐름을 유지했습니다.

기술적 도전: DOM 관리와 애니메이션

기술적으로는 DOM 관리가 큰 도전이었습니다. 페이지 이동 시 모든 콘텐츠를 미리 불러오는 것은 브라우저와 서버에 부담을 주기 때문에, 애니메이션이 끝나는 시점에 불필요한 DOM을 제거하는 방식으로 처리했습니다. 또한, 사라지는 페이지의 콘텐츠가 서서히 투명해지는 효과(fade out)를 추가해 전환이 더 자연스럽게 느껴지도록 했습니다. 이 과정은 디자이너의 요구사항이었고, 구현이 쉽지 않았지만 완성했을 때 시각적 만족감이 컸습니다.

결과: 자연스러운 전환과 맥락 유지

결과적으로, 페이지 전환이 부드럽고 자연스러워지면서 사용자가 탐색하는 과정에서 맥락을 잃지 않고 검색 결과를 살펴볼 수 있게 되었습니다.

프로젝트 2: 검색창 UX 개선 – 네이버 검색창 분석과 실전 적용

이번에는 검색창 UX에 대해 이야기해볼까 합니다. 검색창은 사용자에게 검색 경험을 제공하는 중요한 인터페이스 중 하나인데, 그 사용성은 검색 결과를 얼마나 빠르고 직관적으로 제공하느냐에 따라 크게 달라집니다. 그래서 저는 네이버 검색창의 UX를 분석하고, 이를 제 검색 컴포넌트에 적용해보았습니다.

먼저, 네이버 검색창은 검색어 입력 시 실시간으로 검색 결과를 아래에 보여주고, 일치하는 검색어는 색상으로 강조하는 특징을 가지고 있었습니다. 사용자가 입력하는 동안 검색 결과를 빠르게 갱신하는 동시에, 시각적인 피드백을 통해 사용자가 원하는 정보를 쉽게 찾을 수 있도록 돕는 구조였죠. 이 UX를 통해 검색 결과가 더 명확하고 직관적으로 느껴지게 됩니다.

또한, 검색 결과창이 뜨고 꺼지는 트리거에도 주목했습니다. 네이버 검색창은 사용자가 타이핑을 시작하거나, 방향키를 누를 때 자동으로 검색 결과창을 열고, 검색어를 모두 지우거나 바깥을 클릭할 때는 검색창을 닫습니다. 이러한 세밀한 동작들이 사용자 경험을 더욱 부드럽게 만들어 줍니다. 이처럼 여러 트리거에 반응하는 UX는 사용자가 검색 작업에 몰입할 수 있도록 돕습니다.

적용한 인터랙션과 UX 개선

이 분석을 토대로, 저는 제 검색 컴포넌트에도 비슷한 UX 요소를 반영했습니다. 검색어 입력 시 실시간으로 검색 결과를 표시하고, 검색어와 일치하는 부분을 색상으로 강조해 사용자에게 피드백을 주는 구조로 만들었죠. 또한, 사용자가 검색 결과를 쉽게 탐색할 수 있도록 키보드 방향키로 항목을 선택할 수 있게 했습니다. 이를 통해 마우스 없이도 검색 결과를 탐색할 수 있어 사용자 편의성을 높였습니다.

특히, 검색 결과창을 자동으로 열고 닫는 트리거를 구현할 때는 더 세밀하게 다루었습니다. 사용자가 타이핑을 시작하면 자동으로 검색 결과창이 열리고, 검색어를 모두 지우면 결과창이 닫히는 동작을 추가했습니다. 또한, 검색창이 열려 있는 동안 다양한 키보드 동작(예: 방향키, 엔터키)으로도 검색 결과를 선택할 수 있도록 했습니다. 이로 인해 사용자는 더 직관적이고 빠르게 검색 결과를 확인할 수 있었습니다.

프로젝트 3: 스크롤 애니메이션 – 페이지 스크롤 시 코드 타이핑 효과

이번에는 스크롤 애니메이션에 대해 이야기해볼까 합니다. 스크롤 애니메이션은 웹 페이지에 시각적 효과를 추가해 사용자 경험을 더욱 풍부하게 만들 수 있는 중요한 요소 중 하나죠. 특히, Flitter.dev 프로젝트에서 스크롤 애니메이션을 통해 사용자들에게 더 생동감 있는 경험을 제공하고자 했습니다.

스크롤 애니메이션을 추가하면 사용자의 시선을 끌고, 페이지에서 머무는 시간을 늘리는 데 큰 도움이 됩니다. 사용자 입장에서는 스크롤할 때마다 페이지가 살아 움직이는 듯한 느낌을 받을 수 있죠. 제가 Flitter.dev에 적용한 스크롤 애니메이션은 특히 코드가 실시간으로 타이핑되는 효과를 구현했는데, 이로써 마치 화면에서 실제로 코드를 작성하는 것처럼 보이도록 연출했습니다.

구현 방법

이 애니메이션을 구현하기 위해 먼저 Lottie 애니메이션을 사용했습니다. 다음과 같은 과정으로 작업을 진행했죠:

1.	전체 코드를 작성한 뒤, 한 줄씩 되돌리기: 모든 코드를 완성한 후, 하나씩 지우면서 되돌리기(Undo) 기능을 사용해 타이핑하는 것처럼 보이도록 했습니다.
2.	화면 녹화: 이 과정을 화면 녹화로 저장한 후, 이를 MP4 형식으로 변환했습니다.
3.	Lottie 변환: MP4 영상을 Lottie 파일로 변환해, 스크롤에 따라 타이핑 애니메이션이 진행되도록 설정했습니다.

덕분에 웹 페이지의 로딩 속도에 영향을 주지 않으면서도 부드럽고 자연스러운 애니메이션을 구현할 수 있었습니다.

UX 측면에서의 효과

이 스크롤 애니메이션의 가장 큰 장점은 사용자에게 직관적인 피드백을 제공한다는 점입니다. 사용자가 페이지를 스크롤할 때마다 코드가 실시간으로 작성되는 듯한 애니메이션이 진행되므로, 사용자의 시선을 끌어들이고 콘텐츠에 집중하게 만들 수 있습니다.

https://flitter.dev에 놀러와서 이 애니메이션을 직접 확인해보세요! 🌟

마무리

지금까지 제가 작업한 몇 가지 프로젝트를 소개해봤는데요, 완벽하다고 할 수는 없지만, 이런 과정을 통해 한 걸음씩 성장해 나가고 있다고 생각합니다. 사용자 경험(UX)이 얼마나 중요한지 매번 새롭게 깨닫고 있고, 앞으로도 더 나은 인터랙션과 UI를 만들기 위해 계속해서 고민할 것 같아요.
읽어주셔서 감사하고, 여러분도 이런 작업들이 작은 참고가 되셨으면 좋겠습니다. 😄