μ„€μΉ˜ κ°€μ΄λ“œ

μ»€μŠ€ν…€ μœ„μ ― β€” λΈŒλ ˆμ΄ν¬ν¬μΈνŠΈλ³„ Figma λ””μžμΈ κ°€μ΄λ“œ

κ°œμš”

ν•˜λ‚˜μ˜ μ»€μŠ€ν…€ μœ„μ ―μ— PC / νƒœλΈ”λ¦Ώ / λͺ¨λ°”일 각각 λ‹€λ₯Έ Figma λ””μžμΈμ„ 등둝할 수 μžˆμŠ΅λ‹ˆλ‹€. 방문자의 ν™”λ©΄ 크기에 따라 μžλ™μœΌλ‘œ μ μ ˆν•œ λ””μžμΈμ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

브레이크포인트 κΈ°μ€€

λ””λ°”μ΄μŠ€λ·°ν¬νŠΈ λ„ˆλΉ„ν•„μˆ˜ μ—¬λΆ€
PC1024px μ΄μƒν•„μˆ˜
νƒœλΈ”λ¦Ώ800 ~ 1023px선택 (λ―Έμ„€μ • μ‹œ PC λ””μžμΈ μ‚¬μš©)
λͺ¨λ°”일800px λ―Έλ§Œμ„ νƒ (λ―Έμ„€μ • μ‹œ νƒœλΈ”λ¦Ώ β†’ PC 순으둜 폴백)

1. μ»€μŠ€ν…€ μœ„μ ― 생성/νŽΈμ§‘

1-1. Figma λ””μžμΈ μ€€λΉ„

Figmaμ—μ„œ 각 λ””λ°”μ΄μŠ€μš© ν”„λ ˆμž„μ„ λ§Œλ“­λ‹ˆλ‹€.

λ””λ°”μ΄μŠ€κΆŒμž₯ ν”„λ ˆμž„ λ„ˆλΉ„
PC1440px
νƒœλΈ”λ¦Ώ800px
λͺ¨λ°”일375 ~ 437px
μ„Έ ν”„λ ˆμž„ λͺ¨λ‘ 같은 Figma 파일 μ•ˆμ— μžˆμ–΄λ„ 되고, 각각 λ‹€λ₯Έ νŒŒμΌμ΄μ–΄λ„ λ©λ‹ˆλ‹€.

1-2. λ””μžμΈ κ°€μ Έμ˜€κΈ°

κ΄€λ¦¬μžμ—μ„œ μ»€μŠ€ν…€ > μƒˆλ‘œ λ§Œλ“€κΈ° (λ˜λŠ” κΈ°μ‘΄ μœ„μ ― νŽΈμ§‘)둜 μ΄λ™ν•©λ‹ˆλ‹€.

μ„Έ 개의 κ°€μ Έμ˜€κΈ° μ„Ήμ…˜μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€:

PC λ””μžμΈ (β‰₯1024px)
[Figma URL μž…λ ₯] [κ°€μ Έμ˜€κΈ°]
νƒœλΈ”λ¦Ώ λ””μžμΈ (800~1023px)
선택사항 β€” λ―Έμ„€μ • μ‹œ PC λ””μžμΈ μ‚¬μš©
λͺ¨λ°”일 λ””μžμΈ (<800px)
선택사항 β€” λ―Έμ„€μ • μ‹œ νƒœλΈ”λ¦Ώβ†’PC 폴백

κ°€μ Έμ˜€κΈ° μˆœμ„œ:

  1. PC λ””μžμΈ β€” λ°˜λ“œμ‹œ λ¨Όμ € κ°€μ Έμ˜€μ„Έμš”. CTA λ²„νŠΌ 감지가 PC λ””μžμΈ κΈ°μ€€μœΌλ‘œ λ™μž‘ν•©λ‹ˆλ‹€.
  2. νƒœλΈ”λ¦Ώ λ””μžμΈ β€” 선택사항. νƒœλΈ”λ¦Ώ μ „μš© λ ˆμ΄μ•„μ›ƒμ΄ μžˆμ„ λ•Œλ§Œ μ„€μ •ν•©λ‹ˆλ‹€.
  3. λͺ¨λ°”일 λ””μžμΈ β€” 선택사항. λͺ¨λ°”일 μ „μš© λ ˆμ΄μ•„μ›ƒμ΄ μžˆμ„ λ•Œλ§Œ μ„€μ •ν•©λ‹ˆλ‹€.

1-3. Figma URL 볡사 방법

  1. Figmaμ—μ„œ μ›ν•˜λŠ” ν”„λ ˆμž„μ„ μ„ νƒν•©λ‹ˆλ‹€.
  2. 우츑 νŒ¨λ„μ—μ„œ ν”„λ ˆμž„μ΄ μ„ νƒλœ μƒνƒœμ—μ„œ λΈŒλΌμš°μ € μ£Όμ†Œμ°½μ˜ URL을 λ³΅μ‚¬ν•©λ‹ˆλ‹€.
  3. URL에 ?node-id= νŒŒλΌλ―Έν„°κ°€ ν¬ν•¨λ˜μ–΄ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.
https://www.figma.com/design/ABC123/MyDesign?node-id=1-234

1-4. CTA λ²„νŠΌ μ„€μ •

PC λ””μžμΈμ—μ„œ κ°μ§€λœ λ²„νŠΌμ— λŒ€ν•΄ CTA μ•‘μ…˜μ„ μ„€μ •ν•©λ‹ˆλ‹€:

  • URL 이동 β€” μ§€μ •ν•œ URL둜 μƒˆ νƒ­ μ—΄κΈ°
  • 쿠폰 볡사 β€” ν΄λ¦½λ³΄λ“œμ— μ½”λ“œ 볡사
  • μ „ν™” κ±ΈκΈ° β€” μ „ν™”λ²ˆν˜Έλ‘œ μ—°κ²°
CTA 섀정은 λͺ¨λ“  λΈŒλ ˆμ΄ν¬ν¬μΈνŠΈμ—μ„œ κ³΅ν†΅μœΌλ‘œ μ μš©λ©λ‹ˆλ‹€.

1-5. 미리보기

우츑 λ―Έλ¦¬λ³΄κΈ°μ—μ„œ PC / Tablet / Mobile ν† κΈ€λ‘œ 각 λ””λ°”μ΄μŠ€λ³„ ν‘œμ‹œλ₯Ό ν™•μΈν•©λ‹ˆλ‹€.

1-6. μ €μž₯

생성 (λ˜λŠ” μ €μž₯) λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ embed μŠ€ν¬λ¦½νŠΈκ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.


2. Embed 슀크립트 μ„€μΉ˜

μ €μž₯ ν›„ ν‘œμ‹œλ˜λŠ” 슀크립트 νƒœκ·Έλ₯Ό λ³΅μ‚¬ν•©λ‹ˆλ‹€:

<script src="https://biz.pyrocnc.co.kr/embed/loader.min.js?siteId=YOUR_SITE_ID&widgetId=YOUR_WIDGET_ID" defer></script>

이 ν•˜λ‚˜μ˜ μŠ€ν¬λ¦½νŠΈκ°€ 방문자 ν™”λ©΄ 크기λ₯Ό κ°μ§€ν•˜μ—¬ μžλ™μœΌλ‘œ μ μ ˆν•œ λ””μžμΈμ„ ν‘œμ‹œν•©λ‹ˆλ‹€.


3. μ‡Όν”ΌνŒŒμ΄ (Shopify) μ„€μΉ˜ 방법

방법 A: ν…Œλ§ˆ μ½”λ“œμ— 직접 μ‚½μž… (전체 νŽ˜μ΄μ§€)

  1. Shopify κ΄€λ¦¬μž > 온라인 μŠ€ν† μ–΄ > ν…Œλ§ˆ 둜 이동
  2. ν˜„μž¬ ν…Œλ§ˆμ˜ ... > μ½”λ“œ νŽΈμ§‘ 클릭
  3. Layout ν΄λ”μ—μ„œ theme.liquid νŒŒμΌμ„ μ—½λ‹ˆλ‹€
  4. </body> νƒœκ·Έ λ°”λ‘œ μœ„μ— 슀크립트λ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€:
    <!-- PopupHub μ»€μŠ€ν…€ μœ„μ ― -->
    <script src="https://biz.pyrocnc.co.kr/embed/loader.min.js?siteId=YOUR_SITE_ID&widgetId=YOUR_WIDGET_ID" defer></script>
  </body>
</html>
  1. μ €μž₯ 클릭
theme.liquid에 λ„£μœΌλ©΄ μŠ€ν† μ–΄ 전체 νŽ˜μ΄μ§€μ—μ„œ νŒμ—…μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

방법 B: νŠΉμ • νŽ˜μ΄μ§€μ—λ§Œ ν‘œμ‹œ

  1. Shopify κ΄€λ¦¬μž > 온라인 μŠ€ν† μ–΄ > ν…Œλ§ˆ > μ½”λ“œ νŽΈμ§‘
  2. Templates λ˜λŠ” Sections ν΄λ”μ—μ„œ μ›ν•˜λŠ” νŽ˜μ΄μ§€ ν…œν”Œλ¦Ώμ„ μ—½λ‹ˆλ‹€
  • 메인 νŽ˜μ΄μ§€: index.liquid λ˜λŠ” index.json
  • μƒν’ˆ νŽ˜μ΄μ§€: product.liquid
  • μ»¬λ ‰μ…˜ νŽ˜μ΄μ§€: collection.liquid
  1. ν•΄λ‹Ή 파일의 맨 μ•„λž˜μ— 슀크립트λ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€
  2. μ €μž₯ 클릭

방법 C: μ»€μŠ€ν…€ Liquid 블둝 (Shopify 2.0 ν…Œλ§ˆ)

  1. Shopify κ΄€λ¦¬μž > 온라인 μŠ€ν† μ–΄ > ν…Œλ§ˆ > μ»€μŠ€ν„°λ§ˆμ΄μ¦ˆ
  2. μ›ν•˜λŠ” μ„Ήμ…˜μ—μ„œ 블둝 μΆ”κ°€ > μ»€μŠ€ν…€ Liquid 선택
  3. 슀크립트 νƒœκ·Έλ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€:
<script src="https://biz.pyrocnc.co.kr/embed/loader.min.js?siteId=YOUR_SITE_ID&widgetId=YOUR_WIDGET_ID" defer></script>
  1. μ €μž₯ 클릭

4. 카페24 (Cafe24) μ„€μΉ˜ 방법

방법 A: 전체 νŽ˜μ΄μ§€μ— 적용

  1. 카페24 κ΄€λ¦¬μž > λ””μžμΈ > λ””μžμΈ νŽΈμ§‘ 으둜 이동
  2. 쒌츑 파일 λͺ©λ‘μ—μ„œ layout ν΄λ”μ˜ basic_layout.html 을 μ—½λ‹ˆλ‹€
  3. </body> νƒœκ·Έ λ°”λ‘œ μœ„μ— 슀크립트λ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€:
    <!-- PopupHub μ»€μŠ€ν…€ μœ„μ ― -->
    <script src="https://biz.pyrocnc.co.kr/embed/loader.min.js?siteId=YOUR_SITE_ID&widgetId=YOUR_WIDGET_ID" defer></script>
</body>
</html>
  1. μ €μž₯ 클릭
basic_layout.html에 λ„£μœΌλ©΄ μ‡Όν•‘λͺ° 전체 νŽ˜μ΄μ§€μ—μ„œ νŒμ—…μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€.

방법 B: νŠΉμ • νŽ˜μ΄μ§€μ—λ§Œ ν‘œμ‹œ

  1. 카페24 κ΄€λ¦¬μž > λ””μžμΈ > λ””μžμΈ νŽΈμ§‘
  2. 쒌츑 파일 λͺ©λ‘μ—μ„œ μ›ν•˜λŠ” νŽ˜μ΄μ§€ νŒŒμΌμ„ μ—½λ‹ˆλ‹€:
  • 메인 νŽ˜μ΄μ§€: main.html
  • μƒν’ˆ 상세: product/detail.html
  • μƒν’ˆ λͺ©λ‘: product/list.html
  • 이벀트 νŽ˜μ΄μ§€: board/event.html
  1. 파일 λ‚΄μš© 맨 μ•„λž˜μ— 슀크립트λ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€
  2. μ €μž₯ 클릭

방법 C: μŠ€λ§ˆνŠΈλ””μžμΈ μ•± μ‚¬μš©

  1. 카페24 κ΄€λ¦¬μž > λ””μžμΈ > λ””μžμΈ νŽΈμ§‘
  2. 상단 μŠ€λ§ˆνŠΈλ””μžμΈ νŽΈμ§‘ λͺ¨λ“œλ‘œ μ „ν™˜
  3. μ›ν•˜λŠ” μ˜μ—­μ„ 클릭 > HTML νŽΈμ§‘
  4. μ μ ˆν•œ μœ„μΉ˜μ— 슀크립트λ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€
  5. μ €μž₯ 클릭

5. 폴백 λ™μž‘

λͺ¨λ“  브레이크포인트λ₯Ό μ„€μ •ν•˜μ§€ μ•Šμ•„λ„ λ©λ‹ˆλ‹€. λ―Έμ„€μ • μ‹œ λ‹€μŒ μˆœμ„œλ‘œ ν΄λ°±ν•©λ‹ˆλ‹€:

λͺ¨λ°”일 β†’ νƒœλΈ”λ¦Ώ β†’ PC
μ„€μ • μƒνƒœPC ν™”λ©΄νƒœλΈ”λ¦Ώ ν™”λ©΄λͺ¨λ°”일 ν™”λ©΄
PC만 등둝PC λ””μžμΈPC λ””μžμΈPC λ””μžμΈ
PC + λͺ¨λ°”일PC λ””μžμΈPC λ””μžμΈλͺ¨λ°”일 λ””μžμΈ
PC + νƒœλΈ”λ¦ΏPC λ””μžμΈνƒœλΈ”λ¦Ώ λ””μžμΈνƒœλΈ”λ¦Ώ λ””μžμΈ
μ „λΆ€ 등둝PC λ””μžμΈνƒœλΈ”λ¦Ώ λ””μžμΈλͺ¨λ°”일 λ””μžμΈ

6. μ£Όμ˜μ‚¬ν•­

  • μŠ€ν¬λ¦½νŠΈλŠ” ν•˜λ‚˜λ§Œ μ‚½μž…ν•˜μ„Έμš”. 브레이크포인트 μ „ν™˜μ€ 슀크립트 λ‚΄λΆ€μ—μ„œ μžλ™ μ²˜λ¦¬λ©λ‹ˆλ‹€.
  • PC λ””μžμΈμ„ λ°˜λ“œμ‹œ λ¨Όμ € λ“±λ‘ν•˜μ„Έμš”. CTA λ²„νŠΌ 감지가 PC λ””μžμΈ κΈ°μ€€μž…λ‹ˆλ‹€.
  • Figma 토큰 섀정이 ν•„μš”ν•©λ‹ˆλ‹€. κ΄€λ¦¬μž > μ„€μ •μ—μ„œ Figma Personal Access Token을 등둝해야 ν•©λ‹ˆλ‹€.
  • κΈ°μ‘΄ μœ„μ ―κ³Ό ν˜Έν™˜λ©λ‹ˆλ‹€. 브레이크포인트λ₯Ό μ„€μ •ν•˜μ§€ μ•Šμ€ κΈ°μ‘΄ μ»€μŠ€ν…€ μœ„μ ―μ€ 이전과 λ™μΌν•˜κ²Œ λ™μž‘ν•©λ‹ˆλ‹€.
  • 슀크립트 μœ„μΉ˜: </body> λ°”λ‘œ μœ„μ— λ„£λŠ” 것을 ꢌμž₯ν•©λ‹ˆλ‹€. <head> μ•ˆμ— 넣어도 defer 속성 덕뢄에 λ™μž‘ν•˜μ§€λ§Œ, νŽ˜μ΄μ§€ λ Œλ”λ§ 이후 μ‹€ν–‰λ˜λŠ” </body> μœ„μΉ˜κ°€ κ°€μž₯ μ•ˆμ •μ μž…λ‹ˆλ‹€.