GODRICH

청량한 디자인 랜딩 UI 키트, 시트러스 컬러 섹션 9개

· Godrich · 9종 · 9분 읽기

디자인 트렌드페이지 템플릿CSS만랜딩 페이지가격표CTA 버튼

청량한 디자인은 오렌지·라임·자몽·레몬처럼 채도 높은 과일 색을 크림 바탕 위에 얹고, 카드마다 같은 계열의 진한 색 그림자를 드리워 파스텔보다 더 쨍하고 여름 음료 브랜드처럼 싱그럽게 보이게 만드는 스타일입니다.

핀터레스트에 스크린샷으로만 저장해 두던 스무디·주스 브랜드 화면을 실제로 만든 원페이지로 아래에 그대로 올렸습니다. 맨 위 내비 바부터 맨 아래 웨이브 푸터까지 직접 펼쳐 놓았으니 통째로 훑어보세요.

새 창에서 원페이지 열기

이 원페이지를 만드는 조각 아홉 개를 낱개로 떼어내 아래 격자에 다시 펼쳤습니다. 방문자 눈이 실제로 움직이는 차례 — 시선을 끌기, 둘러보기, 가격 확인, 신뢰, 행동 유도, 가입 — 을 그대로 따랐습니다. 그중 다섯(히어로·카드 격자·기능 목록·CTA 밴드·푸터)은 물방울 모양과 색 그림자가 파스텔과 갈라지는 지점을 애니메이션으로 직접 보여줍니다.

01 hero-citrus 02 nav-citrus 03 card-grid-citrus 04 feature-list-citrus 05 pricing-citrus 06 testimonial-citrus 07 cta-band-citrus 08 footer-citrus 09 buttons-inputs-citrus

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

이 키트 전체의 색은 아홉 개로 끝납니다. 카드 표면에 올리는 톤과 그림자·그라디언트 전용 진한 톤을 나눈 것이 파스텔 캔디 계열과 다른 점입니다.

역할 색 대비(잉크 기준) 쓰는 곳
크림 #fffaf0 9.83:1 페이지 바탕 전체
오렌지(카드) #ff9a52 4.87:1 히어로 배지·카드
라임(카드) #c8e84a 7.35:1 카드·인풋 링
자몽(카드) #ff8fa3 4.73:1 카드·말풍선
레몬(카드) #ffe066 7.84:1 카드·요금제
오렌지(진한) #ff6a00 3.56:1 그림자·그라디언트·버튼 배경 전용
잉크 #204a17 — 모든 글자 (흰 배경 대비 10.23:1)

01쥬스 스플래시 히어로

크림 바탕 위에 오렌지·라임·자몽 세 개의 물방울(비대칭 반경을 45도 돌린 모양)이 튀어 오르며 자리를 바꾸고, 그 앞의 흰 카드가 방울이 튈 때마다 살짝 눌렸다 뜹니다. 안개처럼 흐린 원이 아니라 또렷한 물방울을 쓴 것이 이 스타일이 파스텔 안개 히어로와 갈라지는 지점입니다.

3색 드롭 바운스색 그림자radius 16
.drop::before {
  content: "";
  width: 100%; height: 100%;
  border-radius: 50% 50% 50% 4px;  /* 물방울 모양 */
  transform: rotate(45deg);
}
@keyframes dropA {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%      { transform: translate(8%, -10%) scale(1.15) rotate(-8deg); }
}

02슬라이스 인디케이터 내비

알약 메뉴에서 활성 탭을 알려주는 라임색 웨지가 옆 칸으로 옮겨 갈 때 가로로 늘어났다가 도착하며 탄력 있게 줄어듭니다. 칸 폭이 트랙의 4분의 1에서 좌측 여백 4px를 뺀 값이라 translateX도 그만큼 보정해야 밀리지 않습니다.

scaleY 스쿼시translateX 이동radius pill
.wedge {
  width: calc(25% - 4px);
  animation: wedgeWalk 2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes wedgeWalk {
  0%, 24%  { transform: translateX(0) scaleY(1); }
  36%, 49% { transform: translateX(calc(100% + 4px)) scaleY(1); }
}

03웨지 배지 카드 격자

카드마다 오렌지·라임·자몽·레몬 저마다 다른 톤에 같은 색으로 물든 그림자를 얹고, 모서리에는 과일 조각 모양 배지가 붙습니다. 네 카드가 시작 시각을 4분의 1주기씩 어긋내 순서대로 톡톡 튀어 오릅니다.

색별 그림자웨지 배지2열→1열
.card { animation: cardPop 2s cubic-bezier(.2,.8,.2,1) infinite; }
.card--lim { background: #c8e84a; animation-delay: -500ms; }
@keyframes cardPop {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-8px) scale(1.02); }
}

04스퀴즈 드롭 아이콘 목록

행마다 흰 알약 카드가 있고 그 안의 동그란 아이콘은 repeating-conic-gradient로 그린 과육 무늬입니다. 아이콘마다 시작 시각을 어긋내 놓으면 방울이 각자 다른 박자로 눌렸다 튑니다. 아이콘 하나만 바뀌는 항목이라 누적면적이 2.4%로 아홉 개 중 가장 작습니다 — 그래도 강도는 56.4로 잉크 대비만큼 또렷합니다.

radial 과육 무늬어긋난 바운스radius pill
.drop {
  background: repeating-conic-gradient(#ff9a52 0deg 45deg, #ffe066 45deg 90deg);
  animation: dropSqueeze 2s cubic-bezier(.2,1.4,.4,1) infinite;
}
@keyframes dropSqueeze {
  0%, 40%, 100% { transform: scale(1, 1); }
  15%           { transform: scale(1.18, .78); }
}

05스무디 요금제

세 요금제를 새싹(라임)·스퀴즈(추천)·자몽으로 두고, 추천 플랜만 오렌지→레몬 그라디언트 테두리와 인기 배지를 얹어 살짝 크고 통통거립니다. 표 없이 색과 크기만으로 어느 플랜이 주인공인지 보입니다.

그라디언트 링살짝 큰 추천 플랜wiggle 애니메이션
.plan--pick {
  flex: 1.2 1 0;
  background: linear-gradient(135deg, #ff6a00, #ffe066);
  animation: pickJiggle 2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes pickJiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-1.6deg) translateY(-5px); }
}

06드롭 말풍선 후기

후기는 물방울 모양 꼬리가 달린 둥근 말풍선에 담고, 옆의 아바타는 과육 무늬 동그라미입니다. 말풍선 세로 폭이 숨쉬듯 줄었다 늘었다를 반복해 젤리를 쥔 듯한 탄력이 페이지 전체에 배어납니다.

꼬리 말풍선과육 아바타squish 루프
.bubble::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 4px;  /* 말풍선 꼬리도 물방울 모양 */
  background: #fff;
  transform: rotate(45deg);
}

07시트러스 그라디언트 CTA 밴드

밴드 하나에 오렌지에서 레몬, 라임으로 지나가는 그라디언트를 깔고 그 위치가 천천히 흐릅니다. 위의 흰 버튼은 눌렸다가 통통 튕겨 돌아오는 것을 반복합니다. 이 항목은 나중에 함정 섹션에서 다시 나옵니다 — 원래 흰 글자를 그라디언트 위에 바로 얹었더니 레몬 구간에서 대비가 무너졌습니다.

background-position 흐름press 버튼radius pill
.ctacitrus {
  background: linear-gradient(90deg, #ff6a00, #ffd400, #9ad200, #ffd400, #ff6a00);
  background-size: 300% 100%;
  animation: gradFlow 2s linear infinite;
}
@keyframes gradFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -300% 50%; }
}

08웨이브 가장자리 푸터

푸터의 윗변을 물결이 죽 이어진 웨이브 무늬로 띄우는데, 물결 하나하나를 요소로 그리지 않고 배경 반복 하나로 그립니다. 안의 세 칸은 오렌지·자몽·레몬으로 나뉘어 순서대로 살짝 들썩이고, 방울 두 개가 어긋나게 반짝입니다.

repeating 웨이브 가장자리3열→1열반짝임 점
.wave {
  height: 12px;
  background-image: radial-gradient(circle at 50% 100%, #eef7d3 0 64%, transparent 66%);
  background-size: 30px 15px;
  background-repeat: repeat-x;
}

09쥬시 버튼·인풋

버튼은 눌릴 때 몸이 살짝 눌리고 오렌지색 그림자도 함께 얕아져 손맛이 나고, 입력창은 포커스를 받으면 라임색 두꺼운 링이 부드럽게 퍼집니다. 시트러스 키트의 손맛을 하나로 묶은 항목입니다.

눌림·그림자 동시 감소focus 링 확산radius 12
.btn { animation: citrusPress 2s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes citrusPress {
  0%, 55%, 100% { transform: translateY(0) scaleY(1); }
  65%           { transform: translateY(4px) scaleY(.95); }
  82%           { transform: translateY(-3px); }
}

tailwind.config 커스텀

카드 표면용 네 색과 그림자·그라디언트 전용 진한 색을 나눠 이 한 곳에 적어 두면 원페이지와 부품 아홉 개가 전부 같은 대비 규칙을 따라갑니다. -deep 접미사가 붙은 색은 글자를 얹지 않는다는 약속을 이름에 담았습니다.

theme: {
  extend: {
    colors: {
      cream: "#fffaf0", orange: "#ff9a52", "orange-deep": "#ff6a00",
      lime: "#c8e84a", grapefruit: "#ff8fa3", lemon: "#ffe066",
      ink: "#204a17",
    },
    borderRadius: { citrus: "24px", control: "12px", pill: "999px" },
    boxShadow: {
      "citrus-orange": "0 10px 24px rgba(255,106,0,.4)",
      "citrus-lime": "0 10px 24px rgba(200,232,74,.8)",
    },
  },
},

바이브코딩 프롬프트

아래 지시만 AI 코딩 도구에 붙여 넣으면 이 config 를 바로 적용해 화면을 다시 짭니다. 채도 높은 색일수록 대비가 빠듯해진다는 규칙을 프롬프트에 명시해 두면, 도구가 카드 배경에 진한 톤을 골라 글자를 못 읽게 만드는 실수를 줄일 수 있습니다. 여기 옮긴 것은 발췌본이고, 번호 붙은 규칙 열한 개짜리 원본 지시문은 zip 안 프롬프트 파일에서 통째로 읽을 수 있습니다.

배경을 cream(#fffaf0) 하나로 통일한다. 카드마다 orange·lime·grapefruit·lemon 중
하나를 준다(진한 -deep 톤은 그림자·그라디언트 전용, 글자를 얹지 않는다). 그림자는
회색이 아니라 카드와 같은 계열 색 그림자를 쓴다. 글자는 항상 ink(#204a17)다.

위 지시를 실제 page/index.html 에 적용한 뒤 1280px 뷰포트로 전체 페이지를 캡처한 결과가 아래 그림입니다.

결과

어디서 깨지는가 — 함정

첫 번째로 실제로 겪은 것은 320px 렌더에서 히어로 카드가 화면을 넘긴 것이었습니다. 물방울 세 개를 카드 모서리 밖으로 튀어나오게 배치했더니, 480×300 무대에서는 괜찮다가 320×200으로 좁히자 document.documentElement.scrollHeight가 213px로 잡혀 innerHeight 200px를 넘겼습니다. 카드 패딩과 제목 글자 크기, 물방울의 음수 오프셋을 phone 미디어쿼리에서 함께 줄이고서야 213px가 정확히 200px로 떨어졌습니다. type F(디자인 트렌드) 편은 check.py의 BD9 게이트가 항목별 모음 글에만 적용돼 자동으로 잡히지 않아, Playwright로 문서·body 양쪽의 scrollWidth·scrollHeight를 직접 재서 확인해야 했습니다.

두 번째는 07번 CTA 밴드의 글자 대비였습니다. 흰 글자를 오렌지→레몬→라임 그라디언트 위에 바로 올렸더니, 그라디언트가 레몬 구간(#ffd400)을 지날 때 흰 글자 대비가 1.43:1까지 떨어졌습니다 — 라임 구간에서도 1.81:1로 WCAG 2.1 최소 대비 기준 4.5:1에 한참 못 미쳤습니다. 글자 뒤에 잉크색 65% 반투명 스크림을 깔아 계산해 보니 세 색 전 구간에서 최소 4.7:1로 올라왔고, 그 값으로 실제 데모를 고쳤습니다. 이 두 가지를 다 고친 완성본을, 이 비밀번호 52ppc9vv이 걸린 zip을 받아 그대로 열어 확인할 수 있습니다.

아홉 개 데모 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리를 감지하면 동작을 멈추고 각 요소를 애니메이션이 시작되기 전의 정지 상태로 되돌려 고정합니다.

접근성

시트러스 스타일이 파스텔보다 먼저 부딪히는 문제는 채도입니다. 카드 표면 색을 그대로 진하게 두면 잉크 글자 대비가 3.56:1(오렌지 진한 톤)이나 2.98:1(자몽 진한 톤)까지 떨어져 본문 기준 4.5:1을 통과하지 못합니다. 이 편은 그래서 카드 표면용 색 네 개를 잉크 대비 4.73~7.84:1 범위로 따로 밝혀 두고, 진한 원색은 그림자·그라디언트·작은 아이콘에만 씁니다. 07번 CTA 밴드처럼 흰 글자를 그라디언트 위에 얹어야 하는 경우는 함정 섹션에서 설명한 65% 잉크 스크림으로 보정했습니다. 색 그림자는 MDN box-shadow 문서가 안내하는 문법 그대로 쓰되 투명도를 0.4~0.85로 낮췄고, 키보드 초점은 색 그림자에 의존하지 않고 :focus-visible 아웃라인을 잉크색으로 별도 그렸습니다.

시트러스 프레시 말고 다른 홈페이지 유행이 궁금하면 디자인 트렌드 카테고리를 훑어보시고, 이 블로그가 통째로 뭘 다루는지는 소개 페이지에 정리해 뒀습니다.

FAQ

시트러스 프레시와 파스텔 캔디는 뭐가 다른가요?

파스텔 캔디는 라벤더·민트처럼 채도를 낮춘 부드러운 톤을 쓰고 그림자도 연하게 깔아 말랑한 느낌을 냅니다. 시트러스 프레시는 오렌지·라임·자몽처럼 채도를 그대로 살린 톤을 쓰되 카드 표면과 그림자용 색의 밝기를 나눠 대비를 지킵니다. 같은 '색 그림자' 원칙을 쓰지만 파스텔은 부드럽게, 시트러스는 쨍하게 가는 것이 차이입니다.

카드 배경이 진하면 왜 안 되나요?

카드 배경이 진해질수록(채도·명도가 낮아질수록) 그 위에 얹는 잉크 글자와의 밝기 차이가 줄어들어 대비 비율이 떨어집니다. 이 키트에서 실측한 오렌지 진한 톤(#ff6a00)은 잉크와 대비가 3.56:1로 본문 기준 4.5:1에 못 미칩니다. 카드 표면은 항상 그 색 계열 안에서 밝은 쪽을, 진한 쪽은 그림자나 그라디언트처럼 글자가 없는 곳에만 씁니다.

그라디언트 위에 글자를 놓아야 하면 어떻게 하나요?

그라디언트는 위치에 따라 색이 계속 바뀌므로 한 지점만 보고 대비를 맞추면 다른 구간에서 실패합니다. 이 편의 CTA 밴드처럼 글자 뒤에 반투명한 어두운 스크림(이 편은 잉크 65%)을 깔면 그라디언트의 모든 구간에서 최소 대비를 보장할 수 있습니다. 스크림 없이 그라디언트 위에 흰 글자를 직접 얹는 방식은 밝은 색 구간을 지날 때마다 거의 확실히 실패합니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.