← 포트폴리오 목록
웹툰 퍼블리셔 쇼케이스 홈페이지
웹툰·단행본 출판사의 공개 홈페이지를 워드프레스 (커스텀 테마) 요구사항에 대응해 React 기반 SPA로 동등 구현하는 프로젝트입니다.
CSS 전용 인트로 시퀀스 설계keyframes 기반 다단계 시퀀스와 세션 스킵 로직을 설계해 별도 애니메이션 라이브러리 없이 오프닝 연출 구현
작품 유형별 정렬 로직 분리 설계WEBTOON 최신순·PUBLICATION 가나다순을 커스텀 훅으로 분리해 하나의 갤러리 컴포넌트가 두 정책을 동시 지원
데이터 기반 조건부 버튼 스키마 구축버튼 노출·문구·URL·새 창 여부를 스키마로 정의해 코드 수정 없이 콘텐츠별 CTA 구성 가능하도록 설계
Overview
프로젝트 개요
웹툰·단행본 출판사의 공개 홈페이지를 워드프레스 (커스텀 테마) 요구사항에 대응해 React 기반 SPA로 동등 구현하는 프로젝트입니다. 인트로 애니메이션, WORKS/NEWS 반응형 화면, 조건부 노출 링크버튼을 직접 구현하며, 추후 비개발자 운영자를 위한 CMS 관리자 환경과 콘텐츠 관리 확장을 고려한 컴포넌트 구조로 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
제공 시안·소스를 워드프레스 구조에서 React 컴포넌트 구조로 재해석할 때 인트로 애니메이션 타이밍 오차 리스크
keyframe 타임라인 수치를 그대로 이식해 대응합니다
웹툰 키비주얼(480×623)과 단행본 표지(145×200)처럼 콘텐츠 타입별 이미지 비율이 달라 레이아웃 붕괴 리스크
aspect-ratio CSS와 반응형 이미지 컴포넌트로 대응합니다
JOIN US 소식 존재 여부에 따라 메인 홈 CTA가 실시간으로 전환돼야 해 콘텐츠 상태와 UI 상태 동기화 리스크
파생 상태(computed state) 패턴으로 대응합니다
핵심 기능 1
인트로 애니메이션 홈
CSS 기반 인트로 애니메이션과 함께 시작하는 메인 홈페이지를 구현하며, 스크롤 시 상단 메뉴바가 sticky로 고정되고 히어로 영역에 최신 작품·소식을 노출합니다
핵심 기능 2
WORKS 작품 갤러리
웹툰·단행본 작품을 카드 갤러리로 노출하며, WEBTOON은 최신순, PUBLICATION은 가나다순으로 정렬하고 클릭 시 작품소개 상세로 이동합니다
핵심 기능 3
NEWS 카테고리 필터
NEWS 목록에서 WEBTOON/PUBLICATION/JOIN US 카테고리를 즉시 필터링하고, 각 글마다 최대 2개의 조건부 링크버튼(작품 보러가기/구매하기/지원서 다운로드)을 노출합니다
핵심 기능 4
ABOUT 브랜드 소개
브랜드 소개와 채용(JOIN US) 안내를 담은 ABOUT 화면을 구현하며, 860px 이하 모바일 환경에서 상단 메뉴가 햄버거 메뉴로 전환되는 반응형 내비게이션을 적용합니다
구현 과정
프로젝트 진행 단계
STEP 1
제공 시안 분석 및 디자인 토큰 정의
UI 시안과 인트로 애니메이션 타이밍을 분석해 Pretendard 기반 타입 스케일과 컬러 토큰 7종을 정의
STEP 2
인트로 애니메이션 & 홈페이지 퍼블리싱
CSS keyframes 인트로 시퀀스와 sticky 내비게이션을 포함한 메인 홈페이지 화면 구현
STEP 3
WORKS/NEWS 콘텐츠 화면 구현
작품 갤러리, 상세 화면, NEWS 필터·조건부 링크버튼 등 콘텐츠 화면 12개 구현
STEP 4
반응형 대응 및 크로스 브라우저 검증
860px 브레이크포인트 기준 모바일 햄버거 메뉴 적용, 주요 브라우저 3종 크로스 검증
프로젝트 성과
CSS 전용 인트로 시퀀스 설계keyframes 기반 다단계 시퀀스와 세션 스킵 로직을 설계해 별도 애니메이션 라이브러리 없이 오프닝 연출 구현
작품 유형별 정렬 로직 분리 설계WEBTOON 최신순·PUBLICATION 가나다순을 커스텀 훅으로 분리해 하나의 갤러리 컴포넌트가 두 정책을 동시 지원
데이터 기반 조건부 버튼 스키마 구축버튼 노출·문구·URL·새 창 여부를 스키마로 정의해 코드 수정 없이 콘텐츠별 CTA 구성 가능하도록 설계
Review
기술적 주안점
- 브랜드 오프닝 시퀀스를 CSS 애니메이션만으로 구현해 별도 라이브러리 의존 없이 가벼운 로딩 구조를 설계합니다
- 작품 유형별로 다른 정렬·규격 요구사항을 하나의 갤러리 컴포넌트에서 props 기반으로 분기 처리하는 구조를 설계합니다
- 버튼 설정을 데이터 기반 스키마로 분리해, 관리자가 코드 수정 없이 노출 여부와 문구를 제어할 수 있는 구조를 설계합니다
