← 포트폴리오 목록
예술심리 프리미엄 브랜드 사이트·러닝 플랫폼
미술치료·심리상담을 제공하는 하이엔드 브랜드의 에디토리얼 프론트엔드와 LearnDash 기반 러닝 센터, Vimeo 연동 수강실, WooCommerce 결제를 WordPress 커스텀 테마로 통합 구현한 프로젝트입니다.
스크롤 기반 에디토리얼 인터랙션 구조 설계GSAP ScrollTrigger로 5개 섹션의 페이드·패럴랙스 전환을 구현하고 ACF Flexible Content로 블록 순서를 관리자에서 제어 가능하게 설계
LearnDash 커리큘럼 트리 UI 구현코스·레슨·토픽 3단 구조를 트리 UI로 시각화하고 WP REST API 커스텀 엔드포인트로 카테고리·난이도 필터링 처리
Vimeo 이어보기·수료증 자동화 구현Player API 재생 위치 추적과 LearnDash 진도율 훅을 연동해 이수 완료 시 PDF 수료증을 자동 생성하는 로직 구현
Overview
프로젝트 개요
미술치료·심리상담을 제공하는 하이엔드 브랜드의 에디토리얼 프론트엔드와 LearnDash 기반 러닝 센터, Vimeo 연동 수강실, WooCommerce 결제를 WordPress 커스텀 테마로 통합 구현한 프로젝트입니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
하이엔드 에디토리얼 톤을 유지하면서 LearnDash·WooCommerce 기본 UI를 브랜드 스타일로 커스터마이징하는 CSS 오버라이드 범위 설계
Vimeo 프라이빗 임베드의 도메인 화이트리스트 설정과 LearnDash 진도율 훅 연동 타이밍 동기화
고해상도 이미지·영상이 많은 페이지의 초기 로딩 구조를 유지하기 위한 lazy-loading·srcset 전략 설계
국내 PG 결제 연동 시 WooCommerce 체크아웃 필드와 결제 위젯 간 트랜잭션 상태 동기화 처리
핵심 기능 1
브랜드 스토리 홈
미술치료와 웰니스가 결합된 브랜드 철학을 절제된 스크롤 인터랙션과 대형 세리프 타이포로 전달하는 첫 화면을 구현합니다
핵심 기능 2
러닝 센터
개인/기업 프로그램과 온라인 강의를 카테고리·트리 구조로 탐색할 수 있는 강의 카탈로그 및 커리큘럼 상세 페이지를 구현합니다
핵심 기능 3
수강실
Vimeo 동영상 플레이어를 연동한 수강실에서 이어보기, 진도율 트래킹, 수료증 자동 발급을 지원합니다
핵심 기능 4
마이페이지
결제 내역, 수강 중인 강의 목록과 진도율, 프로필 관리를 한 화면에서 확인할 수 있는 마이페이지를 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
브랜드 정보구조 및 워드프레스 테마 설계
메인/철학/프로그램 정보구조 정의, 커스텀 포스트 타입 및 ACF 필드 그룹 설계
STEP 2
LMS·결제 플러그인 통합 개발
LearnDash 코스 구조 확장, WooCommerce 체크아웃 커스터마이징, Vimeo Player API 연동
STEP 3
프론트엔드 인터랙션 및 반응형 퍼블리싱
GSAP 스크롤 인터랙션 구현, 3개 뷰포트 반응형 퍼블리싱, 크로스 브라우징 검증
STEP 4
통합 테스트 및 성능 최적화
결제-수강 데이터 흐름 통합 테스트, 이미지 lazy-loading 및 로딩 구조 최적화
프로젝트 성과
스크롤 기반 에디토리얼 인터랙션 구조 설계GSAP ScrollTrigger로 5개 섹션의 페이드·패럴랙스 전환을 구현하고 ACF Flexible Content로 블록 순서를 관리자에서 제어 가능하게 설계
LearnDash 커리큘럼 트리 UI 구현코스·레슨·토픽 3단 구조를 트리 UI로 시각화하고 WP REST API 커스텀 엔드포인트로 카테고리·난이도 필터링 처리
Vimeo 이어보기·수료증 자동화 구현Player API 재생 위치 추적과 LearnDash 진도율 훅을 연동해 이수 완료 시 PDF 수료증을 자동 생성하는 로직 구현
WooCommerce 국내 PG 결제 흐름 구현체크아웃 커스텀 필드와 PG 위젯을 연동해 신용카드·가상계좌 결제와 주문-수강 데이터 조인 구조 설계
Review
기술적 주안점
- 세리프 대형 타이포(90/64/44px)와 웜 피치 단일 액센트로 구성된 스크롤 기반 브랜드 스토리텔링 구조를 WordPress 커스텀 테마로 구현합니다
- LearnDash 코스 구조를 그대로 활용하면서 커스텀 트리 UI와 필터링 API를 추가해 하이엔드 브랜드 톤에 맞는 강의 카탈로그를 구현합니다
- Vimeo 프라이빗 임베드와 LearnDash 진도율 데이터를 결합해 이어보기부터 수료증 발급까지 이어지는 학습 흐름을 구현합니다
