Kunnworks
D07웹·브랜드

콘텐츠 직접 수정형 애니메이션 포트폴리오 CMS

포트폴리오 운영자를 위한 쿤웍스의 콘텐츠 직접 수정형 애니메이션 포트폴리오 CMS 제품 사례. 콘텐츠 변경마다 화면 코드를 수정하는 운영 부담을 핵심 검토 과제로 설정.

프로젝트 범위
제품 사례
기술·작업 구성
React, TypeScript, Firebase Auth, Firestore, Framer Motion, Lenis
핵심 기능 살펴보기
콘텐츠 직접 수정형 애니메이션 포트폴리오 CMS
D07 / PROJECT COVER제품 사례
01 프로젝트 배경

문제와 접근 방식

관리자 인증과 콘텐츠 편집 탭을 Firebase에 연결하고 공개 화면의 콘텐츠 갱신 및 스크롤 애니메이션을 결합한 포트폴리오 구조 구현. 관리자 인증과 콘텐츠 편집, 공개 화면의 갱신을 연결한 CMS 구성.

02 핵심 기능

화면으로 보는 핵심 기능

01 / 04

관리자 콘텐츠 편집

운영자를 위한 관리자 인증과 콘텐츠별 편집 탭으로 정보 수정 흐름 구성

관리자 콘텐츠 편집 — 운영자를 위한 관리자 인증과 콘텐츠별 편집 탭으로 정보 수정 흐름 구성
관리자 콘텐츠 편집이미지 크게 보기 (새 탭)
03 / 04

스크롤 애니메이션

방문자를 위한 경력·소개 콘텐츠의 움직임과 부드러운 스크롤 탐색 경험 구현

스크롤 애니메이션 — 방문자를 위한 경력·소개 콘텐츠의 움직임과 부드러운 스크롤 탐색 경험 구현
스크롤 애니메이션이미지 크게 보기 (새 탭)
03 상세 화면·설계

구조와 설계의 연결

프로젝트의 정보 구조와 화면 구성, 설계 기준을 한눈에 살펴보세요

프로젝트 상세 보드 — 콘텐츠 직접 수정형 애니메이션 포트폴리오 CMS
프로젝트 상세 보드이미지 크게 보기 (새 탭)
04 이용 흐름

사용자의 다음 행동까지

진입부터 다음 작업까지 이어지는 이용 순서와 역할을 정리했습니다

프로젝트 이용 흐름 — 콘텐츠 직접 수정형 애니메이션 포트폴리오 CMS
프로젝트 이용 흐름이미지 크게 보기 (새 탭)