10. 기본 요소 24종과 완성형 블록 알아보기

라이브러리의 기본 요소는 페이지를 만드는 24가지 부품입니다. 완성형 블록은 여러 요소를 미리 조합한 섹션입니다. 먼저 목적에 맞는 부품을 고른 뒤 내용과 모양을 바꿔 주세요.

1단계. 요소를 추가하는 공통 순서

1. 편집할 페이지를 확인하고 라이브러리 → 기본 요소를 엽니다.

2. 추가할 위치를 먼저 선택한 뒤 필요한 요소를 누릅니다. 특정 영역 안에 넣을 때는 그 영역의 여기에 추가를 사용합니다.

3. 추가한 요소를 선택하고 편집·설정 또는 인스펙터에서 내용을 입력합니다.

4. PC·태블릿·모바일에서 확인하고 저장합니다. 방문자에게 반영할 때는 게시도 진행합니다.

2단계. 기본 요소 24종 고르기

1. 레이아웃

역할: 여러 요소를 담아 섹션·열을 구성합니다.

활용 예: 이미지와 설명을 나란히 배치

설정·확인 팁: 부모 영역의 방향·정렬·간격을 먼저 정하고 자식 요소를 넣습니다.

2. 제목

역할: 페이지와 섹션의 주제를 보여줍니다.

활용 예: 브랜드 소개, 자주 묻는 질문

설정·확인 팁: 제목 수준과 글자 크기는 서로 다릅니다. H1~H6의 구조와 PC·모바일 줄바꿈을 함께 확인합니다.

3. 텍스트

역할: 본문·설명·주의 문구를 작성합니다.

활용 예: 소재 설명과 사용 방법

설정·확인 팁: 행간·정렬·색상을 조절합니다. 긴 문장을 여러 문단으로 나누면 읽기 쉽습니다.

4. 목록

역할: 여러 항목을 일정한 형식으로 나열합니다.

활용 예: 제품 특징 3가지

설정·확인 팁: 항목 수와 순서, 모바일 줄바꿈을 확인합니다.

5. 버튼

역할: 방문자를 다음 행동으로 연결합니다.

활용 예: 제품 보기, 문의하기

설정·확인 팁: 표시 문구와 이동 주소를 모두 설정합니다. 게시 후 직접 눌러 확인합니다.

6. 이미지

역할: 제품·브랜드 사진을 보여줍니다.

활용 예: 대표 제품 사진

설정·확인 팁: 원본 비율과 영역 맞춤을 구분합니다. 모바일 이미지가 별도로 필요한지 확인합니다.

7. 동영상

역할: 시연·소개 영상을 재생합니다.

활용 예: 장난감 사용 예시

설정·확인 팁: 지원하는 영상 주소를 넣고 비율·자동재생·음소거·반복·컨트롤을 확인합니다. 실제 기기의 재생 정책도 영향을 줍니다.

8. 여백

역할: 요소 사이에 빈 공간을 만듭니다.

활용 예: 설명과 버튼 사이 간격

설정·확인 팁: 공백 문자를 반복해서 넣는 대신 사용합니다. 모바일에서 과도하게 길어지지 않게 합니다.

9. 구분선

역할: 내용의 경계를 표시합니다.

활용 예: 상품 설명과 유의사항 구분

설정·확인 팁: 주변 여백과 선의 대비를 확인합니다.

10. 지도

역할: 위치 안내를 제공합니다.

활용 예: 오프라인 매장 안내

설정·확인 팁: 실제 주소·위치를 확인하고 모바일에서 읽을 수 있는 높이로 배치합니다.

11. 이미지 롤링 배너

역할: 여러 이미지를 순서대로 보여줍니다.

활용 예: 브랜드·카테고리 소개 이미지

설정·확인 팁: 각 이미지의 잘림, 순서, 링크와 전환 상태를 확인합니다.

12. 탭

역할: 같은 영역에서 내용을 분류해 바꿔 보여줍니다.

활용 예: 제품 특징 / 사용법 / 관리법

설정·확인 팁: 각 탭의 제목과 내부 콘텐츠를 따로 작성합니다. 순서 변경 후 처음 선택되는 탭을 다시 확인합니다.

13. 스와이퍼

역할: 콘텐츠를 옆으로 넘겨 보여줍니다.

활용 예: 카테고리 카드 모음

설정·확인 팁: 첫 항목뿐 아니라 마지막 항목까지 넘겨 보고 모바일 터치도 확인합니다.

14. 아이콘

역할: 작은 기호로 의미를 보충합니다.

활용 예: 관리 안내 아이콘

설정·확인 팁: 아이콘만으로 뜻이 모호하면 짧은 설명을 함께 넣습니다.

15. 배지

역할: 짧은 상태·특징을 강조합니다.

활용 예: 신상품, 예시 상품

설정·확인 팁: 사실에 맞는 표시를 사용하고 배경색과 글자 대비를 확인합니다.

16. 진행률

역할: 일정 수치의 진행 상태를 표현합니다.

활용 예: 프로젝트 진행 상태

설정·확인 팁: 실제 근거가 있는 값과 단위를 사용합니다. 장식용 임의 수치로 성과를 오해하게 하지 않습니다.

17. 카운트다운

역할: 지정 시점까지 남은 시간을 표시합니다.

활용 예: 행사 종료 안내

설정·확인 팁: 종료 일시·시간대를 확인하고 종료 후 표시도 확인합니다.

18. 타임라인

역할: 시간·단계의 순서를 보여줍니다.

활용 예: 브랜드 연혁, 이용 과정

설정·확인 팁: 날짜나 단계와 설명의 순서를 맞춥니다.

19. 아코디언

역할: 제목을 눌러 상세 내용을 펼칩니다.

활용 예: 자주 묻는 질문

설정·확인 팁: 질문마다 답변을 입력하고 모든 항목을 열고 닫아 봅니다.

20. 문의 폼

역할: 방문자의 문의를 받는 입력 영역입니다.

활용 예: 제품 문의

설정·확인 팁: 필수 항목·안내 문구·제출 후 처리와 운영자의 수신 위치를 확인한 뒤 공개합니다.

21. 입력 폼

역할: 목적에 맞는 입력 항목을 구성합니다.

활용 예: 신청 정보 입력

설정·확인 팁: 레이블·필수 여부·입력 형식·오류 안내를 확인합니다. 민감한 정보는 불필요하게 요청하지 않습니다.

22. HTML

역할: 직접 작성한 HTML 콘텐츠를 배치합니다.

활용 예: 별도 제작한 안내 영역

설정·확인 팁: 고급 사용자용입니다. 외부 코드를 넣으면 화면·보안에 영향을 줄 수 있으므로 검토된 코드만 사용합니다.

23. 표

역할: 항목별 값을 행·열로 비교합니다.

활용 예: 소재·크기 비교

설정·확인 팁: 헤더와 데이터의 대응을 확인합니다. 좁은 화면에서 가로 폭이 넘치지 않는지 확인합니다.

24. 차트

역할: 숫자 데이터를 시각적으로 보여줍니다.

활용 예: 검증된 설문 결과

설정·확인 팁: 데이터·범례·축·단위를 일치시키고 사실에 근거한 수치만 사용합니다.

3단계. 완성형 블록으로 빠르게 구성하기

4단계. 수정할 대상을 정확히 선택하기

블록 전체의 간격을 바꿀 때는 바깥 레이아웃을, 글자만 바꿀 때는 내부 제목·텍스트를 선택합니다. 원하는 요소가 잘 선택되지 않으면 구조에서 부모·자식 관계를 확인해 주세요. 복제한 블록은 링크와 이미지도 함께 복사될 수 있으므로 내용을 모두 검토합니다.

공개 전 체크리스트

• 탭·아코디언·스와이퍼는 모든 항목을 조작했습니다.

• 표·차트·카운트다운의 수치와 날짜가 실제 정보와 맞습니다.

• 폼은 정상 입력뿐 아니라 필수 항목 누락 시 안내도 확인했습니다.

• 버튼·이미지·메뉴의 링크가 실제 주소에서 정상 작동합니다.

• 기본 예시 문구·이미지·후기를 그대로 두지 않았습니다.

자세한 조작은 이 문서의 ‘요소 추가·선택·이동·삭제’, ‘제목·본문’, ‘이미지·동영상·버튼’, ‘컴포넌트 활용’ 항목을 이어서 참고해 주세요.