도움말/자산 사용법
상세 화면 보는 법
이미지 · 실화면 · 코드 세 탭과 FULL·모바일·태블릿·PC 네 뷰포트로 자산을 확인합니다.
세 개의 탭
| 탭 | 무엇을 보나 | 언제 쓰나 |
|---|---|---|
| 실화면 | 자산을 iframe으로 실제 렌더 | 기본값. 동작·호버·스크롤까지 그대로 확인 |
| 이미지 | 등록 시 찍어 둔 풀페이지 캡처 | 전체 흐름을 한 장으로 훑고 싶을 때 |
| 코드 | 소스 전문 + 복사 버튼 | 그대로 가져다 쓸 때 |
실화면은 sandbox iframe이라 출처가 격리됩니다. 자산 코드가 이 사이트의 데이터에 접근할 수 없습니다.
네 개의 뷰포트
- FULL — 기본값. 축소 없이 화면 폭 그대로 렌더합니다. 컴포넌트처럼 작은 자산이 쪼그라들어 보이지 않습니다.
- PC(1440) — 데스크톱 기준 폭으로 축소 렌더. 실제 데스크톱에서 어떻게 보일지 확인할 때.
- 태블릿(768) — 중간 브레이크포인트 확인.
- 모바일(390) — 가장 좁은 화면에서 줄바꿈·겹침 확인.
숫자는 Tailwind 기본 브레이크포인트와 맞춰 두었습니다 — md(768) 미만이 모바일, lg(1024) 미만이 태블릿 구간입니다.
새 창에서 열기
우측 상단 링크로 자산만 단독 페이지로 엽니다. 브라우저 개발자 도구로 직접 뜯어보거나, 실제 기기 폭에서 확인할 때 씁니다.