프로젝트 목록
이벤트 / 캠페인STANDARD

LP 청첩장

회전하는 LP 디스크와 A/B면 트랙리스트로 청첩장을 음반 한 장처럼 풀어낸 빈티지 청첩장

HTML5CSS3SCSSVanilla TSAntic DidoneCSS animation
카테고리
이벤트 / 캠페인
패키지 등급
STANDARD
업종
결혼식 / 청첩장
작업 기간
1주
데모 보기새 탭에서 열기이런 사이트 문의하기

프로젝트 개요

다크 블랙과 크림 + 빈티지 골드/레드로 LP 음반 같은 청첩장을 만들었습니다. 시그니처는 히어로의 회전하는 LP 디스크 — CSS infinite spin으로 18초 한 사이클씩 돌고, 가운데 spindle hole까지 디테일을 살렸습니다. A면(Save the Date / How We Met / First Dance...)과 B면(Promise / Walking Home / The Ceremony...) 5트랙씩 가상 곡명으로 청첩장 정보를 표현하고, Antic Didone 세리프와 JetBrains Mono를 결합해 LP 슬리브 인쇄물 같은 톤을 냈습니다. 6 섹션을 단일 라우트에 담았습니다.

핵심 구현 포인트

1

회전하는 LP 디스크 (시그니처)

히어로에 LP 디스크 + 앨범 슬리브 더블 레이어. 디스크는 CSS @keyframes로 18초 한 사이클씩 무한 회전, 가운데 spindle hole과 깊은 그림자로 실제 LP 같은 입체감을 만들었습니다. prefers-reduced-motion 시 정지.

2

A면 / B면 트랙리스트

Side A 5곡(Save the Date, How We Met, First Dance...) + Side B 5곡(Promise, Walking Home, The Ceremony...)으로 청첩장의 모든 정보를 가상 곡명과 러닝타임으로 표현했습니다.

3

Liner Notes 카드

LP 슬리브 안쪽에 적힌 짧은 글처럼, 골드 이탤릭 인용구와 본문 두 단락으로 인사글을 매거진 톤으로 풀어냈습니다.

4

B-Roll 갤러리 (턴테이블/카세트/헤드폰)

음악 감성 사물 3컷을 sepia 필터와 함께 바이올린 같은 카드 그리드로 배치. 각 카드엔 № 01~03 모노스페이스 라벨이 들어갑니다.

5

Release Party 정보 + 골드 카운트다운

결혼식을 'Release Party'로 표현. 골드 보더 인포 카드 + 시네마틱 카운트다운 + sepia 카카오맵으로 빈티지 톤을 끝까지 유지합니다.

라이브 데모

이런 사이트가 필요하신가요?

크몽을 통해 안전하게 의뢰해주세요.

크몽에서 문의하기