효과·디자인 라이브러리

1 스크롤 구조 SC · 7개

SC-01

일반 창 스크롤

01 유넬 · 03 아도 · 07 리베리 · 09 룬

브라우저 기본 세로 스크롤 + 부드러운 이동. 9곳 중 01·03·05·07·09 메인과 9곳 하위 페이지 전부가 이 구조.

수치 1440 기준 문서 높이 01 7,475 · 03 6,016 · 05 4,206 · 07 8,713 · 09 13,537px · 1rem = 화면 폭 1.111%(TE-02)

조각 새 창 ↗01 루엘르 데모 ↗03 리엔 데모 ↗07 모아린 데모 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · 03 아도 → 리엔 demo-lien · 07 리베리 → 모아린 demo-moarin · 09 룬 → 미레 demo-mire · 데모 html{scroll-behavior:smooth}(02·05·07) · _TECH_COMPARE.md 「스크롤 방식」 열

쓰기 좋은 곳 정보가 많고 하위 페이지로 많이 보내는 병원·전문직 대부분. 초기 HTML 에 본문이 다 있어 검색·AI 노출과 접근성에 가장 유리.

주의 개성은 첫 화면·섹션 패턴·효과로 낸다. 긴 페이지는 머리글 고정(NV-01) + TOP(NV-19). 움직임 줄이기면 scroll-behavior:auto.

코드 조각 knowledge/web_design/ref_library/snippets/TE-02_기본뼈대.html

코드 보기

불러오는 중…

SC-02

내부 상자 스냅(한 화면씩 넘기기)

02 온우 · 04 르디테

스크롤·마우스·클릭으로 움직여 보세요

body 대신 화면 전체를 덮는 내부 스크롤 상자가 스크롤하고, 섹션마다 100svh 로 딱딱 멈춘다.

수치 scroll-snap-type:y mandatory · 섹션 100svh · snap-stop:always(04) · overscroll-behavior-y:contain · 스크롤바 숨김 · 메인 6장(02)·5장(04) · 해제 02 ≤760 / 04 ≤1023 · 머리글·등장 판단은 상자 scrollTop·IO root=상자, threshold 0

조각 새 창 ↗02 소엘 데모 ↗04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · .home·.snap(02_onu/site/index.html 60~62행) / 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · .home·.snap·mkIO()(04_ledetail/site/index.html 45~49·344~348행) · 기록표 derm_02 §2·§10, derm_04 §2·§10

쓰기 좋은 곳 메인을 5~6장으로 짧게 끊고 내용은 하위로 보내는 「한 장씩 보는 카탈로그」. 시그니처 시술 브랜드가 여러 개인 곳.

주의 한 섹션 = 한 화면 분량(넘치면 잘림). window 스크롤 도구(캡처·분석)가 안 먹는다 → demo_shots 의 섹션별 캡처(w*_snap_NN.png). 모바일은 반드시 해제. 키보드 스크롤은 상자에 포커스가 있어야 동작(추정).

코드 조각 knowledge/web_design/ref_library/snippets/SC-02_스냅-컨테이너.html

코드 보기

불러오는 중…

SC-03

패널 덮기 휠 넘김

06 위아르

스크롤·마우스·클릭으로 움직여 보세요

창 스크롤 없이 휠·터치·키보드로 다음 화면이 아래에서 올라와 이전 화면을 덮는다(이전 화면은 그대로).

수치 transform 1.05s cubic-bezier(.76,0,.24,1) · z-index 10+10×순번 · 휠 문턱 deltaY ±12 · 연속 휠 잠금 1,100ms · 터치 48px · 1024 미만 일반 스크롤(+lg:snap-y) · 패널 6장 · 패널 안 스크롤 상자는 끝난 뒤 넘김

조각 새 창 ↗06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · .pn·render()·wheel 핸들러(06_weare/site/index.html 52~62·428~468행) · 기록표 derm_06 §2·§8·§10·§12

쓰기 좋은 곳 진료 축이 둘인 프라이빗 병원처럼 메인이 「장면 6장」으로 끝나는 곳. 스냅보다 고급스럽다(종이를 한 장씩 쌓는 느낌).

주의 창 스크롤이 없어 캡처·화면 낭독기 탐색에 불리 → 본문은 초기 HTML 에, 점 내비(NV-07)·키보드 이동 필수. 트랙패드 연타는 잠금으로 막는다. 헤드리스 전체 캡처 불가(패널별 w1440_panel_N.png). 코드 조각은 처음·끝 패널에서 바깥 페이지로 스크롤을 넘기게 바꿨다(원본은 항상 막음).

코드 조각 knowledge/web_design/ref_library/snippets/SC-03_패널덮기-휠넘김.html

코드 보기

불러오는 중…

SC-04

고정 가로 스크롤

08 하루영

스크롤·마우스·클릭으로 움직여 보세요

세로로 굴리면 화면은 고정된 채 내용이 가로로 이동한다(sticky + translateX).

수치 바깥 높이 = 트랙 폭 − 화면 폭 + 화면 높이 · 원본 최대 -6,184px(문서 7,384px) · scroll → requestAnimationFrame · 1024 이상 + 움직임 허용일 때만 · 패널 폭 100vw−106px · 62 · 84 · 74 · 58 · 72rem · 메뉴 앵커 = wrap.offsetTop + min(패널 offsetLeft, 밀 거리)

조각 새 창 ↗08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · .hwrap/.pin/.track·size()·move()(08_haruyoung/site/index.html 109~113·498~505행) · 기록표 derm_08 §2·§8·§10·§12

쓰기 좋은 곳 「전시장을 걷는」 브랜드 무드, 섹션 수가 적고 사진 위주인 메인. 왼쪽 세로 메뉴 띠(NV-08)와 짝.

주의 모바일·움직임 줄이기면 세로로 쌓는다. 긴 글은 가로에 부적합. 사진이 늦게 오면 트랙 폭이 바뀌니 load 뒤 다시 계산. 캡처는 스크롤 위치별(h_NN.png).

코드 조각 knowledge/web_design/ref_library/snippets/SC-04_고정-가로스크롤.html

코드 보기

불러오는 중…

SC-05

고정 히어로를 다음 판이 덮기

05 마그마

스크롤·마우스·클릭으로 움직여 보세요

히어로를 sticky 로 뒤에 고정하고 다음 흰 판을 음수 margin 으로 겹쳐 올려 「막이 걷히는」 느낌을 낸다.

수치 히어로 z 0 · 덮는 판 z 10, margin-top -50px(-3.125rem) · 푸터 z 20, -70px · 히어로 비율 1024:500(모바일 100svh, 최대 61.5rem) · 하위 페이지 히어로도 같은 구조(696~703px)

조각 새 창 ↗05 휘온 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 05 마그마 → 휘온 demo-huion.visiogrowth.co.kr · .hero-wrap{position:sticky}·.feat·.ft(05_magma/site/index.html 89~93·100·119행) · 기록표 derm_05 §1·§2·§5·§10

쓰기 좋은 곳 무드 사진 한 장으로 첫인상을 만들고 그 위로 내용이 올라오는 감성 브랜드.

주의 fullPage 캡처에서 sticky 히어로가 하얗게 찍힌다 → 화면 단위 이어붙임(TE-18). 덮는 판에 배경색 필수.

코드 조각 knowledge/web_design/ref_library/snippets/SC-05_고정히어로-덮기.html

코드 보기

불러오는 중…

SC-06

고정 구간에서 목록 바뀜

07 리베리

스크롤·마우스·클릭으로 움직여 보세요

섹션을 300dvh 로 두고 판을 고정한 채, 스크롤 진행률에 따라 목록 4개 → 3개로 바꾼다.

수치 300dvh · sticky top 100px(머리글) · 진행률 > .5 → 2묶음, < .42 → 1묶음(되돌림 여유 .08) · 교체 .4s cubic-bezier(.16,1,.3,1), 나감 y -32 / 들어옴 y 32 · 판 1fr:1.6fr · 번호 원 54px

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · .why .stk·whyProg()·setG()(07_reberry/site/index.html 151~168·519~529행) · 기록표 derm_07 §2·§5·§8·§10

쓰기 좋은 곳 「이유 7가지」처럼 한 화면에 다 넣기 어려운 목록.

주의 1023 이하는 고정 없이 목록 전체(큰 흐린 번호 + 왼쪽 세로선). 300dvh 를 넘기면 갇힌 느낌(추정). 원본은 framer useScroll(start start → end end).

코드 조각 knowledge/web_design/ref_library/snippets/SC-06_고정구간-목록교체.html

코드 보기

불러오는 중…

SC-07

구조별 모바일 풀기 기준

02 온우 · 04 르디테 · 06 위아르 · 08 하루영

/* 공통 틀: 넓은 화면에서만 특수 구조, 나머지는 일반 흐름 */
@media (max-width:1023px),(prefers-reduced-motion:reduce){
  .home{position:static;overflow:visible;scroll-snap-type:none}   /* SC-02 */
  .pn{position:relative;transform:none!important}                 /* SC-03 */
  .pin{position:static}.track{flex-direction:column;transform:none!important} /* SC-04 */
}

특수 스크롤 구조는 모두 작은 화면·움직임 줄이기에서 일반 세로 흐름으로 푼다. 기준 폭을 한 표로.

수치 스냅 02 ≤760 · 04 ≤1023 / 패널 덮기 <1024 / 가로 스크롤 <1024 또는 움직임 줄이기 / 고정 목록 ≤1023 / 사진 벽 ≤1023 2열(aspect 3/4)

출처 · 쓰기 좋은 곳 · 주의

출처 02 소엘 @media (max-width:760px)(02_onu 289~305행) · 04 오르네 1023 이하(04_ledetail 188~215행) · 06 리네아 matchMedia('(min-width:1024px)')(06_weare 432행) · 08 노을 (max-width:1023px),(prefers-reduced-motion:reduce)(08_haruyoung 280행) · 07 WHY US 1023 이하 · 05 사진 벽 1023 이하 2열

쓰기 좋은 곳 SC-02~06 을 쓸 때 공통.

주의 큰 화면을 그대로 줄인 것을 모바일 완성으로 처리하지 않는다(SOP 42 C2). 1024 경계 양쪽(1023·1024)을 다 확인. 모바일에서는 등장 효과를 한 번만 재생(derm_04 §11 ⑤).

코드 보기

/* 공통 틀: 넓은 화면에서만 특수 구조, 나머지는 일반 흐름 */
@media (max-width:1023px),(prefers-reduced-motion:reduce){
  .home{position:static;overflow:visible;scroll-snap-type:none}   /* SC-02 */
  .pn{position:relative;transform:none!important}                 /* SC-03 */
  .pin{position:static}.track{flex-direction:column;transform:none!important} /* SC-04 */
}

2 첫 화면 연출 HE · 10개

HE-01

켄번스 히어로 + 늦게 나오는 글자

01 유넬

스크롤·마우스·클릭으로 움직여 보세요

전면 사진이 1.12배에서 1.6초 동안 1배로, 글자는 1.8초 뒤에 나타나고 아래 SCROLL 세로선이 튄다.

수치 kenBurns 1.6s forwards(1.12 → 1) · fadeIn 1s ease 1.8s both · scrollBounce 1.4s ease-in-out 무한(opacity .7↔1, y 0↔8px) · 100svh(최소 36rem) · 한글 33.6px + 영문 Cormorant 300 64px 자간 -.02em scaleY(1.2) · 덮개 rgba(40,28,20,.32 → .22 → .38)

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .hero-bg·.hero-tx·.scroll i(01_eunel/site/index.html 35~37·85~101행) · 기록표 derm_01 §5·§6·§12

쓰기 좋은 곳 차분한 고급형. 사진 한 장의 질감이 좋은 경우.

주의 히어로 사진은 preload(LCP). 글자가 1.8초 늦으니 핵심 정보(전화)는 떠 있는 버튼으로.

코드 조각 knowledge/web_design/ref_library/snippets/HE-01_켄번스-히어로.html

코드 보기

불러오는 중…

HE-02

교차 슬라이드 히어로 + 영문 한 글자씩

02 온우

사진 4장이 5초마다 교차하며 천천히 확대되고, 문구도 함께 바뀌며 영문이 한 글자씩 올라온다.

수치 넘김 5000ms · 사진 교차 opacity 1.2s ease-in-out · heroKenBurns 5s ease-out(1 → 1.08) · 문구 1.2s ease-out(2.5rem 아래서) · 글자 charUp .52s cubic-bezier(.22,1,.36,1), 25ms 간격 · 부제 contentUp .76s .45s · 2번째부터 덮개 .34 · 점 .375 → 1.5rem(.5s)

조각 새 창 ↗02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · .hero .slide·.hero-tx .t·heroGo()(02_onu/site/index.html 107~127·498~505행) · 기록표 derm_02 §5·§12

쓰기 좋은 곳 공간·원장·외관 사진이 여러 장 있는 병원.

주의 탭이 숨겨지면 넘김 정지. 글자 쪼개기는 단어 묶음으로(TX-04).

코드 조각 knowledge/web_design/ref_library/snippets/SL-01_켄번스-교차슬라이드.html

코드 보기

불러오는 중…

HE-03

영상 대용 사진 교차 + 잔상 제목 + 빨강 알약 CTA

03 아도

원본의 Vimeo 배경 영상 대신 사진 6장을 1.6초로 교차하며 8초 동안 확대하고, 영문 장식 제목은 흰 글자 + 짙은 잔상 두 겹.

수치 사진 교차 opacity 1.6s ease · heroZoom 8s linear forwards(1 → 1.07) · 6000ms 마다 · 제목 Italiana 90px(5.625rem) 행간 1 · 줄 등장 philosophyFadeUp .8s(.15~.85s 차례) · 잔상 echo 1.4s(TX-06) · CTA #b93429 → 오버 #9a2b22, 화살표 원 .15rem 이동 .3s · 머리글 흰 8% + blur 25px

조각 새 창 ↗03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · .hero .sl·.l1 .ghost·.cta-red(03_ado/site/index.html 92~114·308~321행) · 기록표 derm_03 §1·§2·§5·§11·§12

쓰기 좋은 곳 세계관(고전 미술·브랜드 유래)을 영상·장식 세리프로 미는 곳. 실제 영상이 있으면 영상으로.

주의 실제 영상은 poster·muted·playsinline·화면 밖 정지·실패 대체(SOP 42 B8). 포인트 빨강은 행동 버튼에만.

코드 조각 knowledge/web_design/ref_library/snippets/SL-01_켄번스-교차슬라이드.html

코드 보기

불러오는 중…

HE-04

실크 히어로 + 영문 한 글자씩 → 한글 제목

04 르디테

아이보리 실크 사진 위 영문 한 줄이 25ms 간격으로 한 글자씩, 다 나오면 480ms 뒤 한글 제목이 올라온다.

수치 글자 .45s ease, translateY(.35em), 25ms 간격(50자 = 1.25s) · 한글 25×글자수+480ms 뒤 .7s ease-out(translate-y-3) · 영문 가라몬드 25px 300 · 한글 42dot 30px 300 행간 38 · 테두리 버튼 254×40 · 마우스 아이콘 1.85s(TX·HE-10) · 나갔다 오면 다시 재생(FX-04)

조각 새 창 ↗04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · #enLine span·#heroH1·.mouse(04_ledetail/site/index.html 75~90·339~343행) · 기록표 derm_04 §2·§5·§8·§12

쓰기 좋은 곳 흰 바탕 미니멀·정밀 포지션.

주의 모바일 줄바꿈판을 따로 둔다(.p/.m). 움직임 줄이기면 글자 즉시.

코드 조각 knowledge/web_design/ref_library/snippets/TX-04_글자-하나씩.html

코드 보기

불러오는 중…

HE-05

첫 방문 스플래시 6.7초 + 세로 글자

05 마그마

스크롤·마우스·클릭으로 움직여 보세요

주황 입자 덮개 위 세로 글자 → 로고 → 걷힘 순서를 CSS 지연만으로 돌리고, 누르면 건너뛴다(세션당 한 번).

수치 글자 .7s, 지연 .25s + i×.1s · 2.3s 글자 사라짐(.6s) · 로고 2.9s 시작 2s(25~65% 머묾) · 5.9s 덮개 .8s 페이드(합계 6.7s) · 건너뛰기 안내 .7s 뒤, 밑줄 빛 1.8s 1.2s 무한 · z-index 9999 · 스플래시 동안 히어로 글자 paused

조각 새 창 ↗05 휘온 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 05 마그마 → 휘온 demo-huion.visiogrowth.co.kr · .splash·endSplash()(05_magma/site/index.html 35~65·293~300행) · 기록표 derm_05 §1·§5·§8·§12

쓰기 좋은 곳 무드가 먼저인 감성 브랜드의 첫 방문.

주의 매번 6.7초는 길다 → sessionStorage 1회(원본 흔적 9회, 「추정」). 움직임 줄이기면 생략. 팝업은 스플래시 뒤에.

코드 조각 knowledge/web_design/ref_library/snippets/HE-05_스플래시-세로글자.html

코드 보기

불러오는 중…

HE-06

숨쉬는 배경

06 위아르

스크롤·마우스·클릭으로 움직여 보세요

현재 보이는 화면의 배경 사진만 22~28초 주기로 아주 천천히 확대·축소한다(패널마다 주기 다르게).

수치 breathe 22s(1 → 1.065 → 1) · alt 26s(1.065 → 1) · slow 28s(1 → 1.052) · ease-in-out 무한 · 원본 IO threshold [0,.38,.55,.75], 비율 .38 이상일 때 켬

조각 새 창 ↗06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · .pn.on .b0/.b1/.b2(06_weare/site/index.html 46~48·60~62행) · 기록표 derm_06 §5·§8·§9·§12

쓰기 좋은 곳 패널 덮기(SC-03)·전면 사진 히어로. 정지 사진에 생기를 줄 때.

주의 보이는 화면만(GPU 절약). 1024 미만·움직임 줄이기면 끈다.

코드 조각 knowledge/web_design/ref_library/snippets/HE-06_숨쉬는배경.html

코드 보기

불러오는 중…

HE-07

카운트다운 인트로 + 흐림 걷힘

08 하루영

스크롤·마우스·클릭으로 움직여 보세요

모래시계 사진 위 「NO | UL | 03 → 00」 카운트다운 뒤 덮개가 걷히고 히어로 사진 흐림이 풀린다.

수치 숫자 1초 간격(원본 캡처 0.3s=03 · 1.2s=02 · 3.0s=00) · 숫자 바뀜 .25s · 마지막 뒤 .7s 에 걷힘 .9s cubic-bezier(.22,1,.36,1) · 히어로 blur 14px → 0 (2.9s) · 글 y36 → 1.2s · 글자 그림자 2px 0 10.6px · 걷힐 때까지 body 스크롤 잠금

조각 새 창 ↗08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · #intro·tick()·endIntro()·#heroBg(08_haruyoung/site/index.html 55~64·115~122·490~496행) · 기록표 derm_08 §5·§12

쓰기 좋은 곳 「시간」 같은 콘셉트를 체험시키는 브랜드.

주의 매 방문 3초 → 세션 1회도 고려. 잠금은 클릭·끝 모두 한 함수로 반드시 풀리게.

코드 조각 knowledge/web_design/ref_library/snippets/HE-07_카운트다운-인트로.html

코드 보기

불러오는 중…

HE-08

그라디언트 히어로 + 세로선

09 룬

스크롤·마우스·클릭으로 움직여 보세요

남색 → 은회색 세로 그라디언트 위 세리프 한 줄, 가운데 세로선이 위에서 그어진다(사진이 없어도 성립).

수치 rgba(11,42,49,.92) 0 → rgba(18,64,74,.72) 45% → rgba(214,222,224,.25) 100% · 세리프 2.15rem · vline 1.6s ease-out .6s(흰 55%, top 62% 높이 22%) · 높이 56rem(최대 100svh)

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .hero::before·.hero .vl(09_lunn/site/index.html 63·84~92행) · 기록표 derm_09 §1·§5·§12

쓰기 좋은 곳 정밀·의학적 신뢰 포지션, 사진 준비 전 시안, 전문직.

주의 글자 대비 확보(그라디언트 위쪽을 짙게).

코드 조각 knowledge/web_design/ref_library/snippets/HE-08_그라디언트-세로선.html

코드 보기

불러오는 중…

HE-09

세피아 사진 + 문구 묶음 떠오르기

07 리베리

세피아로 누른 로비 사진 위 「한 줄 + 로고 300px + 테두리 버튼」 묶음이 1.2초 떠오르고 아래 마우스 휠 점이 움직인다.

수치 fadeUp y36 → 1.2s cubic-bezier(.16,1,.3,1) · 한 줄 clamp(30px,2.9vw,40px) · 로고 2.55rem 자간 .24em · 버튼 최소폭 150, 크림 70% 테두리 → 오버 cocoa 50% · wheel 1.5s(HE-10 ④) · 100dvh · 덮개 rgba(56,37,34,.18)

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · #heroIn·.mouse(07_reberry/site/index.html 81~92·343~348행) · 기록표 derm_07 §5·§8·§12

쓰기 좋은 곳 원장 1인 의원, 사진 톤을 통일해 차분하게.

주의 원본은 서버 HTML 에 opacity 0 을 박아 둠 → JS 실패 시 빈 화면 대비(FX-01 .no-js).

코드 조각 knowledge/web_design/ref_library/snippets/FX-05_fadeUp-stagger.html

코드 보기

불러오는 중…

HE-10

스크롤 안내 아이콘 4종

01 유넬 · 04 르디테 · 05 마그마 · 07 리베리

스크롤·마우스·클릭으로 움직여 보세요

히어로 아래 「아래로」를 알려 주는 작은 움직임 4종.

수치 ① 1.4s(opacity .7↔1, y 8px) · ② hero-scroll-bounce 1.85s(y -12px) · ③ scroll-bounce 1.6s(y 10px) · ④ wheel 1.5s(opacity 1↔.3, y 6px) · 모두 ease-in-out 무한

조각 새 창 ↗01 루엘르 데모 ↗04 오르네 데모 ↗05 휘온 데모 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 ① 01 유넬 SCROLL 세로선 .scroll i · ② 04 르디테 마우스 .mouse div · ③ 05 마그마 원형 점 .scroll div · ④ 07 리베리 휠 점 .mouse i::after → demo-luelle · demo-orne · demo-huion · demo-moarin .visiogrowth.co.kr · 기록표 각 §8·§12

쓰기 좋은 곳 전면 히어로 아래 가운데.

주의 장식이므로 aria-hidden. 움직임 줄이기면 정지. 떠 있는 버튼과 겹침 확인.

코드 조각 knowledge/web_design/ref_library/snippets/HE-10_스크롤안내-4종.html

코드 보기

불러오는 중…

불러오는 중…

불러오는 중…

불러오는 중…

불러오는 중…

불러오는 중…

TX-11

줄 수 제한·균형 줄바꿈·한글 단어 끊김 방지

09 룬 · 01 유넬

body{word-break:keep-all}
h1,h2,h3,p.lead{text-wrap:balance}
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

카드 요약은 n줄에서 자르고, 제목은 줄 길이를 고르게, 한글은 단어 중간에서 끊기지 않게.

수치 keep-all · line-clamp 2~3 · text-wrap:balance(제목·짧은 문단)

출처 · 쓰기 좋은 곳 · 주의

출처 9개 데모 공통 word-break:keep-all · 09 미레 .cc p{-webkit-line-clamp:3}(09_lunn 291행) · 01 루엘르 text-wrap:balance(01_eunel 111행) · effects.md line-clamp 01 2 · 02 8 · 05 20 · 06 20 · 07 9회 / text-wrap balance 9곳 1~3회

쓰기 좋은 곳 모든 페이지 기본.

주의 line-clamp 는 display:-webkit-box + -webkit-box-orient:vertical + overflow:hidden 이 함께 필요.

코드 보기

body{word-break:keep-all}
h1,h2,h3,p.lead{text-wrap:balance}
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

불러오는 중…

SE-04

사진 띠 4칸 + 계단 문단

09 룬

회색 사진 4칸 띠 아래, 문단이 줄마다 오른쪽으로 계단처럼 들여쓰기되고 마지막 줄은 오른쪽 정렬.

수치 띠 9rem · 들여쓰기 3% / 8% / 14% · 마지막 줄 위 4rem · 행간 2.4 · fadeIn .1s 차례 · fadeInUp .12s 차례

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .strip·.stairs(09_lunn/site/index.html 137~143·416~424행) · 기록표 derm_09 §5(5 철학 2)

쓰기 좋은 곳 철학 두 번째 블록, 긴 문장을 리듬 있게.

주의 모바일 들여쓰기 해제.

SE-05

반반 분할(사진 | 글)

03 아도

왼쪽 큰 사진, 오른쪽 흰 판에 80px 영문 제목 → 인용 → 본문 → 로고. 다음 섹션은 좌우를 바꾼다.

수치 최소 높이 50rem · 사진 713×800 · 제목 Italiana 5rem 민트 대문자 · 인용 1.875rem 500 · 본문 .8125rem · FX-03(90ms 단위) · 사진 오버 1.03 .7s

조각 새 창 ↗03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · #about·.split(03_ado/site/index.html 116~129·324~337행) · 기록표 derm_03 §5(2·3)·§9

쓰기 좋은 곳 소개·원장 소개를 담백하게.

주의 모바일 사진 위, 글 아래(.rev 는 order:-1).

코드 조각 knowledge/web_design/ref_library/snippets/FX-03_섹션단위-차례등장.html

코드 보기

불러오는 중…

SE-06

WHY · 티켓 카드 3장

01 유넬

어두운 석회 질감 위 라벨·제목, 아래 티켓 카드 3장(영문 단어 | 점선 | 설명)이 차례로 떠오른다.

수치 섹션 688px · 카드 3열 간격 2.2rem · 지연 .1/.38/.66 · IM-02

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .why·.tickets(01_eunel/site/index.html 115~131·394~402행) · 기록표 derm_01 §5(3 WHY)

쓰기 좋은 곳 「우리 병원의 기준 3가지」.

주의 1100 이하 1열.

코드 조각 knowledge/web_design/ref_library/snippets/IM-02_티켓-반원홈카드.html

코드 보기

불러오는 중…

SE-07

WHY US · 고정 판 목록 교체

07 리베리

샌드 바탕 고정 판 왼쪽 「WHY US」, 오른쪽 사진 위 번호 원 목록이 진행률에 따라 4개 → 3개로 바뀐다.

수치 300dvh · SC-06 수치 · 오른쪽 끝 세로 알약 점 2개

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · .why(07_reberry/site/index.html 151~168·400~413행) · 기록표 derm_07 §5(5)

쓰기 좋은 곳 이유가 7개인 1인 원장 의원.

주의 모바일 POINT 목록.

코드 조각 knowledge/web_design/ref_library/snippets/SC-06_고정구간-목록교체.html

코드 보기

불러오는 중…

SE-08

이유 카드 5장 · 오버 설명

09 룬

질감 사진 카드 5장에 흰 제목, 마우스를 올리면 덮개가 진해지고 설명이 떠오른다.

수치 5열 4:5 · 덮개 black 25 → 45% .5s · 설명 opacity·y8 .4s · 사진 1.05 1s · fadeInUp .1s 차례

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .why .wc(09_lunn/site/index.html 206~219·477~486행) · 기록표 derm_09 §5(11)·§12

쓰기 좋은 곳 가치 5가지(Human·Precision·Expertise·Synergy·Technique).

주의 1100 이하 3열, 760 이하 2열. 터치에서 설명 노출 고려.

SE-09

Attentive 판 36:64

07 리베리

코코아 판 왼쪽 36% 크림 질감 사진, 오른쪽 64% 는 크림 세로선 경계 뒤 영문 2줄 + 한글 4줄 + 아래 가로선 줄.

수치 716px · 최대 85.375rem · Belleza 36 · 한글 15px 행간 1.75 · 아래 줄 2.875rem

07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · .att(07_reberry/site/index.html 170~182·416~428행) · 기록표 derm_07 §5(6)

쓰기 좋은 곳 브랜드 문장 한 판(진료 태도).

주의 모바일 사진 4:3 위.

SE-10

배경 사진 + 이탤릭 대제목 2단

09 룬

전면 사진 위 왼쪽 이탤릭 대제목 3줄, 오른쪽 굵은 한 줄 + 설명, 좌우에서 밀려 들어온다.

수치 38rem · Playfair 이탤릭 3.1rem · fadeInLeft / fadeInRight .2s · 왼쪽 → 오른쪽 그라디언트 덮개

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .bubble(09_lunn/site/index.html 172~179·449~453행) · 기록표 derm_09 §5(8)

쓰기 좋은 곳 철학·관계 메시지.

주의 모바일 1열.

SE-11

의료진 3인 카드

01 유넬

샌드 바탕에 세로 사진 3장(그림자) + 직함 작게/이름 굵게, 아래 2줄 제목 + 본문 + 알약 버튼.

수치 960px · 사진 220×280 · 간격 4.4rem · 지연 0/.2/.4 · 오버 1.03 .5s · More View ● 알약

01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .doc(01_eunel/site/index.html 133~147·405~416행) · 기록표 derm_01 §5(4)

쓰기 좋은 곳 원장 2~4명 병원.

주의 모바일 줄바꿈 2열.

SE-12

원장 반반 + 로고

03 아도

왼쪽 글(대제목 2줄·이름·본문·로고) | 오른쪽 원장 사진 — SE-05 의 좌우 반대.

수치 SE-05 와 같음 · 이름 1.25rem 500

03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · .split.rev(03_ado/site/index.html 340~352행) · 기록표 derm_03 §5(3)

쓰기 좋은 곳 대표원장 1인.

주의 모바일 사진 먼저.

SE-13

원장 타원 아치 2단

07 리베리

왼쪽 타원 아치 원장 사진(1.06 → 1), 오른쪽 MEDICAL TEAM → 문단 8줄 → 이름 굵게 → More View.

수치 753px · 1fr:1.3fr 간격 80 · 사진 3:4 최대 384px · 문단 18px 500 · 이름 30px 800 · FX-05 · IM-08

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · .doc(07_reberry/site/index.html 141~149·387~397행) · 기록표 derm_07 §5(4)

쓰기 좋은 곳 1인 원장.

주의 모바일 가운데 정렬.

코드 조각 knowledge/web_design/ref_library/snippets/FX-05_fadeUp-stagger.html

코드 보기

불러오는 중…

SE-14

원장 + 분야 알약 + 숫자 카드 4장

09 룬

이탤릭 슬로건 띠 → 원장 사진 + 영문 이름 세리프 + 직함 + 분야 알약 4개 + 설명 → 숫자 카드 4장.

수치 사진 20rem 3:4 · 이름 2.6rem · 알약 테두리 · 숫자 카드 3:2 세리프 3rem(FX-12) · slideInRight · zoomIn .1s 차례

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .drband·.doc·.stats(09_lunn/site/index.html 181~204·456~474행) · 기록표 derm_09 §5(9·10)·§9

쓰기 좋은 곳 원장 1인 브랜드(「영문 이름 + 분야 알약 + 숫자」 신뢰 장치).

주의 숫자는 근거 있는 것만(TE-20).

코드 조각 knowledge/web_design/ref_library/snippets/FX-12_숫자-올라가기.html

코드 보기

불러오는 중…

SE-15

의료진 띠 + 흐르는 글자

03 아도

짙은 회색 띠에 큰 선 로고 워터마크, 가운데 로고 + 빨강 「의료진 소개」, 아래 시술 분야가 70초로 흐른다.

수치 바탕 #6f6f6f · 워터마크 원 22rem 흰 14% · 띠 70s · 오버·포커스 멈춤 · 손으로 가로 스크롤

조각 새 창 ↗03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · .band·.mq(03_ado/site/index.html 131~143·355~361행) · 기록표 derm_03 §5(4)·§12

쓰기 좋은 곳 의료진 소개 페이지로 보내는 연결 띠.

주의 띠는 aria 설명 + tabindex.

코드 조각 knowledge/web_design/ref_library/snippets/SL-07_marquee-오버멈춤.html

코드 보기

불러오는 중…

SE-16

컨설팅 가로 카드 · 퍼즐 홈

02 온우

모카 질감 바탕에 제목·따옴표 문장, 가운데 가로 카드(아이보리 판 | 모델 사진)가 퍼즐 홈으로 맞물리고 판이 옆에서 밀려온다.

수치 카드 56.8×31.5rem · 판 27.9rem · IM-01 · FX-08 · NV-10 · 떠다니는 빛 orbDrift 14s·18s(역방향) · 형광펜 TX-01

조각 새 창 ↗02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · #s2 .sec-card·.card.a(02_onu/site/index.html 129~183·374~389행) · 기록표 derm_02 §5(2)

쓰기 좋은 곳 대표 상품(컨설팅·시그니처) 한 개를 크게.

주의 모바일 1열, 마스크 해제.

코드 조각 knowledge/web_design/ref_library/snippets/IM-01_퍼즐홈-마스크카드.html

코드 보기

불러오는 중…

SE-17

솔루션 커튼 카드

01 유넬

종이 질감 사진 위 가로 카드 하나(모카 판 + 세로선 + 4줄 | 사진)가 커튼이 걷히며 드러난다.

수치 604px · 카드 57×23.75rem, 사진 26.9rem · FX-09

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .sol(01_eunel/site/index.html 149~160·419~430행) · 기록표 derm_01 §5(5)

쓰기 좋은 곳 진료 원칙 한 장.

주의 모바일 사진 16rem 위.

코드 조각 knowledge/web_design/ref_library/snippets/FX-09_커튼-걷힘.html

코드 보기

불러오는 중…

SE-18

시그니처 세로 카드 2장 + 오버 설명

01 유넬

질감 배경에 큰 라벨, 세로 카드 2장(제목·사진·타원 장식·로고), 오버 시 설명판이 덮는다.

수치 986px · 라벨 Tenor 35.2px · 카드 15.6rem · IM-04

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .sig(01_eunel/site/index.html 162~180·433~442행) · 기록표 derm_01 §5(6)

쓰기 좋은 곳 시그니처 시술 2개.

주의 모바일 세로 쌓기.

코드 조각 knowledge/web_design/ref_library/snippets/IM-04_카드떠오름-설명판.html

코드 보기

불러오는 중…

SE-19

시그니처 가로 카드(사진 | 모카 판)

02 온우

아이보리 질감 바탕 가운데 카드(크림 질감 사진 | 모카 판: 제목·설명·외곽선 알약), 경계에 반원 홈.

수치 카드 .b 29.3rem 사진 · 그라디언트 글자·밑줄·선(TX-02·03) · CTA 링(어두운 판 색 변수)

조각 새 창 ↗02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · #s3·.card.b(02_onu/site/index.html 392~405행) · 기록표 derm_02 §5(3)

쓰기 좋은 곳 SE-16 다음 장(좌우 반대).

주의 SE-16 과 같은 틀을 반복해 리듬.

코드 조각 knowledge/web_design/ref_library/snippets/TX-02_그라디언트글자.html

코드 보기

불러오는 중…

SE-20

시그니처 카드 3장 + 흑백 배경 + 도장

04 르디테

흑백 숲 사진 위 제목 → 원형 도장 → 세로 카드 3장, 카드 글자가 180ms 차례로 떠오른다.

수치 900px · 도장 125 · 카드 278×336 간격 20 · 글자 .68s cubic-bezier(.22,1,.36,1) 0/180/360ms · 오버 -8px + 사진 1.04 · 카드 덮개 22%

조각 새 창 ↗04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · .sig·.cards(04_ledetail/site/index.html 117~133·279~288행) · 기록표 derm_04 §5(3)

쓰기 좋은 곳 부위별 시그니처 3개(입술·이마·잔주름).

주의 밝은 사진 위 글자 덮개.

코드 조각 knowledge/web_design/ref_library/snippets/IM-10_원형글자도장-회전.html

코드 보기

불러오는 중…

SE-21

시그니처 원 2개 + 점 목록

06 위아르

질감 바탕 위 지름 372px 원 2개(천 사진) 안에 분야명 + 작은 점 달린 시술명 2~3개, 점에 오버하면 흰 원이 커진다.

수치 원 23.25rem 간격 4.3125rem · 분야명 Hahmlet 24.5 · 점 7px · 오버 흰 42% 96px 원 .3s

06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · .p-sig·.cir(06_weare/site/index.html 128~148·332~353행) · 기록표 derm_06 §5(4)·§9

쓰기 좋은 곳 시술 수가 적은 병원(분야 2 × 시술 2~3).

주의 밝은 원 안 대비(옅은 막).

SE-22

시그니처 세로 카드 4장(태그·부위)

09 룬

큰 세리프 제목(이탤릭 한 단어) + 「/ AU」, 아래 세로 카드 4장에 [프로그램명]·굵은 2줄·해시태그·부위.

수치 카드 높이 36rem 4열 · slideInUp 0/.12/.24/.36 · 오버 1.05 1.2s + 덮개 45%

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · #sig·.sc(09_lunn/site/index.html 119~135·405~413행) · 기록표 derm_09 §5(4)

쓰기 좋은 곳 시그니처 프로그램 4개.

주의 1100 이하 2열, 760 이하 1열.

SE-23

진료 축 패널(사진 + 제목 + 버튼)

06 위아르

화면 하나에 사진 한 장 + 영문 라벨 + 한글 제목 + 흰 알약 버튼 하나만.

수치 1440×900 기준 top 322(영문)·361(한글 Hahmlet 36)·621(버튼) · NV-17 · HE-06

조각 새 창 ↗06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · .p-axis(06_weare/site/index.html 108~126·306~329행) · 기록표 derm_06 §5(2·3)·§9

쓰기 좋은 곳 진료 축이 둘인 병원 — 축마다 한 판.

주의 설명은 하위 페이지로.

코드 조각 knowledge/web_design/ref_library/snippets/NV-17_버튼-플러스원.html

코드 보기

불러오는 중…

SE-24

시술 카드 4×2(기울어진 종이 카드)

08 하루영

짙은 모래 질감 위 제목 + 한 줄, 종이 카드 8장(이탤릭 시술명·2줄 | 사진)이 기울어진 채 튀어 들어온다.

수치 카드 높이 12rem · 4열 간격 1.2rem · FX-14 · 시술명 Cormorant 700 이탤릭 1.375rem

조각 새 창 ↗08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · .p-treat·.cards(08_haruyoung/site/index.html 145~165·393~406행) · 기록표 derm_08 §5(3)

쓰기 좋은 곳 시술 라인업 8개를 「제품 라인」처럼.

주의 모바일 2열 → 600 이하 1열.

코드 조각 knowledge/web_design/ref_library/snippets/FX-14_기울어진카드-스프링.html

코드 보기

불러오는 중…

SE-25

사진 벽 12칸 · 단어 + 오버 문장

05 마그마

흰 바탕에 3열로 엇갈린 질감 사진 12장, 사진마다 영문 한 단어, 오버하면 철학 문장 3줄.

수치 3,020px · 열 474/472/474 · 높이 674·724·824 · 열·줄 간격 10px · 위로 50px 겹침(SC-05) · IM-03 · 원본 절대 위치 12칸 → 데모 flex 기둥

조각 새 창 ↗05 휘온 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 05 마그마 → 휘온 demo-huion.visiogrowth.co.kr · .feat·.wall·.col(05_magma/site/index.html 99~116·228~249행) · 기록표 derm_05 §5(3)·§9·§10

쓰기 좋은 곳 시술 사진 대신 무드로 철학을 보여 줄 때.

주의 1023 이하 2열 3/4. 원본 폭 90rem 이 1024 에서 잘림 → min(90rem,100%)(고친 일).

코드 조각 knowledge/web_design/ref_library/snippets/IM-03_오버덮개-문장3줄.html

코드 보기

불러오는 중…

SE-26

정밀 · 슬로건 배너 + 번호 2단 + 회전 도장

04 르디테

위 꽃 배너(이탤릭 슬로건) / 아래 반반: 사진 위 회전 도장 | 「1. / DETAIL」「2. / PRECISION」 + 본문.

수치 배너 257px · 반반 46.5% · 번호 이탤릭 30 + 대문자 30 · .62s 0/70/220/290ms · 도장 28s

조각 새 창 ↗04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · .prec(04_ledetail/site/index.html 135~151·291~303행) · 기록표 derm_04 §5(4)

쓰기 좋은 곳 원칙 2가지를 강하게.

주의 1023 이하 사진 10:9 위.

코드 조각 knowledge/web_design/ref_library/snippets/FX-04_다시재생-IO.html

코드 보기

불러오는 중…

SE-27

진료 과정 4단 타임라인

09 룬

가로선 위 마름모 점 4개 + 큰 번호 + 제목 + 설명, 선이 왼쪽에서 그어지고 아래 질감 사진 3장.

수치 FX-13 · 번호 Playfair 3rem #94a8ad · 사진 16rem 오버 1.1 1.2s

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .proc(09_lunn/site/index.html 145~160·427~439행) · 기록표 derm_09 §5(6)

쓰기 좋은 곳 상담 → 설계 → 시술 → 관리.

주의 모바일 2열.

코드 조각 knowledge/web_design/ref_library/snippets/FX-13_진행선-timeline.html

코드 보기

불러오는 중…

SE-28

카테고리 3칸

09 룬

위 질감 사진 + 아래 「Lifting / O MIRÉ」 세리프 두 덩어리, 3칸 가로.

수치 사진 9rem · 오버 1.12 1s · 세리프 1.6rem + 1.3rem

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · #cats .cat(09_lunn/site/index.html 162~170·442~446행) · 기록표 derm_09 §5(7)

쓰기 좋은 곳 진료 분야 바로가기(분야 3개).

주의 모바일 1열.

SE-29

프로모션 탭 + 카테고리 타일

08 하루영

위 짙은 판(제목 + More View + 탭 3개 세로 구분선) / 아래 크림(제목 + 타일 4×2).

수치 위아래 1fr 1fr · 탭 위 마우스 → 버튼 btnBeat 2.6s · IM-06 타일 146/97

조각 새 창 ↗08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · .p-promo·.tabs·.tiles(08_haruyoung/site/index.html 193~227·428~447행) · 기록표 derm_08 §5(5·6)

쓰기 좋은 곳 이벤트 분류 + 고민별 바로가기를 한 판에.

주의 가격 이벤트는 심의 확인.

코드 조각 knowledge/web_design/ref_library/snippets/IM-06_타일-영한바뀜.html

코드 보기

불러오는 중…

SE-30

시그니처 목록 줄(알약 사진)

09 룬

줄마다 알약 모양 질감 사진 + [프로그램명] + 설명, 줄 사이 가는 선, 오버 시 줄 바탕.

수치 18rem:1fr · 알약 4rem · 줄 오버 남색 4% · 사진 1.1 1s · fadeInUp .1s 차례

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · #list .row(09_lunn/site/index.html 240~251·501~509행) · 기록표 derm_09 §5(14)

쓰기 좋은 곳 프로그램 목록(카드보다 정보형).

주의 모바일 1열.

코드 조각 knowledge/web_design/ref_library/snippets/IM-08_아치캡슐-사진틀.html

코드 보기

불러오는 중…

SE-31

에센셜 2열 목록

09 룬

오른쪽 정렬 제목 아래 작은 알약 사진 + [시술명] + 한 줄 설명 10개를 2열로.

수치 7rem:1fr · 알약 2.6rem · 열 간격 4rem · fadeIn

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .list.right .ess(09_lunn/site/index.html 252~255·512~526행) · 기록표 derm_09 §5(15)

쓰기 좋은 곳 기본 시술 전체 목록.

주의 SE-30 과 짝(왼쪽/오른쪽 정렬 교대).

SE-32

약속 Point 01~03

01 유넬

배경 사진이 확대 걷히는 판 위 라벨·제목, 정사각 사진 3장 + Point 0N + 한 줄.

수치 722px · 사진 200px(12.5rem) · 간격 5.2rem · FX-10 · 지연 .1/.28/.46 · 오버 1.04 .5s

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · .prom(01_eunel/site/index.html 198~209·465~474행) · 기록표 derm_01 §5(8)

쓰기 좋은 곳 약속·정품 확인·1:1 원칙.

주의 「보장」 같은 표현 금지.

코드 조각 knowledge/web_design/ref_library/snippets/FX-10_배경확대-등장.html

코드 보기

불러오는 중…

SE-33

케어 노트 카드(전후 카드 틀의 대체)

07 리베리

「● CARE NOTE ●」 + 따옴표 큰 문장(형광) + More View → 카드 슬라이드(반쪽 사진 2장 + 가운데 원 + Before/After 이탤릭).

수치 1024px · 카드 320 · SL-05 · 오버 사진 1.03 .7s + 「크게 보기」 덮개 deep 35% .5s

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리(원본 BEFORE & AFTER) → 모아린 CARE NOTE demo-moarin.visiogrowth.co.kr · .note·.carousel(07_reberry/site/index.html 94~124·352~373행) · 기록표 derm_07 §5(2)·§9·§11

쓰기 좋은 곳 전후 사진 대신 「관리 과정 기록」.

주의 의료광고 대응으로 내용을 상담·관리 사진으로 바꾼 틀(TE-20).

코드 조각 knowledge/web_design/ref_library/snippets/SL-05_카드캐러셀-점페이지.html

코드 보기

불러오는 중…

SE-34

전후 잠금 카드 3장

03 아도

회색 바탕 80px 제목 + 카드 3장(태그 + 제목 / Before 흐림 + 자물쇠 / After), 아래 흐린 대형 글자 띠.

수치 3열 간격 1.6rem · IM-13 · SL-08

조각 새 창 ↗03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · #ba(03_ado/site/index.html 159~182·384~399행) · 기록표 derm_03 §5(6)·§9

쓰기 좋은 곳 회원 기능이 있는 커머스형.

주의 의료광고 제한(TE-20).

코드 조각 knowledge/web_design/ref_library/snippets/IM-13_흐림잠금-카드.html

코드 보기

불러오는 중…

SE-35

전후 탭

09 룬

분류 탭 + 정사각 2장(BEFORE/AFTER 알약) + 면책 문구.

수치 탭 활성 남색 · 원본 탭 4 → 데모 2 · 46rem

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · #ba(09_lunn/site/index.html 221~232·489~495행) · 기록표 derm_09 §5(12)

쓰기 좋은 곳 분야별 사례.

주의 면책 문구 필수, 심의 확인.

SE-36

공지·이벤트 포스터 3장

07 리베리

크림 바탕 영문 제목 + 한글 부제, 세로 포스터 3장 + 제목, 아래 More View.

수치 1004px · 포스터 325px 7:10 둥근 4px · 간격 24 · 오버 1.03 · 모바일 SL-09

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리(원본 CURRENT EVENT) → 모아린 CURRENT NOTICE demo-moarin.visiogrowth.co.kr · .ev(07_reberry/site/index.html 126~139·376~384행) · 기록표 derm_07 §5(3)

쓰기 좋은 곳 진료 시간·첫 방문·칼럼 안내.

주의 가격 포스터는 심의 확인.

코드 조각 knowledge/web_design/ref_library/snippets/SL-09_가로스냅목록.html

코드 보기

불러오는 중…

SE-37

프로모션 가로 끌기 + 로고 띠

03 아도

80px 제목 + 포스터 카드 가로 끌기 목록 + 진행 막대 + 흐르는 로고 띠.

수치 SL-06 · SL-08

조각 새 창 ↗03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · #promo(03_ado/site/index.html 184~209·402~418행) · 기록표 derm_03 §5(7)

쓰기 좋은 곳 이달의 프로그램 7개 안팎.

주의 할인 표기 심의.

코드 조각 knowledge/web_design/ref_library/snippets/SL-06_끌어넘기는-가로목록.html

코드 보기

불러오는 중…

SE-38

공간 슬라이드 + 숫자 띠

01 유넬

전면 공간 사진 슬라이드, 아래 위아래 선 띠 안에 「○○ Space」 + ← 1 / N →.

수치 01 1,100px·10장 · 02 900px·14장 · 06 900px·10장 · 07 43.125vw·11장 · 원본 18·30·18·21장

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 .mood(SL-02) · 02 #s4(SL-03) · 06 .p-space(SL-04) · 07 .mood(SL-04) → demo-luelle · soel · linea · moarin · 기록표 각 §5

쓰기 좋은 곳 공간 소개(9곳 중 4곳이 메인에 둠, 06 은 하위 페이지 끝에도 반복).

주의 사진은 레퍼런스 장수의 절반 이상, 같은 사진 반복 금지(_DEMO_BRIEF §5-1).

코드 조각 knowledge/web_design/ref_library/snippets/SL-04_트랙슬라이드-숫자띠.html

코드 보기

불러오는 중…

SE-39

공간 모자이크 7칸 + 크게 보기

08 하루영 · 01 유넬

크기가 다른 7칸 사진 모자이크, 오버 「크게 보기」, 누르면 라이트박스.

수치 1행 11rem(21.6·19.4·10.6rem) · 2행 15.7rem(15·13.9·22.75rem 세로 2칸) · 간격 .5625rem · fadeIn .16s 차례 · IM-07

조각 새 창 ↗08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · #space .mos(08_haruyoung/site/index.html 167~191·408~426행) · 01 유넬 /eunel 7칸 모자이크(기록표 §9) · 기록표 derm_08 §5(4)·§12

쓰기 좋은 곳 공간 사진 7장 이상.

주의 모바일 2열.

코드 조각 knowledge/web_design/ref_library/snippets/IM-07_크게보기-라이트박스.html

코드 보기

불러오는 중…

SE-40

주차 안내

02 온우

왼쪽 「Parking Available」 + 가로 사진, 오른쪽 로고 심볼 · 영문 한 줄 · 한글 3줄(오른쪽 정렬).

수치 사진 780×495 · 바탕 #efede8 · .1/.25/.4 떠오르기

02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · .park(02_onu/site/index.html 202~211·433~440행) · 기록표 derm_02 §5(5)

쓰기 좋은 곳 주차가 강점인 병원(강남 등).

주의 모바일 가운데 정렬.

SE-41

FAQ

09 룬

스크롤·마우스·클릭으로 움직여 보세요

「Q.」 이탤릭 + 굵은 질문 + 펼침(+ → ×), 라이브러리 없이 <details>.

수치 + 회전 45° .3s · 줄 1px #e6e8e8 · 46rem

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .qa details(09_lunn/site/index.html 257~268·529~537행) · 기록표 derm_09 §5(16)·§12

쓰기 좋은 곳 모든 병원(AEO 질문-직답, FAQPage).

주의 본문 문답과 FAQPage JSON-LD 1:1(SOP 41).

코드 조각 knowledge/web_design/ref_library/snippets/SE-41_FAQ-details.html

코드 보기

불러오는 중…

SE-42

장비 흐르는 띠

09 룬

장비 사진 카드가 36초로 흐르고 오버 시 멈춘다.

수치 카드 16rem · 사진 14rem · 36s · 목록 2벌

조각 새 창 ↗09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · .eq .space-track(09_lunn/site/index.html 270~278·540~554행) · 기록표 derm_09 §5(17)

쓰기 좋은 곳 장비가 많은 병원.

주의 장비 상표 사진은 권리 확인(데모는 상표 없는 정물).

코드 조각 knowledge/web_design/ref_library/snippets/SL-07_marquee-오버멈춤.html

코드 보기

불러오는 중…

SE-43

칼럼 3열 카드

09 룬

썸네일 16:10 + 분류 + 제목 + 요약 3줄 + 오버 확대.

수치 3열 간격 1.6rem · line-clamp 3 · 오버 1.05 .8s + 제목 색

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · #col .cc(09_lunn/site/index.html 280~291·557~564행) · 기록표 derm_09 §5(18)

쓰기 좋은 곳 원장 칼럼·블로그 최신 글.

주의 칼럼 페이지와 내부 링크 3방향(SOP 41 A7).

SE-44

오시는 길 · 지도 + 정보 표

01 유넬 · 07 리베리 · 09 룬

지도 | 정보 표(위치·전화·시간·지하철·주차), 줄 사이 가는 선.

수치 01 라떼 바탕, 라벨 7.5rem, 전화 24px · 07 2단 간격 56, 줄 선 cocoa 15% · 09 2단 + 지도 22rem grayscale .4

조각 새 창 ↗01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 .loc(01_eunel 211~227행, 전화 Aboreto) · 07 .loc(07_reberry 199~208행, 라벨칸 192px) · 09 #loc(09_lunn 293~302행, 큰 전화 + 카카오) → demo-luelle · moarin · mire · 기록표 각 §5

쓰기 좋은 곳 모든 병원 메인 끝.

주의 지도 iframe 은 헤드리스 캡처에서 빈 칸(TE-18). 자리 표시 IM-12.

코드 조각 knowledge/web_design/ref_library/snippets/IM-12_불러오기-자리표시.html

코드 보기

불러오는 중…

SE-45

위치 + 푸터 한 화면

02 온우

스냅·패널 구조의 마지막 화면에 지도 | 3칸 정보(가는 선) + 그 아래 푸터를 함께 넣는다.

수치 04 아이보리 위아래 80 · 지도 버튼 148×45 흰 65% · 정보 Noto Sans KR 13px · FX-15

조각 새 창 ↗02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 #s6(지도 617×300 + 흐르는 띠 + 푸터) · 04 #s5(지도 420×568 + 3칸 + #2c2c2c 푸터) · 06 .p-loc(지도 420×290 + 베이지 푸터) · 08 #loc(사진 42% / 짙은 판 58%) → demo-soel · orne · linea · noul · 기록표 각 §5

쓰기 좋은 곳 SC-02·03·04 의 마지막 장.

주의 1920×1080 에서 푸터가 밀려나지 않게 지도 높이를 칸에 맞춤(04 고친 일).

코드 조각 knowledge/web_design/ref_library/snippets/FX-15_위치블록-떠오름-맥박.html

코드 보기

불러오는 중…

SE-46

푸터

01 유넬 · 03 아도 · 05 마그마 · 09 룬

로고 → 정책 링크(비급여·개인정보·이용약관) → 사업자 정보 한 줄 → 저작권, 데모는 「디자인 데모」 문구.

수치 05 610px, 위 235 로고·Tel/Location(G마켓 산스) · 3칸 간격 120 · 사업자 10px · 저작권 7px(04)

출처 · 쓰기 좋은 곳 · 주의

출처 01 브라운 가운데(01_eunel 229~236행) · 03 민트 3단 + 원형 로고(03_ado 211~226행) · 05 검정 큰 푸터 위로 70px 겹침(05_magma 118~133행) · 09 남색 + 큰 전화(09_lunn 304~309행) → 각 데모 · 기록표 각 §5

쓰기 좋은 곳 모든 페이지.

주의 의료기관은 비급여 진료비·외국인환자 유치 등록번호(03) 표기. 정책 2종 필수(SOP 41 A5).

SE-47

첫 방문 팝업

07 리베리

가운데 카드(이미지 | 탭 목록) + 「오늘 하루 그만 보기 / 닫기」.

수치 620px(38.75rem) · 탭 12rem · NV-20

조각 새 창 ↗07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · #pop(07_reberry/site/index.html 229~248·486~494행) · 02·05·08 같은 장치 · 기록표 derm_07 §5

쓰기 좋은 곳 진료 일정·휴진 안내.

주의 매번 뜨면 이탈 → 오늘 하루 저장.

코드 조각 knowledge/web_design/ref_library/snippets/NV-20_첫방문팝업-오늘하루.html

코드 보기

불러오는 중…

SE-48

서브 히어로 + 반투명 탭 띠(하위 페이지 머리)

기록표(하위 페이지) · 01 유넬 · 02 온우 · 04 르디테 · 06 위아르 · 07 리베리

스크롤·마우스·클릭으로 움직여 보세요

하위 페이지 맨 위 질감 사진 + 영문 대문자 제목, 아래 유리 탭 띠(집 · 1차 메뉴 · 2차 탭, 현재 탭만 굵게).

수치 높이 360~414px · 탭 띠 흰 35% + blur(12px 는 추정) · 위 모서리만 둥글게

조각 새 창 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_01 §9 · derm_02 §6 · derm_04 §6(414px, 탭 띠 폭 약 1,280, rgba(255,255,255,.35) + 흐림, SUIT 16) · derm_06 §6(흰 머리글 104px 2차 탭 Tenor 14 #b29f8f) · derm_07 §6(360px, 「● 영문 ●」 Belleza 40)

쓰기 좋은 곳 모든 하위 페이지 공통 머리.

주의 탭이 많으면 모바일 가로 스크롤.

코드 조각 knowledge/web_design/ref_library/snippets/SE-48_서브히어로-탭띠.html

코드 보기

불러오는 중…

SE-49

하위 페이지 끝맺음(신청 → 위치 → 푸터)

02 온우 · 04 르디테 · 06 위아르 · 07 리베리 · 09 룬

하위 페이지 블록 · 기록표 도식

모든 하위 페이지를 같은 꼬리로 끝낸다 — 「○○ 맞춤형 ⌄」 + 알약 「신청하기」 → 위치·정보 블록 → 푸터(06 은 공간 슬라이드 → 위치 → 푸터).

수치 06 Space 슬라이드 900 → 위치 840 → 푸터 · 07 위치 표 → 코코아 푸터

출처 · 쓰기 좋은 곳 · 주의

출처 기록표 derm_02 §6 · derm_04 §6 · derm_06 §6 · derm_07 §6 · derm_09 §6(BOOK CONSULTATION 띠)

쓰기 좋은 곳 하위 페이지 전부(어디서 들어와도 공간·위치를 보게).

주의 같은 틀을 반복해 제작 속도를 올린다.

SE-50

가격표 + 분류 알약 세로 탭

기록표(하위 페이지) · 01 유넬 · 02 온우

하위 페이지 블록 · 기록표 도식

왼쪽 세로 사진 카드 | 가운데 가격표(항목·₩가격·「부터」·찜하기) | 오른쪽 분류 알약 세로 탭(고정).

수치 sticky 탭 · 가격 오른쪽 정렬

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_01 §9 메디컬 솔루션·가격 4쪽(position:sticky 2 = 가격표 오른쪽 분류 탭 고정, §10) · derm_02 §7 고민별 시술 추천(가격표 카드 + VAT + 담기, 오른쪽 고민 알약)

쓰기 좋은 곳 비급여 가격을 공개하는 병원.

주의 가격 표시는 의료광고·비급여 고지 기준을 확인.

SE-51

가격 아코디언 표 · 가격 카드 세로 목록 · 비급여수가표

기록표(하위 페이지) · 07 리베리 · 08 하루영 · 04 르디테

하위 페이지 블록 · 기록표 도식

시술명 아코디언 안 표(구분·1부위·3부위·풀얼굴) / 횟수별 가격 카드 세로 목록 / 골드 머리 줄 표.

수치 04 머리 #b9ae8f · 선 #d9d4c8 · 줄무늬 #f5f3f0 · 가격 #e17a1a

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_07 §7 시술&가격(검색 + 분류 알약 9 + 흰 카드 아코디언 + VAT 별도 + 카카오 문의) · derm_08 §7 시술 상세(「5회 ○원 │ 10회 ○원」·VAT) · derm_04 §7 비급여수가표(골드 베이지 머리 줄·짝수 줄 연한 바탕·가격 주황)

쓰기 좋은 곳 가격 투명 공개형.

주의 할인율·정가 취소선은 심의 확인.

SE-52

STEP 단계

기록표(하위 페이지) · 01 유넬 · 02 온우 · 03 아도

하위 페이지 블록 · 기록표 도식

시술·예약 단계를 번호로 — STEP 01~06 선 아이콘 사각 타일 / STEP 01~05 아코디언 + 작은 사진 / 시술 전·중·후 3 STEP.

수치 기록표에 크기 수치 없음

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_01 §9 시술 안내(STEP 01~06 타일, CHECK 01~03) · derm_02 §7 컨설팅(STEP 01~05 아코디언 + 오른쪽 사진) · derm_03 §7 ⑪ 통증 관리 3 STEP(세로 알약 라벨 + 민트 판 아이콘 3칸) · derm_01 예약 STEP 01~03

쓰기 좋은 곳 시술 상세·예약 안내.

주의 메인 과정 블록은 SE-27.

SE-53

시술 상세 5단 고정 틀(정밀형)

기록표(하위 페이지) · 04 르디테

하위 페이지 블록 · 기록표 도식

인트로(도장 + 인용) → 슬로건 사진 배너 → 추천 대상 타임라인 → 기술 차별화 흑백 카드 → 약속 카드 + 거대 워터마크.

수치 배너 257px · 차별화 카드 3~4장(가라몬드 대문자 라벨) · 약속 카드 4~6장(Point 01 이탤릭 · 제목 18/500 · 선 · 설명 14) · 판 #ededed

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_04 §7 디테일 필러·리프팅·부스터(같은 5단, 장비 물결 선·제품 앰플 띠 추가)·§9

쓰기 좋은 곳 시술 수십 쪽을 한 틀로 찍어낼 때.

주의 워터마크 글자는 장식(aria-hidden).

SE-55

시술 상세 상품형 14단(커머스)

기록표(하위 페이지) · 03 아도

하위 페이지 블록 · 기록표 도식

상품 히어로(바로 예약·장바구니) → 로고 띠 → 3D 이미지 → 레이더 차트 → 문제 제기 → 단면 STEP → 피부층 → 고민 카드 → 흐린 띠 → 분석 장비 → 통증 3 STEP → 유형 사례 → 추천 체크 → 손글씨 + 예약 버튼.

수치 시술 상세 83쪽 · 버튼 [바로 예약하기(민트)][장바구니 담기(테두리)]

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_03 §7 시술 상세 83쪽 공통 틀(분류별 11쪽 확인)·§9

쓰기 좋은 곳 광고 착지 페이지(시술 = 상품).

주의 장바구니·예약은 백엔드 필요. 레이더 차트 수치는 근거 필요.

SE-56

시술 상세 반복 틀(근거형)

기록표(하위 페이지) · 09 룬 · 06 위아르

하위 페이지 블록 · 기록표 도식

흑백 장비 히어로 → 전후 비교 + 면책 → 남색 INDICATIONS 띠 → PROCESS 4단 → 관련 칼럼 → 질감 카드 5장 → BOOK CONSULTATION 띠.

수치 06 탭 판 교체 .55s cubic-bezier(.22,1,.36,1) · 카드 .48s

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_09 §6 시술 상세 공통 틀 · derm_06 §7 상세(알약 탭 띠 + 둥근 사진 | 흰 카드 세로 목록, care-fs-pane-in .55s)

쓰기 좋은 곳 장비·프로그램이 많은 병원의 상세.

주의 전후·면책은 심의 기준.

SE-57

원장 소개 상세

기록표(하위 페이지) · 01 유넬 · 04 르디테 · 05 마그마 · 06 위아르 · 07 리베리

하위 페이지 블록 · 기록표 도식

원장마다 좌우 번갈아 사진 | 이름 + 직함 + 손글씨 서명 + 약력 목록, 필요하면 학회 사진 벽·유튜브·블로그 카드.

수치 06 이름 33.75px 700 · 약력 15px

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_01 §9(좌우 번갈아·위쪽만 둥근 사진) · derm_04 §7(「aka」 이탤릭 + 증명사진 뒤 도장) · derm_05 §7(캡슐 사진 + 서명 + 학회 모자이크 + story-marquee 100s) · derm_06 §7(Specialist 둥근 사진 240×410 + W 워터마크) · derm_07 §7(컷아웃 + 유튜브 3열 + 블로그 3열) · derm_09 §7(DR. 큰 세리프 · ATTITUDE TRIFECTA)

쓰기 좋은 곳 의료진 페이지.

주의 학력·경력은 사실 확인(고객 확인 항목).

SE-58

철학·브랜드 페이지 블록

기록표(하위 페이지) · 02 온우 · 06 위아르 · 07 리베리 · 09 룬 · 04 르디테

하위 페이지 블록 · 기록표 도식

MISSION/VISION 알약 라벨 · CORE VALUES 카드 3장 · 반원 아치 위 캡슐 사진 · 손글씨 워터마크 · 세로 단어 목록.

수치 기록표에 크기 수치 일부만(06 Tenor 22.5)

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_02 §7 소개(MISSION/VISION 알약 + 알약 사진 교차 · CORE VALUES 3 · 연구소 · 4가지 탐구 영역) · derm_06 §7(반원 아치 · Wellness/Aesthetics) · derm_07 §7(● CLINIC PHILOSOPHY ● + 흐린 필기체 · OUR PROMISE 카드 2) · derm_09 §7(Luminary·Ultimate·Novelty·Nobility 세로 단어) · derm_04 §7(콜라주)

쓰기 좋은 곳 병원 소개 페이지.

주의 문구는 고객 언어로 새로 쓴다.

SE-59

공간 둘러보기 페이지

기록표(하위 페이지) · 04 르디테 · 01 유넬 · 03 아도

하위 페이지 블록 · 기록표 도식

가운데 크게 + 양옆 작게 보이는 슬라이드 / 크기 다른 7칸 모자이크 / 점 넘김 슬라이드.

수치 04 slidesPerView 1.2 · spaceBetween 20 · speed 650 · delay 4200(effects.md)

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_04 §7 둘러보기(가운데 사진 한쪽 모서리 아치형, 원형 화살표, Swiper slidesPerView 1.2·speed 650·delay 4200) · derm_01 §9 공간 모자이크 7칸 · derm_03 §7 점 넘김

쓰기 좋은 곳 공간 소개 하위 페이지.

주의 같은 사진 반복 금지.

SE-60

기록표(하위 페이지) · 01 유넬 · 02 온우 · 05 마그마

하위 페이지 블록 · 기록표 도식

알약 탭(Volume·Contour·Skin 등) + 제품 사진 카드(비활성 흐리게) / 성분 탭 + 제품 가로 스크롤 / 라인업 카드 3장.

수치 02 띠 36s linear

출처 · 쓰기 좋은 곳 · 주의

출처 기록표만 — derm_01 §9 시술 안내(제품 탭) · derm_02 §7 Glow(성분 알약 탭 + 제품 가로 스크롤, onuglowComboMarquee 36s) · derm_05 §7 Treatment(라인업 베이지 카드 3 + 효과 태그 알약 4)

쓰기 좋은 곳 필러·스킨부스터 제품 라인업.

주의 제품 상표·허가 사항 확인.

9 글꼴 조합 FT · 9개

FT-01

유넬 조합 — 42dot Sans + Cormorant Garamond + Tenor Sans + Aboreto

01 유넬

영문 대형 · Cormorant Garamond 300

Quietly, Beautifully

한글 제목 · 42dot Sans 600

바뀐 곳은 몰라도, 좋아진 건 알아보도록

영문 라벨 · Tenor Sans 400

WHY CLINIC · SIGNATURE

숫자 · Aboreto 400

02 . 000 . 0000

한글 산세리프 + 영문 가는 세리프 대형 + 영문 라벨 산세리프 + 숫자 전용 장식 글꼴, 4종 역할 분담.

수치 본문 16~18.4px 행간 1.75 · 섹션 제목 28.8~30.4px 600 · 히어로 한글 33.6px 400 자간 .02em · 영문 히어로 64px 300 자간 -.02em · 철학 57.6px · 라벨 16~18.4px 자간 .06~.1em 대문자 · 큰 라벨 35.2px .05em · 전화 Aboreto 24px · 시간 20px

01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · 01_eunel/site/index.html 12행(불러오기)·19~22행(변수) · 기록표 derm_01 §3 · effects.md @font-face(Aboreto·Cormorant·Ephesis·Tenor Sans)

쓰기 좋은 곳 차분한 고급형(R1).

주의 42dot Sans 가 안 뜨면 Pretendard. 원본은 손글씨 Ephesis 도 불러옴(데모 미사용).

코드 보기

<link href="https://fonts.googleapis.com/css2?family=42dot+Sans:[email protected]&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Tenor+Sans&family=Aboreto&display=swap" rel="stylesheet">

FT-02

온우 조합 — Belleza + SUIT

02 온우

영문 제목 · Belleza 400

Find the balance within

한글 부제 · SUIT 600

가장 편안한 균형을 찾는 곳

한글 본문 · SUIT 400

분석부터 맞춤 계획까지 한 흐름으로 설계합니다.

영문 제목·라벨은 Belleza 하나(굵기 400 고정), 한글은 SUIT.

수치 Belleza 히어로 40px · 섹션 30px · 라벨 15~20px · SUIT 히어로 한글 20px 600 · 본문 13~14px 행간 1.5~1.65 · 카드 제목 15~16px 600~700 · 메뉴 13px 600

02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · 02_onu/site/index.html 12~13행·27~28행 · 기록표 derm_02 §3·§11(웰컴체 → SUIT 대체)

쓰기 좋은 곳 컨설팅형·모던(R2), 전문직에도 무난.

주의 원본 영업시간 글꼴 welcome(웰컴체)은 공개 CDN 없음 → SUIT.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Belleza&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css" rel="stylesheet">

FT-03

아도 조합 — Italiana(Amandine 대체) + Pretendard

03 아도

장식 제목 · Italiana 400

ABOUT LIEN

인용 · Pretendard 500

“이 생각을 담았습니다.”

본문 · Pretendard 400

끊긴 결을 다시 잇는 일을 먼저 합니다.

장식 세리프 대문자 대형 제목 + 한글 전부 Pretendard.

수치 히어로 90px 500 행간 1 · 섹션 제목 80px 대문자 · Pretendard 히어로 부제 22px · 인용 30px 500 자간 -.6 · 본문 13px 자간 -.13 행간 1.5 · 메뉴 14px 500 · CTA 16px 700 대문자 자간 .45

03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · 03_ado/site/index.html 11~12·25~26행 · 기록표 derm_03 §3·§11

쓰기 좋은 곳 세계관·고전미(R9).

주의 Amandine 은 유료 → Italiana(대안 Bodoni Moda 300). 80px 제목은 모바일 2.8rem.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" rel="stylesheet">

FT-04

르디테 조합 — EB Garamond + 42dot Sans + SUIT + Noto Sans KR + Belleza

04 르디테

영문 이탤릭 · EB Garamond 400

Real change begins in the smallest lines.

한글 제목 · 42dot Sans 300

오늘의 결을 다듬는 시간

위치 정보 · Noto Sans KR 400

진료 시간 안내 · 월화수목 11:00–20:30

라벨 · Belleza 400

Location

영문 가라몬드(이탤릭 섞기) + 한글 42dot, 탭·가격표는 SUIT, 위치·푸터는 Noto Sans KR, 「Location」 만 Belleza.

04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · 04_ledetail/site/index.html 11~12·25~28행 · 기록표 derm_04 §3

쓰기 좋은 곳 정밀·미니멀(R3).

주의 AppleGaramond(자체 호스팅) → EB Garamond. 한 화면 글꼴 2종 원칙(SOP 41 B4)과 부딪히면 SUIT·Noto 는 하위 페이지로.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300;400;500;700&family=Belleza&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css" rel="stylesheet">

FT-05

마그마 조합 — 42dot Sans + G마켓 산스 + Playfair Display + Comfortaa

05 마그마

세로 카피 · 42dot Sans 400

오래 남는 따스함

카드 단어 · 42dot Sans 500

GROUND · CORE · FLOW

큰 번호 · Playfair Display 700

00 01 02

로고 · Comfortaa 700

huion clinic

거의 모든 글자를 42dot Sans 하나로, 라벨·번호만 G마켓 산스, 큰 번호는 Playfair 700, 로고는 둥근 기하학 글자.

수치 메뉴 14px 500 -.02em · 카드 단어 21px 500 자간 .14em 대문자 · 카드 문장 15px 행간 1.85 -.035em · 세로 글자 24px 자간 1.6px · 하위 제목 30px 700~800 주황 · Tel./Location. G마켓 15px · 장비 번호 Playfair 90px

05 휘온 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 05 마그마 → 휘온 demo-huion.visiogrowth.co.kr · 05_magma/site/index.html 11·15·22~23행 · 기록표 derm_05 §3

쓰기 좋은 곳 감성 무드(R4).

주의 로고 대체 Comfortaa 는 「추정」 대체. G마켓 산스는 @font-face 로 직접.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300;400;500;700;800&family=Comfortaa:wght@700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
@font-face{font-family:"GmarketSans";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff") format("woff");font-display:swap}

FT-06

위아르 조합 — Hahmlet + Tenor Sans + Belleza + Noto Sans KR

06 위아르

한글 세리프 제목 · Hahmlet 300

결이 고운 진료, 머무는 편안함

영문 부제 · Tenor Sans 400

QUIET CARE FOR EVERY SEASON

숫자 · Belleza 400

Space 1/18

정보 · Noto Sans KR 400

월~금 10:00 - 20:00

한글 큰 제목을 함렛 세리프 300 으로(드문 선택), 영문 부제는 Tenor Sans, 숫자·Space 는 Belleza, 정보는 Noto Sans KR.

수치 한글 제목 Hahmlet 300 36px 행간 1.35 자간 -.03em · 시그니처 30px · 원 안 24.5px · 영문 Tenor 18px 자간 .08em 흰 80% · 하위 탭 14px · Space Belleza 30px · 1/18 20px · 주소 Noto 13px · 원장 이름 33.75px 700

06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · 06_weare/site/index.html 11·28~31행 · 기록표 derm_06 §3

쓰기 좋은 곳 프라이빗 여성의원·한방·고전(R5).

주의 전부 Google Fonts(대체 불필요). 함렛 100 은 아주 가늘어 작은 글자에 쓰지 않는다.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Belleza&family=Hahmlet:wght@100;300;400&family=Noto+Sans+KR:wght@400;500;600;700&family=Tenor+Sans&display=swap" rel="stylesheet">

FT-07

리베리 조합 — Belleza + Asta Sans

07 리베리

영문 제목 · Belleza 400

MEDICAL TEAM

한글 인용 · Asta Sans 500

한 사람의 피부, 그 사람의 속도에 맞춘 관리

이름 · Asta Sans 800

김원장

영문 섹션 제목 Belleza, 한글 전부 Asta Sans 가변(300~800) — 2종으로 끝.

수치 영문 clamp(26px,2.7vw,36px) 행간 1.45 · 라벨 20px · 한글 메뉴 16px 500 · 히어로 clamp(30px,2.9vw,40px) · 인용 36px 500 자간 -1.8px(강조 700) · 본문 clamp(17px,1.5vw,20px) 행간 1.75 · 이름 30px 800 · 전체 자간 -.16px

07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · 07_reberry/site/index.html 11·23~24행 · 기록표 derm_07 §3

쓰기 좋은 곳 1인 원장·따뜻한 미니멀(R6). 2종이라 관리가 쉽다.

주의 무료(대체 불필요).

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Asta+Sans:[email protected]&family=Belleza&display=swap" rel="stylesheet">

FT-08

하루영 조합 — Marcellus + Cormorant Garamond 이탤릭 + Asta Sans

08 하루영

영문 대문자 · Marcellus 400

SLOWER THAN TIME, EVERY DAY.

시술명 · Cormorant Garamond 700

Slow Lifting · Skin Boosters

한글 · Asta Sans 400

오늘보다, 조금 더 천천히.

영문 대문자 제목·버튼·메뉴 Marcellus, 시술명은 Cormorant 700 이탤릭(제품 라인처럼), 한글 Asta Sans.

수치 히어로 40px 행간 1.3 · 「HA:RU:OO」 32px 자간 .12em · 섹션 24px · 버튼 20px · 메뉴 14px · 시술명 이탤릭 22px · 한글 히어로 30px · 본문 12~14px 행간 1.7~1.9

08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · 08_haruyoung/site/index.html 11·23~25행 · 기록표 derm_08 §3

쓰기 좋은 곳 시간·콘셉트형(R7).

주의 Marcellus 는 대문자 위주로.

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@1,600;1,700&family=Asta+Sans:[email protected]&display=swap" rel="stylesheet">

FT-09

룬 조합 — Cormorant Garamond + Playfair Display + Pretendard

09 룬

세리프 제목 · Cormorant Garamond 400

Refining the Details.

큰 이탤릭 · Playfair Display 400

Illuminating

본문 · Pretendard 400

원장이 상담부터 시술 설계까지 직접 확인합니다.

영문 세리프 제목·이탤릭 키워드는 Cormorant(자체 siteSerif 대체), 큰 이탤릭·숫자는 Playfair, 본문 Pretendard.

수치 히어로 한 줄 약 34px · 키워드 이탤릭 30px · 「LUNN,」 50px 이탤릭 · 단계 번호 48px #99a4ad · 「Q.」 20px · 본문 13~15px 행간 1.6 · 카드 제목 21~24px 600~700

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · 09_lunn/site/index.html 11~12·25~27행 · 기록표 derm_09 §3·§11

쓰기 좋은 곳 정밀·영문(외국인)·전문직(R8·R10).

주의 siteSerif → Cormorant(대안 Newsreader).

코드 보기

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" rel="stylesheet">

10 색 팔레트 CL · 9개

CL-01

베이지·모카 4단 톤(유넬)

01 유넬

크림#f9f2ea → #f9f2ea

샌드#e2d8cd → #e2d8cd

라떼#dacec0 → #dacec0

오프화이트#faf8f5 → #faf8f5

모카 글자#4e3b2c → #4e3b2c

브라운 버튼#614836 → #614836

골드베이지#ceb393 → #ceb393

웜화이트#f8ebdd → #f8ebdd

크림·샌드·라떼·오프화이트 4단 바탕 + 모카 글자 + 브라운 버튼 + 골드베이지 포인트.

수치 01 데모는 원본 색을 그대로 썼다(색 이동은 02 부터).

01 루엘르 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 01 유넬 → 루엘르 demo-luelle.visiogrowth.co.kr · 01_eunel/site/index.html 16~18행 · 기록표 derm_01 §4

쓰기 좋은 곳 차분한 고급, 따뜻한 피부과.

주의 바탕 4단을 섹션마다 바꿔 구획(철학 크림 → 의료진 샌드 → 위치 라떼).

코드 보기

:root{
  --c1:#f9f2ea;  /* 크림 (원본 #f9f2ea) */
  --c2:#e2d8cd;  /* 샌드 (원본 #e2d8cd) */
  --c3:#dacec0;  /* 라떼 (원본 #dacec0) */
  --c4:#faf8f5;  /* 오프화이트 (원본 #faf8f5) */
  --c5:#4e3b2c;  /* 모카 글자 (원본 #4e3b2c) */
  --c6:#614836;  /* 브라운 버튼 (원본 #614836) */
  --c7:#ceb393;  /* 골드베이지 (원본 #ceb393) */
  --c8:#f8ebdd;  /* 웜화이트 (원본 #f8ebdd) */
}

CL-02

모카·아이보리 2톤 → 로즈 코코아(온우)

02 온우

모카(진)#372c26 → #3b2d2c

푸터#322825 → #342725

모카(중)#4f4238 → #5b4744

보조#8a7356 → #8c6f68

포인트#c2ae8b → #c4a596

아이보리#f0ece1 → #f1ebe6

아이보리2#efede8 → #efe9e5

크림 글자#e8e1cc → #ecdfd8

짙은 모카와 아이보리 두 톤으로 판을 바꾸고 골드베이지 선 — 데모는 장밋빛으로.

수치 사진 덮개 rgba(55,44,38,.34)·rgba(45,36,32,.38) · 머리글 아이보리 95%

02 소엘 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 02 온우 → 소엘 demo-soel.visiogrowth.co.kr · 02_onu/site/index.html 17~27행 · 기록표 derm_02 §4·§11

쓰기 좋은 곳 컨설팅형·모던 클래식.

주의 2톤이라 판 전환이 선명 — 사진도 같은 톤으로.

코드 보기

:root{
  --c1:#3b2d2c;  /* 모카(진) (원본 #372c26) */
  --c2:#342725;  /* 푸터 (원본 #322825) */
  --c3:#5b4744;  /* 모카(중) (원본 #4f4238) */
  --c4:#8c6f68;  /* 보조 (원본 #8a7356) */
  --c5:#c4a596;  /* 포인트 (원본 #c2ae8b) */
  --c6:#f1ebe6;  /* 아이보리 (원본 #f0ece1) */
  --c7:#efe9e5;  /* 아이보리2 (원본 #efede8) */
  --c8:#ecdfd8;  /* 크림 글자 (원본 #e8e1cc) */
}

CL-03

민트 유리 + 벽돌 빨강 포인트 → 아쿠아(아도)

03 아도

민트#a9cac6 → #a7c5cf

민트 진#387869 → #3a6f7f

민트 연#eaf4f3 → #e9f2f5

민트 연2#dbe9e7 → #d9e7ec

눌림#9ab9b5 → #98b5bf

글자 회청#647371 → #62707a

벽돌 빨강#b93429 → #b93429

민트를 제목·푸터·태그에, 행동 버튼만 벽돌 빨강 하나 — 데모는 푸른 아쿠아, 빨강은 유지.

수치 빨강 오버 #9a2b22 · 회색 #727171 · 전후 바탕 #f6f6f6 · 의료진 띠 #6f6f6f

03 리엔 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 03 아도 → 리엔 demo-lien.visiogrowth.co.kr · 03_ado/site/index.html 16~24행 · 기록표 derm_03 §4·§11

쓰기 좋은 곳 청량·고전 세계관.

주의 포인트 색은 하나만, 행동 버튼에만.

코드 보기

:root{
  --c1:#a7c5cf;  /* 민트 (원본 #a9cac6) */
  --c2:#3a6f7f;  /* 민트 진 (원본 #387869) */
  --c3:#e9f2f5;  /* 민트 연 (원본 #eaf4f3) */
  --c4:#d9e7ec;  /* 민트 연2 (원본 #dbe9e7) */
  --c5:#98b5bf;  /* 눌림 (원본 #9ab9b5) */
  --c6:#62707a;  /* 글자 회청 (원본 #647371) */
  --c7:#b93429;  /* 벽돌 빨강 (원본 #b93429) */
}

CL-04

흰 바탕 + 모카 → 올리브 토프(르디테)

04 르디테

모카(진)#372c26 → #373126

모카(깊은)#302620 → #302b20

크림 글자#e8e1cc → #e6e3cc

아이보리#f0ece1 → #efede0

골드 베이지#b9ae8f → #b5b18f

표 선#d9d4c8 → #d8d6c8

줄무늬#f5f3f0 → #f4f4ef

푸터#2c2c2c → #2c2c2c

흰 바탕·흑백 사진 판 위주, 색은 아이보리 위치 블록과 짙은 회색 푸터로만 — 데모 색상 +18°.

수치 회색 판 #ededed·#e3e3e3·#f6f6f6 · 본문 #727272 · 푸터 #2c2c2c(그대로) · 가격 주황 #e17a1a · 하늘 #4aa3cf

04 오르네 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 04 르디테 → 오르네 demo-orne.visiogrowth.co.kr · 04_ledetail/site/index.html 16~24행 · 기록표 derm_04 §4·§11

쓰기 좋은 곳 갤러리형 미니멀.

주의 색을 거의 안 쓰는 것이 핵심.

코드 보기

:root{
  --c1:#373126;  /* 모카(진) (원본 #372c26) */
  --c2:#302b20;  /* 모카(깊은) (원본 #302620) */
  --c3:#e6e3cc;  /* 크림 글자 (원본 #e8e1cc) */
  --c4:#efede0;  /* 아이보리 (원본 #f0ece1) */
  --c5:#b5b18f;  /* 골드 베이지 (원본 #b9ae8f) */
  --c6:#d8d6c8;  /* 표 선 (원본 #d9d4c8) */
  --c7:#f4f4ef;  /* 줄무늬 (원본 #f5f3f0) */
  --c8:#2c2c2c;  /* 푸터 (원본 #2c2c2c) */
}

CL-05

주황·크림·짙은 갈색 → 앰버 오렌지(마그마)

05 마그마

마그마 주황#ce591b → #ce741b

하위 제목#c95c2c → #c9742c

스플래시#9f321c → #9f461c

짙은 갈색#2a1f1a → #2a211a

하위 히어로#352115 → #35261a

크림 글자#fcefe4 → #fcf3e4

카드 선#d87948 → #d88f48

푸터#000000 → #000000

세 가지 색만 — 마그마 주황 포인트, 크림 글자, 짙은 갈색 바탕, 검정 푸터 — 데모 색상 +9°.

수치 카드 덮개 rgba(35,21,14,.2 → .62 → .82) · 머리글 #2a1f1a 88% · 회색 자리 #d9d9d9 · 푸터 #000

05 휘온 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 05 마그마 → 휘온 demo-huion.visiogrowth.co.kr · 05_magma/site/index.html 16~21행 · 기록표 derm_05 §4·§11

쓰기 좋은 곳 온기·감성 브랜딩.

주의 사진도 같은 색 계열로 맞춰야 한다(데모는 앰버 계열로 새로 만듦).

코드 보기

:root{
  --c1:#ce741b;  /* 마그마 주황 (원본 #ce591b) */
  --c2:#c9742c;  /* 하위 제목 (원본 #c95c2c) */
  --c3:#9f461c;  /* 스플래시 (원본 #9f321c) */
  --c4:#2a211a;  /* 짙은 갈색 (원본 #2a1f1a) */
  --c5:#35261a;  /* 하위 히어로 (원본 #352115) */
  --c6:#fcf3e4;  /* 크림 글자 (원본 #fcefe4) */
  --c7:#d88f48;  /* 카드 선 (원본 #d87948) */
  --c8:#000000;  /* 푸터 (원본 #000000) */
}

CL-06

웜 토프·베이지·리넨 → 로즈 토프(위아르)

06 위아르

토프 주색#958474 → #957874

베이지 머리글#c1b6a4 → #c1aba4

히어로 바탕#6f6256 → #6f5956

점 진한색#7f6d5e → #7f615e

리넨#f0ece1 → #f0e6e1

시그니처#f2ebe3 → #f2e6e3

버튼 원#efe7da → #efdfda

짙은 글자#372c26 → #372626

토프 주색 + 베이지 머리글·푸터 + 리넨 크림 세 층 — 데모 색상 -22°.

수치 떠 있는 버튼 그림자 0 10px 30px rgba(0,0,0,.18) · 히어로 덮개 radial 흰 20% + linear rgba(55,45,38,.28 → .48) + 토프 .12

06 리네아 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 06 위아르 → 리네아 demo-linea.visiogrowth.co.kr · 06_weare/site/index.html 15~27행 · 기록표 derm_06 §4·§11

쓰기 좋은 곳 여성의원·프라이빗.

주의 밝은 패널에서 점 내비 색 전환(NV-07).

코드 보기

:root{
  --c1:#957874;  /* 토프 주색 (원본 #958474) */
  --c2:#c1aba4;  /* 베이지 머리글 (원본 #c1b6a4) */
  --c3:#6f5956;  /* 히어로 바탕 (원본 #6f6256) */
  --c4:#7f615e;  /* 점 진한색 (원본 #7f6d5e) */
  --c5:#f0e6e1;  /* 리넨 (원본 #f0ece1) */
  --c6:#f2e6e3;  /* 시그니처 (원본 #f2ebe3) */
  --c7:#efdfda;  /* 버튼 원 (원본 #efe7da) */
  --c8:#372626;  /* 짙은 글자 (원본 #372c26) */
}

CL-07

세피아 코코아·샌드·크림 → 베리 코코아(리베리)

07 리베리

코코아#45362d → #45302d

딥#382b22 → #382522

라테#705e51 → #705651

샌드#cdc5b6 → #cdbfb6

라벨 브라운#614836 → #613d36

크림#fffffc → #fffefc

상세 바탕#f5f1ea → #f5efea

코코아 + 크림 + 샌드, 상세 페이지는 아주 옅은 베이지 5종을 번갈아 — 데모 색상 -16°.

수치 상세 바탕 5종 #F5F1EA·#F3F2EE·#F4F4F2·#FAF7F1·#F7F3EA · 히어로는 사진 자체가 세피아

07 모아린 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 07 리베리 → 모아린 demo-moarin.visiogrowth.co.kr · 07_reberry/site/index.html 15~23행 · 기록표 derm_07 §4·§6·§11

쓰기 좋은 곳 1인 원장·따뜻한 신뢰.

주의 형광 강조색 = 샌드.

코드 보기

:root{
  --c1:#45302d;  /* 코코아 (원본 #45362d) */
  --c2:#382522;  /* 딥 (원본 #382b22) */
  --c3:#705651;  /* 라테 (원본 #705e51) */
  --c4:#cdbfb6;  /* 샌드 (원본 #cdc5b6) */
  --c5:#613d36;  /* 라벨 브라운 (원본 #614836) */
  --c6:#fffefc;  /* 크림 (원본 #fffffc) */
  --c7:#f5efea;  /* 상세 바탕 (원본 #f5f1ea) */
}

CL-08

다크 브라운·크림 → 딥 엄버(하루영)

08 하루영

다크 브라운#3b2b1e → #35301f

크림#fffbf6 → #fcfaf3

종이 카드#fcfcf9 → #fbfbf6

베이지#ccb194 → #c9b893

탄#d3c0a8 → #d0c3a3

회색 자리#d9d9d9 → #d9d9d9

크림과 다크 브라운 두 톤 + 베이지·탄 보조 — 데모는 올리브 기운 딥 엄버.

수치 사진 덮개 rgba(59,43,30,.2) · 라이트박스 .85

08 노을 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 08 하루영 → 노을 demo-noul.visiogrowth.co.kr · 08_haruyoung/site/index.html 15~22행 · 기록표 derm_08 §4·§11 · effects.md 오버 색(beige #ccb194 · tan #d3c0a8 · brown #8d6a4d)

쓰기 좋은 곳 시간·노을 콘셉트, 차분한 다크.

주의 다크 판 위 본문 크기 키우기.

코드 보기

:root{
  --c1:#35301f;  /* 다크 브라운 (원본 #3b2b1e) */
  --c2:#fcfaf3;  /* 크림 (원본 #fffbf6) */
  --c3:#fbfbf6;  /* 종이 카드 (원본 #fcfcf9) */
  --c4:#c9b893;  /* 베이지 (원본 #ccb194) */
  --c5:#d0c3a3;  /* 탄 (원본 #d3c0a8) */
  --c6:#d9d9d9;  /* 회색 자리 (원본 #d9d9d9) */
}

CL-09

남색 그라디언트·은회 → 페트롤(룬)

09 룬

남색#16374b → #12404a

짙은 남색#0f2438 → #0b2a31

회청#435165 → #3f5560

번호#99a4ad → #94a8ad

본문#212121 → #212121

밝은 회색#f5f5f5 → #f5f6f6

구분선#d1d7db → #cfd8da

남색 → 은회 그라디언트 + 흰 바탕 남색 글자, 회청 번호 — 데모는 페트롤.

수치 덮개 lab(33.8 -1.6 -13.6 / .8) → rgba(18,64,74,.8) · 밝은 회색 #f5f5f5·#e7e7e7·#d1d7db

09 미레 데모 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 09 룬 → 미레 demo-mire.visiogrowth.co.kr · 09_lunn/site/index.html 16~24행 · 기록표 derm_09 §4·§11

쓰기 좋은 곳 정밀·의학·전문직.

주의 차가운 톤이라 사진은 따뜻한 피부톤과 대비 확인.

코드 보기

:root{
  --c1:#12404a;  /* 남색 (원본 #16374b) */
  --c2:#0b2a31;  /* 짙은 남색 (원본 #0f2438) */
  --c3:#3f5560;  /* 회청 (원본 #435165) */
  --c4:#94a8ad;  /* 번호 (원본 #99a4ad) */
  --c5:#212121;  /* 본문 (원본 #212121) */
  --c6:#f5f6f6;  /* 밝은 회색 (원본 #f5f5f5) */
  --c7:#cfd8da;  /* 구분선 (원본 #d1d7db) */
}

11 프론트엔드 기술 TE · 21개

TE-01

스택 — 레퍼런스는 Next.js + Tailwind, 우리 데모는 단일 HTML

9곳 실측·검수 도구

레퍼런스	제작 기술	추가 라이브러리	@keyframes	IO	스크롤
01 유넬	Next.js + Tailwind	없음	5	4	일반
02 온우	Next.js + Tailwind v4	Swiper	18	28	내부 상자 스냅
03 아도	Next.js + Tailwind v4	Swiper, framer-motion	7	13	일반
04 르디테	Next.js + Tailwind v4	Swiper	8	9	내부 상자 스냅
05 마그마	Next.js + Tailwind v4	Swiper	24	4	일반 + sticky 히어로
06 위아르	Next.js + Tailwind v4	Swiper, framer-motion	20	31	패널 덮기
07 리베리	Next.js + Tailwind v4	Swiper, framer-motion	4	8	일반 + 고정 구간
08 하루영	Next.js + Tailwind	framer-motion	1	4	고정 가로
09 룬	Next.js + Tailwind v4(imweb 자산)	없음	12	12	일반

9곳 모두 Next.js(React) + Tailwind CSS. 효과는 대부분 CSS 키프레임 + IntersectionObserver 클래스 토글, 슬라이드만 Swiper, 일부 framer-motion. 우리 데모는 같은 효과를 라이브러리 0개 단일 HTML 로 재현했다.

수치 Swiper 02·03·04·05·06·07 · framer-motion 03(1)·06(12)·07(22)·08(28) · 없음 01·09 · @keyframes 01 5 · 02 18 · 03 7 · 04 8 · 05 24 · 06 20 · 07 4 · 08 1 · 09 12 · 관리자 데이터 Firebase 01·02·03·04·05·07·08 · 블로그 Inblog 03·05·06 · 01·08 제작사 BIOADDLAB

출처 · 쓰기 좋은 곳 · 주의

출처 _TECH_COMPARE.md · 각 effects.md 「라이브러리 흔적」 · 기록표 각 §2·§10

쓰기 좋은 곳 제작 방식 결정 — 소규모 랜딩·데모 = 단일 HTML, 20페이지 초과·칼럼 운영 = 빌더/CMS(vg-cms)(SOP 41 B1), 몰입형은 SOP 42 A4.

주의 「Next.js 로 옮기는 것 자체가 순위 개선은 아니다」(SOP 42 A4). 프레임워크보다 초기 HTML 에 본문이 있는지가 중요.

TE-02

기본 뼈대(rem = 화면 폭 1.111%)

01 유넬

스크롤·마우스·클릭으로 움직여 보세요

1440 시안의 px 를 16 으로 나눠 rem 으로 옮기면 1920 에서도 비율이 유지되는 공통 머리. 9개 데모가 모두 이 뼈대.

수치 html{font-size:clamp(13px,1.1111vw,21px)} · 1100 이하 14px · 760 이하 15px · word-break:keep-all · img{display:block;max-width:100%} · :focus-visible 윤곽

조각 새 창 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 9개 데모 공통(01_eunel/site/index.html 26~32행 등) · _DEMO_BRIEF.md §3

쓰기 좋은 곳 모든 새 페이지의 시작.

주의 레퍼런스도 clamp() 를 많이 쓴다(01 342 · 03 146 · 04 31회) — 글자·여백을 화면 폭에 비례.

코드 조각 knowledge/web_design/ref_library/snippets/TE-02_기본뼈대.html

코드 보기

불러오는 중…

TE-03

IntersectionObserver 기준값 표준

9곳 실측·검수 도구

용도	우리 표준	원본 근거
일반 등장(요소 단위)	threshold .08 · 한 번	01 .08 · 03 .08
섹션 단위 등장	threshold .2 + rootMargin "0px 0px -50px 0px"	02 11회(가장 많음) · -40px 7회
아래쪽 여유 등장(framer)	rootMargin "0px 0px -80px 0px" · once	07 margin -80px 13곳 · 08 -80px · 09 -60px
섹션 + 아래 10%	threshold .08 + "0px 0px -10% 0px"	03 ScrollRevealText
스냅 상자 안	root = 상자 · threshold 0 · 나가면 리셋	04 replayWhenOutOfView
reveal 라이브러리	threshold .15	09
커튼	.2	01 solution
조각 맞춤	.25	09 데모
진행선	.5	09 데모
숫자	.6	09 데모
점 내비 현재 섹션	[.35,.5,.7]	06
배경 숨쉬기 켜기	[0,.38,.55,.75], 비율 ≥ .38	06
하위 페이지 등장	.22 / .08 + "-14% 0px -22% 0px"	06 하위
단계별 진행	[0,.3,.6,1]	07 4회

등장·숫자·진행선 등 화면 진입 감지 기준값을 9곳 실측에서 골라 표준으로.

수치 아래 표. 9곳 공통 rootMargin:"200px" 1~2회는 사진 지연 로딩용으로 보인다(추정). threshold:5 는 Swiper 끌기 문턱(5px)이 같은 글자로 잡힌 것(추정).

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md 「IntersectionObserver 기준값」 · 기록표 각 §10 · 데모 IO 코드

쓰기 좋은 곳 등장 효과를 만들 때 이 표의 값만 쓴다.

주의 한 번 재생(unobserve)이 기본, 반복은 스냅에서만(TE-19). 같은 출처 iframe 안의 IO 도 바깥 화면 기준으로 동작.

TE-04

시간·곡선 표준

9곳 실측·검수 도구

용도	시간	곡선	근거
색·투명 오버	.15s	cubic-bezier(.4,0,.2,1)(Tailwind 기본)	01·03·05
머리글 바탕	.3~.5s	ease-out	02·04·05·06
메뉴·드롭다운	.2~.38s	(.22,1,.36,1) / ease-out	01 .38 · 02 .3 · 07 .2
아코디언	.2~.5s	ease-out / ease-in-out	05 .2 · 01 .5
슬라이드 넘김	.3s(Swiper 300) · .48s · .65s	ease	02·06·07 · 03 · 04 하위
사진 교차	1.2~1.6s	ease-in-out / ease	02 · 03
등장	.6~1.4s	(.22,1,.36,1) · (.16,1,.3,1) · (.4,0,.2,1) · ease-out	02·04·08 · 07 · 01 · 03·05
패널 전환	1.05s	(.76,0,.24,1)	06
스프링 카드	.9s	(.34,1.4,.64,1)	08
반복 맥박	1.8~3.2s	ease-in-out / (.45,0,.55,1)	07 · 08 · 02 · 01
자리 표시 깜빡임	2s	(.4,0,.6,1)	Tailwind pulse
숨쉬기·회전·띠	22~28s · 28s · 18~100s	ease-in-out · linear	06 · 04 · 02·03·05·09

전환 시간과 곡선을 용도별로 고정한다.

수치 아래 표 · 곡선 빈도 01 (.4,0,.2,1) 11회 · 02 (.22,1,.36,1) 21회 · 06 (.22,1,.36,1) 8회 + (.76,0,.24,1) 1회 · 07 [.16,1,.3,1](framer)

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md 「transition 빈도」·「곡선」 · 기록표 01 §6(전환 시간 표준) · 데모 :root 변수

쓰기 좋은 곳 :root 에 --ease·--fast·--base·--slow 로 두고 전 사이트 공용(FX-06).

주의 등장에 ease-in 을 쓰지 않는다(느리게 시작하면 굼뜨다, 추정).

TE-05

이미지 불러오기

9곳 실측·검수 도구

<link rel="preload" as="image" href="img/hero.jpg">
<img src="img/hero.jpg" alt="…" fetchpriority="high">           <!-- 첫 화면 -->
<img src="img/space_2.jpg" alt="…" loading="lazy" width="1600" height="1000"> <!-- 나머지 -->

첫 화면 사진은 먼저, 나머지는 늦게, 자리는 미리 잡는다.

수치 loading=lazy 01 20 · 02 15 · 04 31 · 05 19 · 06 11 · 07 33 · 09 73 · srcset 9곳 모두 0(Next Image 가 변환) · webp/avif 직접 표기 0 · 원본 Next Image q 75(07 원장 q 88)

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md 「HTML·SEO」 · 데모 <link rel="preload" as="image">(01·02) · fetchpriority="high"(06·07) · _DEMO_BRIEF §3(폭 1200~2400) · SOP 42 B8

쓰기 좋은 곳 모든 사진.

주의 첫 화면(LCP) 사진은 lazy 금지 + fetchpriority 하나만. aspect-ratio 로 자리(CLS). 슬라이드는 다음 장만 미리 eager. WebP/AVIF 비교(SOP 42 B8).

코드 보기

<link rel="preload" as="image" href="img/hero.jpg">
<img src="img/hero.jpg" alt="…" fetchpriority="high">           <!-- 첫 화면 -->
<img src="img/space_2.jpg" alt="…" loading="lazy" width="1600" height="1000"> <!-- 나머지 -->

TE-06

글꼴 불러오기

9곳 실측·검수 도구

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Belleza&family=Hahmlet:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" rel="stylesheet">

Google Fonts 는 한 줄로 묶고 display=swap, 한글 무료 글꼴은 jsdelivr.

수치 preconnect 2줄(googleapis·gstatic crossorigin) · css2?family=…&display=swap · Pretendard v1.3.9 · SUIT@2 · G마켓 산스 noonfonts woff · 한글 서브셋 목표 ≤200KB(SOP 42 §4-1)

출처 · 쓰기 좋은 곳 · 주의

출처 데모 9개 <head> · 각 effects.md(next/font 자체 호스팅 02 4 · 04 4 · 05 1 · 06 10 · 07 2 · 09 1 / Google Fonts 01 6 · font-display 다수)

쓰기 좋은 곳 모든 페이지.

주의 유료 글꼴은 무료 대체(FT 각 항목). 한 화면 2종 원칙(SOP 41 B4). 무료 글꼴은 바로 설치·사용, 유료·불명만 대표 확인.

코드 보기

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Belleza&family=Hahmlet:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" rel="stylesheet">

TE-07

뷰포트 단위·안전 영역

9곳 실측·검수 도구

히어로 100svh · 고정 판 100dvh(대체 100vh 먼저 선언) · 300dvh(07) · viewport-fit=cover(SOP 41 B6)

모바일 주소창 높이 변화에 흔들리지 않게 svh/dvh, 아이폰 하단은 safe-area.

수치 히어로 100svh · 고정 판 100dvh(대체 100vh 먼저 선언) · 300dvh(07) · viewport-fit=cover(SOP 41 B6)

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md(svh/dvh 01 11 · 02 22 · 03 16 · 04 33 · 05 13 · 06 26 · 07 18 · 08 12 / env(safe-area) 01 9 · 02 4 · 03 6 · 04 16 · 05 8 · 06 10) · 데모 히어로 100svh(01·02·03)·패널 100dvh(06)·떠 있는 버튼 env(safe-area-inset-bottom)(01)

쓰기 좋은 곳 히어로·스냅·패널·떠 있는 버튼.

주의 dvh 는 스크롤 중 값이 바뀌어 레이아웃이 흔들릴 수 있다 → 히어로는 svh(추정).

TE-08

유리 효과(backdrop-filter) 값

9곳 실측·검수 도구

머리글 blur 10px(01) · 12px(02·05) · 25px + 흰 8%(03) · 8px(07) · 드롭다운 4px(02)·12px(07) · 탭 띠 흰 35%(04) · LANG 6px(06) · 아이콘 줄 8~10px(03·09) · 라이트박스 4px(08) · 팝업 2px(05)

머리글·탭 띠·드롭다운·떠 있는 버튼의 흐림 값 모음.

수치 머리글 blur 10px(01) · 12px(02·05) · 25px + 흰 8%(03) · 8px(07) · 드롭다운 4px(02)·12px(07) · 탭 띠 흰 35%(04) · LANG 6px(06) · 아이콘 줄 8~10px(03·09) · 라이트박스 4px(08) · 팝업 2px(05)

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md backdrop-filter(01 10 · 02 10 · 03 12 · 04 6 · 05 12 · 06 9 · 07 12 · 08 6 · 09 10) · 데모 선택자(NV-01·03·13, SE-48)

쓰기 좋은 곳 사진 위에 뜨는 판.

주의 -webkit-backdrop-filter 병기. 큰 면적 흐림은 저사양 기기에서 무거울 수 있다(추정) → 바탕 알파를 높여 흐림 값을 낮춘다.

TE-09

움직임 줄이기(prefers-reduced-motion) 표준 블록

9곳 실측·검수 도구

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .in-anim,.fu,.rv,.reveal-hidden{opacity:1!important;transform:none!important}
}

운영체제에서 「동작 줄이기」를 켠 사람에게는 움직임을 끄고 내용은 바로 보이게.

수치 아래 코드

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md prefers-reduced-motion(01 1 · 02 11 · 03 4 · 04 4 · 05 3 · 06 7 · 07 2 · 08 3 · 09 2) · 9개 데모 마지막 @media 블록 · 04 원문(키프레임 4개 animation:none, 글자 opacity 1!important)

쓰기 좋은 곳 모든 페이지 맨 끝(필수).

주의 opacity 0 으로 시작하는 등장 요소를 반드시 보이게 되돌린다(안 하면 빈 화면). 특수 스크롤(08)·스플래시(05)·인트로(08)는 끄거나 건너뛴다.

코드 보기

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .in-anim,.fu,.rv,.reveal-hidden{opacity:1!important;transform:none!important}
}

TE-10

상태 저장(localStorage·sessionStorage)

9곳 실측·검수 도구

값 = new Date().toDateString()(데모) 또는 YYYY-MM-DD(07 원본)

팝업 「오늘 하루 그만 보기」·스플래시 세션 1회·언어 선택을 브라우저에 기억.

수치 값 = new Date().toDateString()(데모) 또는 YYYY-MM-DD(07 원본)

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md(localStorage 01 10 · 02 16 · 03 25 · 04 7 · 05 39 · 06 34 · 07 21 · 08 28 · 09 10 / sessionStorage 05 9 · 06 24) · 데모 키 soel_pop_hide · huion_pop_hide · huion_splash_seen · moarin_pop · noul_pop_hide · 원본 07 reberry_popup_hidden_until

쓰기 좋은 곳 NV-20 · HE-05 · NV-18.

주의 키 이름을 사이트마다 다르게. 비공개 창 예외 → try/catch. 검수 때 demo_shots 에 키 주입.

TE-11

구조화 데이터(JSON-LD)

9곳 실측·검수 도구

스크롤·마우스·클릭으로 움직여 보세요

병의원 기본형 MedicalClinic + 주소·좌표·진료시간(+ 원장 Physician).

수치 6곳 사용 · 3곳 없음(03·04·08 → 데모에 추가)

조각 새 창 ↗

출처 · 쓰기 좋은 곳 · 주의

출처 데모 9개 <head> · effects.md JSON-LD 유형(01 MedicalClinic·PostalAddress·OpeningHours / 02 + Physician·GeoCoordinates / 05 PostalAddress·Geo·Opening / 06 MedicalClinic·Geo / 07 + WebSite·ContactPoint·LocationFeatureSpecification / 09 Person·WebSite / 03·04·08 없음)

쓰기 좋은 곳 모든 병원 메인.

주의 화면에 보이는 정보만 선언(SOP 41 A6). FAQ·Article 일괄 삽입 금지(SOP 42 C5). hreflang 은 9곳 모두 0.

코드 조각 knowledge/web_design/ref_library/snippets/TE-11_JSON-LD-MedicalClinic.html

코드 보기

불러오는 중…

TE-12

지도 임베드 + 지도 버튼

9곳 실측·검수 도구

https://maps.google.com/maps?q=<검색어>&hl=ko&z=16&output=embed · loading=lazy · 필터 01 sepia(.25) saturate(.85) · 08 grayscale(.3) sepia(.2) · 09 grayscale(.4) · 버튼 04 148×45 흰 65%

구글 지도 iframe(키 없이) + 불러오는 동안 자리 표시 + 네이버·카카오·구글 지도 버튼.

수치 https://maps.google.com/maps?q=<검색어>&hl=ko&z=16&output=embed · loading=lazy · 필터 01 sepia(.25) saturate(.85) · 08 grayscale(.3) sepia(.2) · 09 grayscale(.4) · 버튼 04 148×45 흰 65%

출처 · 쓰기 좋은 곳 · 주의

출처 데모 지도(01 .map iframe · 02 · 03 · 04 「지도 표시 중」 · 06 · 07 · 08 · 09) · 원본 01 Google Maps 22 · 03 네이버 141 · 07 네이버 지도 API 176(effects.md) · 기록표 03·04·06 지도 버튼

쓰기 좋은 곳 오시는 길(SE-44·45).

주의 국내 환자 비중이 크면 네이버 지도 링크를 먼저(03·07 원본은 네이버 지도). 헤드리스 캡처에서 빈 칸(TE-18).

TE-13

외부 연동 지도(원본이 쓴 것 → 우리 처리)

9곳 실측·검수 도구

Firebase(관리자: 이벤트·팝업·전후·가격·회원·예약) 01 59 · 02 62 · 03 77 · 04 68 · 05 86 · 07 78 · 08 98 · GA/GTM 01 48 · 02 40 · 03 50 · 05 56 · 06 46 · 09 79 · 카카오 03 56 · 08 55 · 네이버 03 141 · 07 176 · 08 148 · Inblog 03·05·06 · 구글 번역 위젯 03·04 · Vimeo 03 · next-intl 07

원본 사이트가 붙인 외부 서비스와 우리 데모·운영의 처리 방식.

수치 Firebase(관리자: 이벤트·팝업·전후·가격·회원·예약) 01 59 · 02 62 · 03 77 · 04 68 · 05 86 · 07 78 · 08 98 · GA/GTM 01 48 · 02 40 · 03 50 · 05 56 · 06 46 · 09 79 · 카카오 03 56 · 08 55 · 네이버 03 141 · 07 176 · 08 148 · Inblog 03·05·06 · 구글 번역 위젯 03·04 · Vimeo 03 · next-intl 07

출처 · 쓰기 좋은 곳 · 주의

출처 각 effects.md JS 사용량 · 기록표 각 §10 「외부 연동」

쓰기 좋은 곳 운영 사이트 설계 때 「관리자에서 올리면 바로 반영」이 필요한 데이터 구분.

주의 우리 운영은 vg-cms(관리자·폼·칼럼)로(SOP 41 B1·B8). 정적 데모는 화면만. 측정 태그는 measurement-setup.

TE-14

검수 체크리스트(demo_shots.mjs)

9곳 실측·검수 도구

node tools/web_design/demo_shots.mjs <URL> <출력폴더> 1920,1024,375 '{"팝업키":"@today"}' → w{폭}_first.png · w{폭}_snap_NN.png(내부 스크롤 상자 자동 감지) · w{폭}_full.png + JSON {overflowX, wide[], brokenImg[], jsErrors[]} · 통과 = overflowX 0 · brokenImg 0 · jsErrors 0

1920·1024·375 에서 첫 화면·스냅 섹션별·전체 캡처를 찍고 가로 넘침·깨진 사진·스크립트 오류를 보고한다.

수치 node tools/web_design/demo_shots.mjs <URL> <출력폴더> 1920,1024,375 '{"팝업키":"@today"}' → w{폭}_first.png · w{폭}_snap_NN.png(내부 스크롤 상자 자동 감지) · w{폭}_full.png + JSON {overflowX, wide[], brokenImg[], jsErrors[]} · 통과 = overflowX 0 · brokenImg 0 · jsErrors 0

출처 · 쓰기 좋은 곳 · 주의

출처 tools/web_design/demo_shots.mjs · _DEMO_BRIEF.md §4·§5-3 · 9개 기록표 §11(검수 결과)

쓰기 좋은 곳 모든 데모·시안·배포 전.

주의 특수 구조는 전체 캡처가 안 맞는다 — 스냅(w*_snap) · 패널(패널별 캡처) · 가로(스크롤 위치별 h_NN) · sticky 히어로(화면 단위 이어붙임). 레퍼런스 캡처와 나란히 1회 이상 비교. 정지 캡처만으로 모션 PASS 금지(SOP 42).

TE-15

함정 — 전역 변수 이름이 window 속성과 겹침

02 온우

피할 이름 top · parent · self · name · status · length · close · open · origin · frames · history · location · screen · scroll · event · external

스크립트 맨 위에서 const top = … 처럼 window 속성 이름을 쓰면 「이미 선언됨」 오류로 스크립트 전체가 멈춘다.

수치 피할 이름 top · parent · self · name · status · length · close · open · origin · frames · history · location · screen · scroll · event · external

출처 · 쓰기 좋은 곳 · 주의

출처 02 소엘 데모에서 실제로 겪음 — derm_02 §11 「고친 실수 ① 전역 변수 이름 top 은 window.top 과 겹쳐 스크립트 전체가 멈춘다 → toTop」 · 02_onu/site/index.html 484행 주석

쓰기 좋은 곳 모든 인라인 스크립트.

주의 즉시 실행 함수 (()=>{ … })() 로 감싸 전역을 만들지 않는다(코드 조각 전부 이 방식).

TE-16

함정 — 공통 img{max-width:100%} 가 퍼즐 홈을 막음

02 온우

.ph img{width:calc(100% + var(--r));max-width:none}

반원 홈용으로 사진을 「카드 폭 + 반지름」만큼 넓혔는데 공통 규칙 max-width:100% 가 넓힘을 잘라 홈이 사진 안쪽으로 들어갔다.

수치 .ph img{width:calc(100% + var(--r));max-width:none}

출처 · 쓰기 좋은 곳 · 주의

출처 derm_02 §11 「고친 실수 ② 공통 img{max-width:100%} 가 반원 홈용 넓힘을 막는다 → 해당 사진만 max-width:none」 · 02_onu/site/index.html 178행

쓰기 좋은 곳 일부러 틀보다 크게 그리는 모든 사진(퍼즐 홈·패럴랙스·확대 배경).

주의 리셋 규칙과 개별 규칙의 충돌은 화면으로 확인(코드만 보고 통과 금지).

TE-17

함정 — 어사이드 fullPage 캡처가 첫 화면을 반복

9곳 실측·검수 도구

대책 = 화면 높이만큼 스크롤하며 화면 단위로 끝까지 찍기(opt.max 기본 34장) → 필요하면 이어붙이기

어사이드 브라우저에서 page.screenshot({fullPage:true}) 를 쓰면 페이지 전체가 아니라 첫 화면이 반복된 그림이 나온다.

수치 대책 = 화면 높이만큼 스크롤하며 화면 단위로 끝까지 찍기(opt.max 기본 34장) → 필요하면 이어붙이기

출처 · 쓰기 좋은 곳 · 주의

출처 tools/web_design/ref_collect_aside.js 111행 주석 · 메모리 derm-demo9-reference-pipeline(함정) · vg 병원 홈 예시 스크롤 기록(fullPage 반복 캡처)

쓰기 좋은 곳 레퍼런스 수집·모바일 전체 캡처.

주의 레퍼런스 조사 브라우저는 어사이드만(크롬 계열 금지, 대표 2026-10-02). 같은 어사이드 계정을 두 작업자가 동시에 쓰면 page 를 뺏긴다(u0·u2·u3 분리).

TE-18

함정 — 헤드리스 캡처에서 지도·sticky 히어로가 빔

01 유넬 · 04 르디테 · 06 위아르 · 05 마그마

대책 = 지도 자리 표시(IM-12)·「지도 표시 중」 안내(04) / sticky·특수 구조는 화면 단위 이어붙임

헤드리스 전체 캡처에서는 구글 지도 iframe 이 늦게 떠 빈 판으로 찍히고, sticky 히어로는 하얗게 찍힌다. 실제 브라우저에서는 정상.

수치 대책 = 지도 자리 표시(IM-12)·「지도 표시 중」 안내(04) / sticky·특수 구조는 화면 단위 이어붙임

출처 · 쓰기 좋은 곳 · 주의

출처 derm_01 §8 「구글 지도 iframe 은 헤드리스 캡처에서만 비고 실제 브라우저에서는 뜬다」 · derm_04 §11 · derm_06 §11 · derm_05 §11 「히어로가 sticky 라 헤드리스 전체 캡처에서 히어로가 하얗게 찍힌다」

쓰기 좋은 곳 검수 보고 해석.

주의 빈 지도를 「깨짐」으로 보고하지 말고, 실제 브라우저 스크롤 화면으로 한 번 확인했다고 적는다.

TE-19

함정 — 등장 효과를 반복 재생할지 정해야 함

01 유넬 · 03 아도 · 04 르디테

기본 = 한 번(unobserve) · 반복 = 스냅 상자(SC-02) 데스크톱에서만(FX-04)

원본 여러 곳(01·03·04)은 화면을 벗어나면 다시 숨겼다가 재생한다. 그대로 쓰면 전체 캡처·인쇄·빠른 스크롤에서 빈 화면이 생긴다.

수치 기본 = 한 번(unobserve) · 반복 = 스냅 상자(SC-02) 데스크톱에서만(FX-04)

출처 · 쓰기 좋은 곳 · 주의

출처 derm_01 §12 「벗어나면 in-view 제거 → 대체: 한 번 켜면 유지」 · derm_03 §12 「대체: 한 번만 재생」 · derm_04 §11·§12 「모바일(스냅 해제)에서는 한 번만」 · SOP 41 C3 「이미 지나왔는가 판정식」

쓰기 좋은 곳 등장 효과를 넣는 모든 페이지.

주의 반복을 쓰더라도 첫 화면·인쇄·움직임 줄이기에서는 보이게. 빠른 스크롤로 지나친 요소도 켜지게(IO 가 놓칠 수 있다).

TE-20

의료광고 대응(전후 사진·가격·숫자·표현)

07 리베리 · 03 아도

데모 대응 = 07 BEFORE & AFTER → CARE NOTE · CURRENT EVENT → CURRENT NOTICE · 09 전후 + 「Results vary」 면책

레퍼런스의 전후 사진 카드·할인 가격 포스터·실적 숫자는 그대로 옮기지 않고 심의 기준을 먼저 확인한다.

수치 데모 대응 = 07 BEFORE & AFTER → CARE NOTE · CURRENT EVENT → CURRENT NOTICE · 09 전후 + 「Results vary」 면책

출처 · 쓰기 좋은 곳 · 주의

출처 derm_07 §9 「주의(의료광고)… 데모에서는 같은 카드 틀에 관리 과정 기록 사진과 진료 안내 공지」 · derm_03 §9(전후 흐림 = 회원 유도, 심의상 노출 제한과도 맞물림) · _DEMO_BRIEF 절대 규칙(최고·유일·보장·100%·부작용 없음 금지) · industries/medical.md

쓰기 좋은 곳 SE-33·34·35·36·62·63, FX-12.

주의 고객 사이트에서는 고객·심의 확인 전 전후 사진 섹션을 만들지 않는다. 숫자는 근거 출처를 함께.

TE-21

배포 — Cloudflare Pages + visiogrowth.co.kr 하위 도메인

9곳 실측·검수 도구

처음 1회 npx -y wrangler@latest pages project create <프로젝트> --production-branch main --force → npx -y wrangler@latest pages deploy <폴더> --project-name <프로젝트> --branch main --commit-dirty=true → python3 tools/web_design/pages_domain.py <프로젝트> <하위도메인> → <프로젝트>.pages.dev 200 확인

단일 HTML 데모·카탈로그를 Pages 프로젝트로 올리고 하위 도메인을 붙인다.

수치 처음 1회 npx -y wrangler@latest pages project create <프로젝트> --production-branch main --force → npx -y wrangler@latest pages deploy <폴더> --project-name <프로젝트> --branch main --commit-dirty=true → python3 tools/web_design/pages_domain.py <프로젝트> <하위도메인> → <프로젝트>.pages.dev 200 확인

출처 · 쓰기 좋은 곳 · 주의

출처 _DEMO_BRIEF §5-3 · tools/web_design/pages_domain.py · 메모리 derm-demo9-reference-pipeline(배포)

쓰기 좋은 곳 데모·시안·내부 카탈로그.

주의 배포는 deploy:site 승인 범위(SOP 41 C6·SOP 42 C8). 토큰 값은 출력하지 않는다. 새 wrangler 는 project create 없이 deploy 하면 Workers 로 넘기다 실패 → --force 로 먼저 생성.

데모 9곳 레퍼런스 구조·효과·글꼴 그대로, 메인 색만 살짝 바꾼 가상 병원

레시피 업종·분위기별 추천 조합 — 번호를 누르면 해당 카드로

1 스크롤 구조 SC · 7개

2 첫 화면 연출 HE · 10개

3 등장 효과 FX · 15개

4 이미지·카드 효과 IM · 13개

5 슬라이드·흐르는 띠 SL · 9개

6 내비·버튼·떠 있는 요소 NV · 22개

7 글자 꾸밈 TX · 11개

8 섹션 패턴 SE · 72개