콘텐츠로 이동

8. 공통 기능 가이드

이 문서에서는 Admin 패널의 공통 기능들을 상세히 설명합니다.

목차

8.1. 블록 에디터 사용법

페이지의 콘텐츠는 블록 단위로 구성됩니다. 블록을 조합하여 다양한 레이아웃의 페이지를 만들 수 있습니다.

블록 추가하기

  1. 페이지 편집 화면에서 레이아웃 섹션을 찾습니다.
  2. 블록 추가 버튼을 클릭합니다.
  3. 팝업에서 원하는 블록 유형을 선택합니다.
  4. 블록의 필드를 입력합니다.

블록 선택 팝업

블록 순서 변경하기

  1. 이동할 블록의 좌측 드래그 핸들(⋮⋮)을 클릭합니다.
  2. 원하는 위치로 드래그합니다.

블록 드래그

블록 복제하기

  1. 블록 우측의 더보기(⋯) 버튼을 클릭합니다.
  2. 복제를 선택합니다.
  3. 동일한 블록이 아래에 추가됩니다.

블록 삭제하기

  1. 블록 우측의 더보기(⋯) 버튼을 클릭합니다.
  2. 삭제를 선택합니다.

블록 접기/펼치기

블록이 많을 때 편집 화면을 정리할 수 있습니다:

  1. 블록 제목 영역을 클릭하면 블록이 접힙니다.
  2. 다시 클릭하면 펼쳐집니다.

8.2. 블록 종류별 가이드 (25종)

블록 분류 개요

분류 블록 수 용도
범용 블록 13개 다양한 페이지에서 사용
통합/레이아웃 블록 6개 페이지 구조, 그리드
특수 블록 6개 특정 기능 전용

범용 블록 (13개)

1. 탑배너 (Hero)

🔗 Storybook에서 보기

페이지 최상단에 배치되는 대형 배너입니다. 배경 이미지/영상 위에 슬로건을 표시합니다.

필드:

필드 설명 필수
배경 타입 image (이미지) 또는 video (영상) ✓
배경 이미지 배경으로 사용할 이미지 조건부
배경 영상 배경으로 사용할 영상 조건부
헤드라인 메인 문구 (H1)
태그라인 서브 문구 (H2)
설명 추가 설명 텍스트

사용 예시: - 메인 페이지 상단 - 서비스 소개 페이지 상단

탑배너 블록

💡 팁: 배경 영상은 자동으로 음소거되어 재생됩니다.

2. 리치 텍스트 (Rich Text)

🔗 Storybook에서 보기

자유로운 텍스트 콘텐츠를 작성합니다. 풀 기능의 리치 에디터를 지원합니다.

필드:

필드 설명 필수
섹션 제목 상단에 표시될 제목
콘텐츠 본문 내용 (리치 에디터) ✓
최대 너비 prose / 4xl / 6xl / full
정렬 left / center / right
배경색 transparent / white / gray-50 / gray-100
상하 여백 none / sm / md / lg / xl

리치 에디터 기능: - 텍스트 서식 (굵게, 기울임, 밑줄, 취소선) - 제목 레벨 (H2, H3, H4) - 목록 (순서 있음/없음) - 링크 삽입 - 이미지 삽입 - 인용구 - 코드 블록

리치 텍스트 에디터

3. 슬라이드쇼 (Slideshow)

🔗 Storybook에서 보기

미디어와 텍스트를 슬라이드 형태로 표시합니다. 좌측에 미디어, 우측에 텍스트가 배치됩니다.

필드:

필드 설명 필수
슬라이드 슬라이드 목록 (1~20개) ✓
├ 미디어 이미지/영상/임베드 ✓
├ 제목 슬라이드 제목
├ 설명 슬라이드 설명 (리치 텍스트)
└ 대체 텍스트 접근성용 설명
자동 재생 슬라이드 자동 전환
화살표 표시 좌우 네비게이션 화살표
점 표시 하단 페이지네이션 점

슬라이드쇼 블록

4. 로고 그리드 (Logo Grid)

🔗 Storybook에서 보기

파트너/클라이언트 로고를 6열 그리드로 표시합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
데이터 소스 collection (자동) / manual (수동) ✓
파트너 유형 brand / client (자동 모드)
로고 목록 수동 입력 시 로고 배열 (1~50개)
├ 이름 파트너/회사 이름 ✓
└ 로고 로고 이미지

데이터 소스 설명: - collection: 파트너 컬렉션에서 자동으로 불러옴 - manual: 직접 로고를 추가

로고 그리드 블록

5. 아이콘 주제 (Icon Subject)

🔗 Storybook에서 보기

SVG 아이콘과 라벨을 그리드로 표시합니다. 64x64 크기의 아이콘이 표시됩니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
가로 배치 개수 3 / 4 / 5 / 6 / 8 ✓
아이콘 아이템 아이콘 목록 (1~50개) ✓
├ 아이콘 SVG 이미지 권장 ✓
├ 라벨 아이콘 아래 텍스트 ✓
├ 라벨 색상 Hex 코드 (예: #FF6C02)
└ 링크 클릭 시 이동할 URL

사용 예시: - 기술 스택 표시 - 서비스 카테고리 - 기능 아이콘 나열

아이콘 주제 블록

6. 통계 (Stats)

🔗 Storybook에서 보기

숫자/수치를 가로로 나열하여 표시합니다. 아이콘 + 라벨 + 값 형태입니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
숫자 애니메이션 카운트업 효과
통계 항목 항목 목록 (1~8개)
├ 아이콘 항목 아이콘
├ 라벨 항목 설명 ✓
├ 값 숫자 값 ✓
└ 접미사 +, %, 명 등

사용 예시: - 누적 방문자 수 - 협력사 수 - 서비스 이용 통계

통계 블록

7. 타임라인 (Timeline)

🔗 Storybook에서 보기

연혁을 가로형 타임라인으로 표시합니다. 중앙 선을 기준으로 위/아래 번갈아 배치됩니다.

필드:

필드 설명 필수
섹션 제목 상단 제목 (기본: History)
정렬 순서 asc (오래된 순) / desc (최신 순)
연혁 항목 항목 목록 (1~30개)
├ 연도 연도 표시 (예: 2024) ✓
└ 설명 해당 연도 내용 (리치 텍스트)

타임라인 블록

8. 자주 묻는 질문 (FAQ)

🔗 Storybook에서 보기

Q&A를 아코디언 형태로 표시합니다. 질문을 클릭하면 답변이 펼쳐집니다.

필드:

필드 설명 필수
섹션 제목 상단 제목 (기본: 자주 묻는 질문)
FAQ 항목 항목 목록 (1~30개)
├ 질문 질문 텍스트 ✓
├ 답변 답변 내용 (리치 텍스트) ✓
└ 기본 열림 처음부터 펼쳐진 상태
동시 열기 허용 여러 답변을 동시에 볼 수 있음

FAQ 블록

9. 공지사항 목록 (Notice List)

🔗 Storybook에서 보기

공지/뉴스 목록을 날짜와 함께 표시합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목 (기본: 공지사항)
데이터 소스 manual / news-notice / news-press ✓
공지 목록 수동 모드 시 항목 (1~20개)
├ 제목 공지 제목 ✓
├ 날짜 공지 날짜 ✓
├ 링크 상세 페이지 URL
└ NEW 뱃지 신규 표시 여부
최대 표시 수 자동 모드 시 표시 개수 (1~20)
더보기 링크 표시 하단 전체보기 링크
더보기 링크 URL 전체보기 페이지 주소
더보기 링크 텍스트 버튼 텍스트 (기본: 전체보기)

데이터 소스 설명: - manual: 직접 입력 - news-notice: 공지사항 컬렉션에서 자동 - news-press: 보도자료 컬렉션에서 자동

공지사항 목록 블록

10. 싱글 미디어 (Single Media)

🔗 Storybook에서 보기

단일 이미지/영상/임베드를 16:9 비율로 표시합니다.

필드:

필드 설명 필수
미디어 이미지/영상/임베드 ✓
대체 텍스트 접근성용 설명

싱글 미디어 블록

11. 이미지 콘텐츠 (Image Content)

🔗 Storybook에서 보기

이미지 그리드와 텍스트를 나란히 배치합니다.

필드:

필드 설명 필수
이미지 위치 left (왼쪽) / right (오른쪽) ✓
이미지 목록 이미지 배열 (1~3개)
├ 이미지 표시할 이미지 ✓
제목 텍스트 영역 제목 ✓
설명 텍스트 영역 내용 (리치 텍스트)

이미지 콘텐츠 블록

🔗 Storybook에서 보기

상단에 큰 뷰어, 하단에 썸네일 그리드가 있는 갤러리입니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
미디어 아이템 갤러리 항목 (1개 이상) ✓
├ 미디어 이미지/영상/임베드 ✓
├ 제목 항목 제목
└ 설명 항목 설명
화면 비율 16:9 / 4:3 / 1:1 / 21:9
자동 재생 슬라이드 자동 전환
자동 재생 간격 전환 간격 (초)
화살표 표시 네비게이션 화살표
무한 반복 마지막 이후 처음으로

미디어 갤러리 블록

13. 핵심 차별점 (Key Differentiators)

🔗 Storybook에서 보기

좌측 이미지, 가운데 번호, 우측 텍스트 레이아웃입니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
항목 차별점 목록 (1~10개)
├ 이미지 좌측 이미지 ✓
├ 제목 차별점 제목 ✓
└ 설명 차별점 설명 (리치 텍스트)

핵심 차별점 블록

통합/레이아웃 블록 (6개)

14. 페이지 헤더 (Page Header)

🔗 Storybook에서 보기

페이지 최상단의 제목 영역입니다. 텍스트 또는 로고 이미지를 표시합니다.

필드:

필드 설명 필수
제목 타입 text (텍스트) / logo (로고 이미지)
페이지 제목 텍스트 타입일 때 제목 조건부
로고 이미지 로고 타입일 때 이미지 조건부
설명 페이지 소개 텍스트 (리치 텍스트)

페이지 헤더 블록

15. 탭 메뉴 (Tab Navigation)

🔗 Storybook에서 보기

둥근 사각형 형태의 탭 버튼들을 가로로 배치합니다.

필드:

필드 설명 필수
데이터 소스 manual (수동) / auto (자동) ✓
탭 목록 수동 모드 시 탭 배열
├ 라벨 탭 버튼 텍스트 ✓
└ 링크 클릭 시 이동 URL ✓

데이터 소스 설명: - auto: 같은 카테고리의 형제 페이지들을 자동으로 표시 - manual: 직접 탭을 추가

사용 예시: - 프로젝트 내 아티스트 목록 - 카테고리 내 페이지 목록

탭 메뉴 블록

16. 이미지 그리드 (Image Grid)

🔗 Storybook에서 보기

4열 형태의 이미지 그리드입니다. 자동/수동 데이터 소스를 지원합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
데이터 소스 manual / project-pages / artist-pages
프로젝트 페이지 선택 project-pages 모드 시
├ 페이지 프로젝트 페이지 선택 ✓
└ 이미지 오버라이드 대체 이미지
아티스트 페이지 선택 artist-pages 모드 시
├ 페이지 아티스트 페이지 선택 ✓
└ 이미지 오버라이드 대체 이미지
이미지 목록 manual 모드 시 (1~50개)
├ 이미지 표시할 이미지 ✓
├ 이름/캡션 이미지 설명
└ 링크 클릭 시 이동 URL
캡션 표시 이미지 아래 캡션 표시

데이터 소스 설명: - manual: 직접 이미지 추가 - project-pages: 프로젝트 페이지의 대표 이미지 사용 - artist-pages: 아티스트 페이지의 대표 이미지 사용

이미지 그리드 블록

17. 프레스 그리드 (Press Grid)

🔗 Storybook에서 보기

3열 형태의 언론 보도 그리드입니다. 썸네일 + 제목 + 언론사/날짜 형태입니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
언론 보도 목록 항목 배열 (1~50개)
├ 썸네일 이미지 좌측 이미지 ✓
├ 기사 제목 우측 상단 제목 ✓
├ 언론사/기관 우측 하단 출처 ✓
├ 발행일 우측 하단 날짜
└ 기사 링크 원문 URL

프레스 그리드 블록

18. 비즈니스 (Business)

🔗 Storybook에서 보기

비즈니스 카드를 그리드로 표시합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
비즈니스 카드 카드 배열 (1~6개)
├ 번호 카드 번호 (예: 01, 02)
├ 제목 카드 제목 ✓
├ 설명 카드 설명 (리치 텍스트)
└ 아이콘 카드 아이콘

비즈니스 블록

19. 중간 배너 (Mid Banner)

🔗 Storybook에서 보기

배경 미디어 위에 텍스트를 오버레이합니다.

필드:

필드 설명 필수
레이아웃 pill (알약형) / fullWidth (전체 너비)
배경 미디어 이미지 또는 영상 블록 (최대 1개)
상단 텍스트 위쪽에 표시될 텍스트
하단 텍스트 아래쪽에 표시될 텍스트

중간 배너 블록

특수 블록 (6개)

20. 위치 정보 (Location)

🔗 Storybook에서 보기

네이버 지도와 정보 텍스트를 함께 표시합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목 (기본: Location)
장소명 마커에 표시될 이름 ✓
주소 장소 주소
위도 지도 좌표 (latitude) ✓
경도 지도 좌표 (longitude) ✓
정보 우측 정보 영역 (리치 텍스트) ✓

좌표 찾는 방법: 1. 네이버 지도에서 장소 검색 2. 주소 클릭 후 "좌표 복사" 선택 3. 위도, 경도 값을 각각 입력

위치 정보 블록

21. 층별 안내 (Floor Guide)

🔗 Storybook에서 보기

건물의 층별 정보를 탭 형태로 표시합니다.

필드:

필드 설명 필수
섹션 제목 상단 제목
제목 메인 제목
설명 전체 설명 (리치 텍스트)
층별 안내 대문구 탭 영역 상단 문구
층 목록 층 정보 배열 (1~20개)
├ 층 라벨 탭 버튼 텍스트 (예: 1F, B1) ✓
├ 층 이름 층 이름 (예: Gallery)
├ 대표 미디어 메인 이미지/영상
├ 갤러리 미디어 2x2 그리드 이미지 (최대 4개)
│ ├ 미디어 갤러리 항목 ✓
│ └ 캡션 이미지 설명
├ 설명 층 설명 (리치 텍스트)
├ 강조 항목 하이라이트 텍스트 배열
│ ├ 일반 텍스트 기본 색상 텍스트
│ └ 강조 텍스트 주황색 강조 텍스트
└ 시설 목록 시설 태그 배열
└ 시설 시설 이름 ✓

층별 안내 블록

22. 브레드크럼 (Breadcrumb)

🔗 Storybook에서 보기

현재 페이지의 경로를 표시하는 네비게이션입니다.

필드:

필드 설명 필수
데이터 소스 auto / category / manual ✓
경로 항목 manual 모드 시 경로 배열
├ 표시 텍스트 경로 라벨 ✓
└ 링크 이동 URL (비워두면 현재 페이지)
홈 텍스트 홈 라벨 (기본: Home)
홈 표시 홈 링크 포함 여부

데이터 소스 설명: - auto: 현재 URL 기반 자동 생성 - category: 카테고리 계층 기반 - manual: 직접 입력

표시 예시: 

Home > Digital Art > Summer Show > 김작가

이동 경로 블록

23. 상세 히어로 (Detail Hero)

🔗 Storybook에서 보기

프로젝트/아티스트 상세 페이지의 히어로 섹션입니다. 메인 미디어 + 서브 미디어 3개 + 이름 + 설명 구조입니다.

필드:

필드 설명 필수
레이아웃 horizontal (가로) / vertical (세로) ✓
이름 프로젝트/아티스트 이름
설명 소개 텍스트 (리치 텍스트)
미디어 미디어 배열 (최대 4개, 첫 번째가 메인)
├ 미디어 이미지/영상/임베드 ✓
└ 캡션 미디어 설명

레이아웃 설명: - horizontal: 프로젝트 페이지용 (가로 배치) - vertical: 아티스트 페이지용 (세로 배치)

💡 팁: 템플릿 페이지에서 사용 시 이름, 설명, 미디어가 자동으로 채워집니다.

상세 히어로 블록

🔗 Storybook에서 보기

커스터마이징 가능한 링크 버튼입니다.

필드:

필드 설명 필수
버튼 텍스트 버튼에 표시될 텍스트 ✓
링크 URL 클릭 시 이동할 주소 ✓
버튼 크기 S (소) / M (중) / L (대)
새 탭에서 열기 새 탭/창에서 열기
스타일 설정
배경색 Hex 코드 (예: #000000)
폰트 색상 Hex 코드
테두리 색상 Hex 코드
테두리 굵기 픽셀 단위 (권장: 0, 1, 2)
모서리 둥글기 픽셀 단위 (권장: 0, 4, 8, 9999)
Hover 스타일
Hover 배경색 마우스 올렸을 때 배경색
Hover 폰트 색상 마우스 올렸을 때 글자색

링크/버튼 블록

25. 슬로건 (Slogan)

🔗 Storybook에서 보기

간단한 제목과 설명 텍스트를 표시합니다.

필드:

필드 설명 필수
제목 메인 문구 ✓
설명 부가 설명

사용 예시: - 섹션 구분 문구 - 간단한 슬로건 - 인용문

슬로건 블록

8.3. 이미지/영상 업로드

블록에서 미디어 선택하기

  1. 미디어 필드의 선택 버튼을 클릭합니다.
  2. 팝업에서 두 가지 방법 중 선택합니다:

기존 미디어 선택

  1. 라이브러리 탭을 선택합니다.
  2. 검색하거나 목록에서 미디어를 찾습니다.
  3. 원하는 미디어를 클릭합니다.

새로 업로드

  1. 업로드 탭을 선택합니다.
  2. 파일을 드래그하거나 클릭하여 선택합니다.
  3. 업로드가 완료되면 자동으로 선택됩니다.

미디어 선택 팝업

미디어 필드 유형

일부 블록은 세 가지 미디어 유형을 지원합니다:

유형 설명
이미지 업로드된 이미지 파일
영상 업로드된 영상 파일
임베드 YouTube, Vimeo 등 외부 영상 URL

💡 임베드 사용법: 임베드 유형을 선택한 경우, YouTube나 Vimeo 영상의 전체 URL(예: https://www.youtube.com/watch?v=...)을 해당 필드에 붙여넣으면 됩니다.

8.4. 링크 추가하기

링크 필드 유형

유형 설명 사용 예시
Internal 내부 페이지 연결 /about, /contact
Custom 외부 URL 또는 직접 입력 https://google.com

내부 링크 설정

  1. 링크 유형에서 "Internal"을 선택합니다.
  2. 참조 문서 유형을 선택합니다 (Pages, Projects 등).
  3. 참조 문서에서 연결할 페이지를 검색/선택합니다.
  4. 필요시 라벨을 입력합니다.

외부 링크 설정

  1. 링크 유형에서 "Custom"을 선택합니다.
  2. URL에 전체 주소를 입력합니다.
  3. 예: https://www.google.com
  4. 라벨을 입력합니다.
  5. 외부 사이트인 경우 새 탭에서 열기를 체크합니다.

8.5. 검색 설정

검색엔진에서 페이지가 잘 노출되도록 검색 정보를 설정합니다.

검색 설정 탭 열기

  1. 페이지 편집 화면에서 SEO 탭을 클릭합니다.

검색 설정 탭

검색 설정 필드 설명

필드 설명 권장 길이
검색 제목 검색 결과에 표시될 제목 50~60자
검색 설명 검색 결과에 표시될 설명 150~160자
SNS 공유 이미지 SNS 공유 시 표시될 이미지 1200x630px

SNS 공유 미리보기

검색 설정 탭 하단에서 SNS 공유 시 어떻게 보이는지 미리 확인할 수 있습니다.

SNS 공유 미리보기

검색 설정 작성 팁

좋은 검색 제목: - 페이지 내용을 정확히 설명 - 핵심 키워드 포함 - 브랜드명은 끝에 추가

좋은 검색 설명: - 페이지 내용 요약 - 행동 유도 문구 포함 - 중복 피하기

8.6. 미리보기 (Live Preview)

발행 전에 실제 웹사이트에서 어떻게 보이는지 확인합니다.

미리보기 사용하기

  1. 페이지 편집 화면 우측 상단의 미리보기 버튼을 클릭합니다.
  2. 새 탭에서 미리보기 화면이 열립니다.
  3. Admin에서 수정하면 미리보기가 실시간으로 업데이트됩니다.

미리보기 버튼

미리보기 모드 종류

모드 설명
Desktop 데스크톱 화면 크기
Tablet 태블릿 화면 크기
Mobile 모바일 화면 크기

💡 팁: 미리보기는 임시저장 상태에서도 작동합니다.

8.7. 임시저장 & 발행

임시저장

  • 저장 버튼을 클릭하면 임시저장됩니다.
  • 임시저장된 내용은 웹사이트에 공개되지 않습니다.
  • 나중에 다시 편집하여 발행할 수 있습니다.

발행

  • 발행 버튼을 클릭하면 웹사이트에 공개되며, 서버 캐시가 갱신되기까지 최대 1~2분 정도 소요될 수 있습니다.
  • 발행 후에도 수정이 가능합니다.
  • 수정 후 다시 발행해야 변경사항이 반영됩니다.

상태 확인

목록 화면에서 각 항목의 상태를 확인할 수 있습니다:

상태 표시 설명
임시저장 임시저장 태그 임시저장됨, 미공개
발행됨 (표시 없음) 발행됨, 공개 중
예약됨 예약됨 태그 예약 발행 설정됨

8.8. 예약 발행

특정 날짜와 시간에 자동으로 발행되도록 예약합니다.

예약 발행 설정하기

  1. 페이지 편집 화면 우측의 발행 예약 필드를 찾습니다.
  2. 캘린더 아이콘을 클릭합니다.
  3. 원하는 날짜를 선택합니다.
  4. 시간을 입력합니다.
  5. 저장 버튼을 클릭합니다.

발행 예약 캘린더

예약 확인

  • 목록에서 "예약됨" 태그로 표시됩니다.
  • 편집 화면에서 예약된 날짜/시간을 확인할 수 있습니다.

예약 취소

  1. 페이지 편집 화면으로 이동합니다.
  2. 발행 예약 필드의 날짜를 지웁니다.
  3. 저장 버튼을 클릭합니다.

💡 팁: 예약 시간이 지나면 자동으로 발행되며, 상태가 "발행됨"으로 변경됩니다.

다음 단계