Clein's Portfolio
| 이름 | Clein's Portfolio |
|---|---|
| 설명 | Next.js 기반 개인 포트폴리오 사이트 |
| 유형 | 개인 프로젝트 |
| 기간 | 2024.12 ~ 운영 중 |
| 도메인 | https://clein-dev.com |
| GitHub | https://github.com/LC-02s/Project-Clein |
| 사용 기술 |
|
| 관련 포스트 |
목차
프로젝트 소개
소개 랜딩페이지, 이력서, 블로그, 참여했던 프로젝트 모음 등의 내용으로 구성된 Next.js 기반 개인 포트폴리오 사이트 프로젝트입니다. 디자이너 시절부터 가지고 싶었던 제 작업물들을 모아두는 사이트와 함께 블로그 및 이력서를 포함하는 저의 모든 포트폴리오들을 한 곳에 정리해두고 편하게 보여주기 위해 만들게 되었습니다.
정보 구조도
| 작업 단위 | 기능 및 구성 | 상세 내용 | |
|---|---|---|---|
| 메인 랜딩 페이지 | 사이트 키 비주얼 | ||
| 간단 소개 및 비전 | Reveal 애니메이션 효과 | ||
| 선호 기술 Scroll Parallax UI | Framer Motion 활용 (참조) | ||
이메일 또는 디스코드 기반 contact 기능 | (기획 중, 추후 구현 예정) | ||
| 공통 레이아웃 | 헤더 | 로고 및 사이트 네비게이션 | 클릭 시 해당하는 페이지 이동 |
| 통합 검색창 | 단축키 및 키보드 접근성 지원 | ||
| 블로그 및 프로젝트 소개글 키워드 검색 가능 | |||
| 테마 변경 드롭다운 | Flicker 현상 X, 테마 동기화 지원 (참조) | ||
| 푸터 | 로고 및 사이트 네비게이션 | 클릭 시 해당하는 페이지 이동 | |
| Buy Me a Coffee | Toss 송금 QR 코드 활용 | ||
| 이메일 및 연관 링크 | 이메일 클립보드 복사 가능 | ||
| 카피라이트 출력 | |||
| About 페이지 | 개발자 소개 | (추가 예정) | |
| 사용 기술 | (추가 예정) | ||
| 프로젝트 경험 | (추가 예정) | ||
| 업무 경험 | (추가 예정) | ||
| 대외 활동 | (추가 예정) | ||
| 자격증 | (추가 예정) | ||
| 관심사 | (추가 예정) | ||
| Blog 페이지 | 리스트 뷰 | 개발자 약식 프로필 | 이름, 소개글, GitHub 링크, 이메일 구성 |
| 블로그 글 정렬 방식 변경 드롭다운 | 옵션 클릭 시 블로그 정렬 방식 변경 | ||
| 블로그 목록 출력 | 썸네일, 제목, 설명, 날짜, 분량 구성 | ||
| 썸네일 동적 생성 가능 (템플릿 형식) | |||
| 페이지네이션 적용 | |||
| 클릭 시 블로그 상세 뷰 이동 | |||
| 키워드 별 조회 기능 | 태그, 시리즈, 프로젝트 구성 | ||
| 클릭 시 키워드 별 블로그 리스트 뷰 이동 | |||
| 상세 뷰 | 블로그 상세 정보 출력 | 제목, 설명, 작성자 정보, 생성 및 수정 날짜, 분량, 썸네일 구성 | |
| 블로그 공유 기능 | 링크 클립보드 복사 가능 | ||
| Share API 활용 네이티브 공유 가능 | |||
| 블로그 내용 출력 | 마크다운 형식 및 MDX Parser 활용 | ||
| 관련 키워드 출력 | 클릭 시 관련 키워드 별 리스트 뷰 이동 | ||
| 이전 및 다음 블로그 글 출력 | 클릭 시 해당하는 블로그 상세 뷰 이동 | ||
| 댓글 출력 및 작성 기능 | GitHub OAuth 기반 (Giscus 활용) | ||
| Project 페이지 | 리스트 뷰 | 프로젝트 목록 출력 | 썸네일, 제목, 설명, 기간, 유형, GitHub 링크, 도메인 주소 구성 |
| Reveal 애니메이션 효과 | |||
| 상세 뷰 | 소개글 개요 출력 | 썸네일, 제목, 설명, 기간, 유형, GitHub 링크, 도메인 주소, 역할, 사용 기술, 기여 구성 | |
| 소개글 내용 출력 | 마크다운 형식 및 MDX Parser 활용 | ||
| 컨텐츠 매핑 기능 적용 | |||
| Playground 페이지 | 커스텀 키보드 모음집 | (추가 예정) | |
| 디자인 작업물 박제관 | (추가 예정) | ||
사용 기술
포트폴리오 사이트에 사용된 기술과 사용한 이유입니다.
Next.js
- 컨텐츠를 보여주는 것에 특화된 사이트를 구축함에 있어 사용자 경험을 고려하여
SSR방식을 선택했고, 이를 쉽게 구현하기 위해 도입하였습니다. - 프로젝트 초기 부터 리소스 관리를 통한 운영 비용 절감을 고려하였기에, 만약 백엔드 로직이 필요한 경우가 생기더라도 내부에서
Route Handler를 통해 처리하여 서버 1개만으로 모든 것을 관리할 수 있는 점도 매력적이었습니다.
TypeScript
- 예상하지 못한 런타임 에러를 미연에 방지하여 사이트의 안정성을 보장하기 위해 도입하였습니다.
- Next.js와 연계하여 API에 대한 요청 및 응답 스키마를 통합하여 관리할 수 있었습니다.
Zustand
overlay요소나 반응형breakpoint, 다크 모드 같이 사이트를 구성하는 UI를 만드는데 필요한 최소한의 전역 상태관리에 사용하기 위해 도입하였습니다.- 개인적으로
Redux는 보일러플레이트 코드가 아쉽고,Context API는 최적화하기 번거로워 전역 상태관리에는 부적합하다고 생각합니다.
Tanstack Query
- Next.js의 서버 컴포넌트와
fetch조합만으로 구현하기에는 아쉬운 클라이언트에서 실행되는 UI 로직 내부에서의 서버 상태관리를 위해 도입하게 되었습니다.
TailWindCSS
- 스타일을 작성함에 있어 클래스 또는 변수 작명에 신경을 쓰지 않아도 된다는 점과, 마크업과 스타일을 이동하는 컨텍스트 스위칭을 없앨 수 있다는 점이 마음에 들어 도입하게 되었습니다.
tailwind-merge와class-variance-authority등의 라이브러리를 함께 조합하여 컴포넌트 재사용성과 타입 안정성을 높일 수 있었습니다.
Motion
- 특별한 처리 없이도 컴포넌트 라이프 사이클에 맞춰 손쉽게 애니메이션을 구현할 수 있는 DX를 제공한다는 점이 매력적이었습니다.
- 일반적인 UI에 더불어 Scroll Parallax UI를 구현하는 데에도 사용할 수 있었습니다.
MDX
mdx언어를 사용하지는 않았지만 마크다운 문서를 편하게 파싱하기 위한 용도로 사용하기 위해next-mdx-remote패키지를 도입하였습니다.- 마크다운 문서에
HTML문법을 사용할 시 올바르게 파싱되지 않는 문제가 있어 정규 표현식을 활용한 전처리 로직을 추가하였습니다.
pnpm
- 배포 파이프라인에서의 빌드 속도와 로컬 환경에서의 패키지 용량 관리를 위해 도입하였습니다.
인사이트
해당 프로젝트에서는 처음으로 검색 엔진 최적화를 시도해 보았습니다. 검색 엔진 최적화를 진행하며 얻었던 가장 큰 인사이트는 기술적인 부분 만큼이나 컨텐츠의 설계가 중요하다는 점이었습니다. 초기에는 메타 태그, Open Graph, 정적 페이지 생성 같은 기술적 요소에 집중했지만, 구글 서치 콘솔을 활용하여 크롤링 오류나 검색 노출 상태를 주기적으로 점검하며 추론해본 결과 실제 검색 노출에 영향을 준 요인은 페이지 간 명확한 계층 구조와 검색 의도에 맞는 키워드 중심의 컨텐츠라는 점을 알 수 있었습니다. 앞으로도 검색 엔진 최적화가 중요한 작업을 할 때에는 접근성을 고려한 좋은 컨텐츠 자체를 만드는 것에 집중해 볼 예정이며, 검색 노출에만 그치지 않고 이탈률에 큰 영향을 주는 UX적인 측면인 페이지 로딩 속도 개선, Web Vitals 지표 향상, 정적 자원 최적화 등 퍼포먼스 측면에서도 꾸준히 다듬어갈 생각입니다.