포트폴리오 사이트 회고

기획

프론트엔드 개발자로서의 역량을 보여줄 수 있는 사이트를 만들고 싶었다.
디자인, 개발, 배포까지의 전 과정을 직접 진행하였다.

프로젝트 개요

📅 제작 기간

2025.3.6 ~ 2025.4.1

⚒️ 기술 스택

React, JavaScript, Vite, TailwindCSS, Framer Motion

🔗 배포 링크

https://yurim-portfolio-one.vercel.app/

🧩 주요 기능 소개

메인

• 사이트의 주제를 소개하는 랜딩 페이지
• 깔끔한 색 조합을 통해 몰입감을 높임

about

• 개인 프로필 소개 페이지

stack

• 사용 가능한 기술 스택, 툴을 볼 수 있는 페이지

project

• 슬라이드 UI와 프로젝트 설명을 통해 프로젝트를 확인할 수 있는 페이지

트러블슈팅

z-index 활용

탑 버튼을 구현하는 과정에서 스택 페이지에서만 다른 요소들에 가려져 작동이 안 되는 문제를 직면했다. 이를 해결하기 위해 threshold 값을 조절해보고, 부모 요소의 높이를 조절해보았지만 해결하지 못했다.

문제 원인 파악을 위해 디버깅을 한 결과, 스택페이지의 특정 요소가 높은 z-index 값을 가지고 있어 탑 버튼이 가려지고 있는 것을 파악하게 됐다. 탑 버튼을 항상 화면 상단에 위치하도록 정의해뒀는데, 스택 페이지의 특정 섹션이나 요소가 예상보다 높은 z-index 값을 가지면서 버튼이 아래로 숨겨졌던 것이었다.

이를 해결하기 위해 탑 버튼의 부모 요소에 z-index값을 설정했더니 버튼이 잘 동작되는 걸 확인할 수 있었다. 이를 통해 공통 UI 컴포넌트를 설계할 때, 레이아웃 충돌 가능성을 고려하면서 구현해야한다는 점을 깨달았다.

느낀 점

tailwindCss

그동안 style-components로 개발을 했었는데, 이번 프로젝트를 통해 tailwindCss를 처음 접해보았다. 사용하면서 느낀 점은 html 코드가 길어지지 않아서 가독성이 좋았고 클래스 명에서 바로 css를 정의하니 수정하거나 유지보수할 때 편리하다는 느낌을 받았다. 또한 tailwindCss가 모바일 기준이라 미디어 쿼리로 작성해야 하는 점이 흥미로웠고, 그렇기 때문에 반응형 코드를 추가해야 할 때 코드가 간결해지는 장점이 있어서 좋았다.

디자인 과정

혼자 디자인, 기획을 진행하면서 느낌 점은 피그마를 통해 디자인 하는 과정이 너무 흥미로웠다. 2025년 UI/UX 트렌드를 살펴보면서, 더욱 세심하고 몰입감 있는 디지털 경험을 만드는 것이 핵심이라는 글을 보았다. 큰 프로젝트가 아니라서 사용자 이해를 기반으로 한 깊이 있는 UX는 구현하지 못했지만, 호버 애니메이션을 통해 변화를 주려고 노력했다.

전체적으로 부드럽고 깔끔한 느낌을 사용자에게 주고 싶어서 그러한 디자인을 하려고 노력했다. 디자인 레퍼런스를 찾아보던 중, 배경에 블러 효과를 주면 깊이감 있고, 풍부한 배경을 만들어 콘텐츠를 더욱 돋보이게 해준다는 글을 보게 되어 나중에 추가해야겠다고 생각했다. (레퍼런스: https://codeart.mk/)

컴포넌트, 프레임 설계를 고려한 디자인 기획하기

디자인 단계에서 단순히 UI 뿐만 아니라, 효율적인 컴포넌트 분리와 프레임 설계를 고려한 디자인을 하는 것이 중요하다는 점을 느꼈다. 초기 피그마에서 디자인 작업을 하는 과정에는 고려하지 못했었는데, 개발 초기 과정에서 디자인대로 구현하기 위해 프레임 설계가 모호했던 부분을 구현하는 과정에서 약간의 어려움을 겪었었다.

효율적으로 컴포넌트 분리를 하면 코드 재사용성을 높이고, 유지보수를 편리하게 한다. 특히 반복적으로 사용하는 UI요소들이 많을수록, 초기 단계에서 이를 체계적으로 설계하는 것이 얼마나 중요한지 깨달았다.

이번 프로젝트를 통해 프론트엔드 개발과 디자인은 서로 긴밀히 연결되어 있다는 점을 다시 한번 깨닫게 되었다. 앞으로 진행할 프로젝트를 위해 컴포넌트 분해 기준과 리액트 프레임 워크의 특성을 공부하려고 한다.

배포

Vercel을 사용해 프로젝트를 배포했다. Vercel을 선택한 이유는 배포 과정이 간단하고 깃허브에 커밋만 하면 배포한 url을 통해 수정사항을 바로 확인할 수 있어 편리했기 때문이다.
배포를 완료한 후에는 모바일, PC화면을 통해 다양한 화면 크기에서 사이트가 깨지지않고 정상적으로 작동하는지 확인했다. 또한, Lighthouse를 사용해 성능과 접근성을 점검했다.

Lighthouse

Lighthouse를 통해 성능, 접근성, SEO, Best Practices를 점검해 사이트 품질을 확인했다. 특히 접근성과 SEO에서 더 개선할 부분을 알게 되어 마이그레이션 과정에서 반영할 계획이다.

👩🏻‍💻 개인 프로젝트를 진행하면서 배운 점을 통해 앞으로 진행할 프로젝트에서 반영하며 좋은 팀원이 되도록 최선을 다해야겠다.