이소진의 포트폴리오
디자인 |
포트폴리오 사이트 개발
최근수정일: 2025. 12. 09
project thumbnail
역할
기획·디자인, 프론트엔드 개발, CMS 연동 및 배포
기여
SSR+Headless CMS 기반 웹사이트 개발, 콘텐츠 구조를 Portable Text 기반으로 모듈화
기간
2024. 08 - 2024. 09 (2개월)
기술
Next.js, TypeScript, Tailwind CSS, Sanity, Figma, Adobe Photoshop, Adobe Illustrator
Next.js
TypeScript
Tailwind CSS
Sanity
Figma
Adobe Photoshop
Adobe Illustrator
프로젝트 개요
목적과 배경
템플릿에 의존하지 않고, 원하는 데이터 구조·표현 방식을 직접 구현한 포트폴리오 웹사이트입니다.
프로젝트/학습 이력을 관리하면서 수학 수식·코드 블록 같은 학습 자료도 표현할 수 있도록 설계했습니다.
🔗 Github 바로가기 (클릭)
주요 기능
  • 프로젝트/학습 이력 조회 (페이징·검색)
  • Portable Text 내 수학 수식(Katex), 코드 블록 등 렌더링
  • 임베디드 Sanity CMS 기반 실시간 콘텐츠 관리
역할과 책임
기획
  • 기능·비기능 요구사항 정의
  • IA 구조도 및 CMS 데이터 스키마 설계
본문 이미지
UI/UX 디자인
  • Material Design 기반 프로토타입 제작
  • 반응형 디자인, 웹 접근성 고려
  • 로고 제작 (‘ㅅㅈ’ 초성 활용)
프론트엔드 개발
  • Next.js SSR 구조 설계 → 초기 로딩 속도 및 SEO 개선
  • TypeScript로 쿼리 안정성 확보
CMS 연동 및 API 개발
  • Sanity CMS + GROQ 쿼리로 Headless 구조 구축
  • PortableText 기반 콘텐츠 모듈화 및 커스터마이징
  • Sanity를 Next 앱에 임베드 → 실시간 수정 가능
문제와 해결 과정
콘텐츠 유연성 - Portable Text
  • 문제: 프로젝트마다 강조 포인트·항목이 달라 고정 필드 구조로는 부족
  • 해결: Portable Text 도입 → JSON 배열로 저장 후 컴포넌트 단위 조합
  • 결과: 다양한 포맷을 일관된 UI로 표현 가능
반응형 UI/UX
  • 문제: 정보성 사이트라 UI 가독성이 중요함
  • 해결: Tailwind breakpoints 세분화, UX 흐름 단순화
  • 결과: PC/모바일 환경 모두에서 일관된 사용자 경험 제공
성과와 배운 점
기술적 성장
  • Next.js·TypeScript·Tailwind CSS 전 과정 경험
  • Portable Text 활용해 확장성 있는 콘텐츠 구조 설계 경험
  • CMS 기반 운영 → 코드 수정 없는 실시간 데이터 갱신 경험
개발적 철학과 인사이트
  • 확장 가능한 구조 설계가 곧 미래 콘텐츠의 수용력이라는 깨달음
스크린샷
screenshot-thumbnail
screenshot-0
screenshot-1
screenshot-2
screenshot-3