플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 제공 시안·소스를 워드프레스 구조에서 React 컴포넌트 구조로 재해석할 때 인트로 애니메이션 타이밍 오차 리스크가 있으며, keyframe 타임라인 수치를 그대로 이식해 대응할 계획입니다. - 웹툰 키비주얼(480×623)과 단행본 표지(145×200)처럼 콘텐츠 타입별 이미지 비율이 달라 레이아웃 붕괴 리스크가 있으며, aspect-ratio CSS와 반응형 이미지
프로젝트 성과
CSS 전용 인트로 시퀀스 설계
keyframes 기반 다단계 시퀀스와 세션 스킵 로직을 설계해 별도 애니메이션 라이브러리 없이 오프닝 연출 구현
작품 유형별 정렬 로직 분리 설계
WEBTOON 최신순·PUBLICATION 가나다순을 커스텀 훅으로 분리해 하나의 갤러리 컴포넌트가 두 정책을 동시 지원
데이터 기반 조건부 버튼 스키마 구축
버튼 노출·문구·URL·새 창 여부를 스키마로 정의해 코드 수정 없이 콘텐츠별 CTA 구성 가능하도록 설계
핵심 기능
인트로 애니메이션 홈
CSS 기반 인트로 애니메이션과 함께 시작하는 메인 홈페이지를 구현하며, 스크롤 시 상단 메뉴바가 sticky로 고정되고 히어로 영역에 최신 작품·소식을 노출합니다
진행 단계
제공 시안 분석 및 디자인 토큰 정의
2026.07
UI 시안과 인트로 애니메이션 타이밍을 분석해 Pretendard 기반 타입 스케일과 컬러 토큰 7종을 정의
프로젝트 상세
1) 포트폴리오 소개 웹툰·단행본 출판사의 공개 홈페이지를 워드프레스 (커스텀 테마) 요구사항에 대응해 React 기반 SPA로 동등 구현하는 맞춤 데모입니다. 인트로 애니메이션, WORKS/NEWS 반응형 화면, 조건부 노출 링크버튼을 직접 구현하며, 추후 비개발자 운영자를 위한 CMS 관리자 환경과 콘텐츠 관리 확장을 고려한 컴포넌트 구조로 설계합니다. 2) 작업 범위 - 인트로 애니메이션 홈:
