요금제 디자인 인터랙션 9종 — 토글부터 결제 버튼까지
요금제 디자인에서 실제로 일하는 건 카드 모양이 아니라 그 위에서 벌어지는 인터랙션입니다. 아홉 개 전부 라이브러리 없이 바닐라 JS와 SCSS로만 돌아가고, 첫 번째는 결제 주기를 바꿀 때 숫자가 진짜 바뀌는 그
읽기랜딩 섹션
요금제 디자인에서 실제로 일하는 건 카드 모양이 아니라 그 위에서 벌어지는 인터랙션입니다. 아홉 개 전부 라이브러리 없이 바닐라 JS와 SCSS로만 돌아가고, 첫 번째는 결제 주기를 바꿀 때 숫자가 진짜 바뀌는 그
읽기프로필 카드 디자인은 아바타·이름·직함·소셜 스탯·팔로우 버튼이라는 한 덩어리를 어떤 재질로 보여줄지 정하는 일입니다. 아홉 개는 그 안쪽 구조가 전부 같고, 바깥 재질과 움직임만 다릅니다.
랜딩 페이지 섹션 템플릿은 통계·로고 바·비교표부터 문의 폼까지, 랜딩 페이지 여기저기 흩어져 있던 신뢰 요소를 한 번에 붙일 수 있게 모은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 아홉 개 중 하나는 숫자가 실
프로모션 페이지 섹션 템플릿은 카운트다운 히어로부터 신청 폼까지 캠페인 랜딩에 필요한 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 아홉 개 중 하나는 실제 목표 시각까지 매초 줄어드는 카운트
프로젝트 포트폴리오 템플릿은 그리드·케이스 스터디·경력·연락 폼 같은 개인 포트폴리오 페이지 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 히어로부터 쇼케이스 푸터까지, 아홉 개 중 하나는 탭
미디어·프레스룸 섹션 템플릿은 보도자료·미디어 키트·연락처 같은 언론보도 페이지 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 히어로부터 구독 푸터까지, 아홉 개 중 하나는 클립보드로 실제 이
이벤트 페이지 템플릿은 컨퍼런스·밋업 랜딩 페이지에 바로 붙이는 히어로·일정·연사·가격 같은 섹션을 통째로 담은 코드 모음입니다. 아홉 개 중 하나는 실제 목표 시각까지 초 단위로 줄어드는 카운트다운을 담았습니다.