디자인 아틀라스
EN
❖ 디자인 스타일

핸드 드로잉 스타일

Hand-drawn style

자를 대지 않고 그린 듯 살짝 삐뚤빼뚤한 선, 마커로 칠한 듯한 채색 — 화면인데도 종이에 손으로 그린 느낌을 주는 스타일.

다른 이름: Sketchy UIDoodle style
···
html
<div class="stage">
  <svg width="0" height="0">
    <filter id="r1"><feTurbulence type="fractalNoise" baseFrequency="0.018 0.09" numOctaves="2" seed="3" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
    <filter id="r2"><feTurbulence type="fractalNoise" baseFrequency="0.018 0.09" numOctaves="2" seed="9" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
  </svg>
  <div class="card">
    <svg class="outline" viewBox="0 0 220 140" preserveAspectRatio="none">
      <rect id="o1" x="6" y="6" width="208" height="128" rx="16" fill="none" stroke="var(--fg)" stroke-width="3" filter="url(#r1)"/>
      <rect id="o2" x="6" y="6" width="208" height="128" rx="16" fill="none" stroke="var(--fg)" stroke-width="3" filter="url(#r2)" opacity="0"/>
    </svg>
    <div class="content">
      <b>Sketch it!</b>
      <svg class="squiggle" viewBox="0 0 140 14" preserveAspectRatio="none">
        <path d="M2,8 Q20,2 38,8 T74,8 T110,8 T138,8" fill="none" stroke="var(--accent-2)" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </div>
  </div>
</div>
css
.stage{width:100%;height:100%;display:grid;place-items:center}
.card{position:relative;width:min(80%,240px);aspect-ratio:220/140}
.outline{position:absolute;inset:0;width:100%;height:100%}
#o1{animation:cross 2.6s steps(1) infinite}
#o2{animation:cross 2.6s steps(1) infinite reverse}
@keyframes cross{0%,45%{opacity:1}50%,100%{opacity:0}}
.content{position:relative;height:100%;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;padding:0 12%;font-family:"Comic Sans MS","Segoe Print",cursive}
.content b{font-size:clamp(16px,4vmin,22px);color:var(--fg);transform:rotate(-1.5deg)}
.squiggle{width:70%;height:14px}

완벽하게 매끈한 벡터 곡선과 정확한 직선이 오히려 "차갑고 기계적으로" 느껴질 때, 의도적으로 불완전함을 더해 친근함과 인간미를 주려는 스타일입니다. 교육용 앱, 브레인스토밍 도구(예: Excalidraw), 캐주얼한 브랜드의 일러스트에서 자주 씁니다.

구현 방법은 크게 두 가지입니다. SVG `feTurbulence` + `feDisplacementMap` 필터로 선을 미세하게 흔들어 "손 떨림"을 흉내 내거나, 더 가볍게는 `border-radius`의 네 모서리 값을 서로 다르게(그리고 시간에 따라 살짝 바꿔가며) 줘서 완벽한 사각형이 아닌 듯한 느낌만 내는 방법입니다. 폰트도 손글씨체 느낌의 것을 골라 통일감을 줍니다.

너무 흔들면 그냥 지저분해 보이고, 폰트 크기가 작으면 가독성이 떨어집니다. 흔들림의 폭을 작게 유지하고 본문보다 제목·장식 요소에 국한해서 쓰는 게 안전합니다.