편집 화면의 좌측 영역의 ‘컴포넌트’ 의 종류에 대한 설명과 사용법을 안내합니다.
1. 디자인 추천
미리 구성된 완성형 디자인을 활용하여 빠르게 사이트를 만들 수 있습니다.
주요 역할•
빠른 제작 가능 → 미리 디자인된 섹션을 추가하여 시간 절약
•
일관된 스타일 유지 → 여러 섹션을 추가해도 통일감 있는 디자인 적용
•
간편한 수정 → 텍스트, 이미지만 변경하면 맞춤형 웹페이지 제작 가능
•
반응형 디자인 지원 → 모바일, 태블릿, PC에서 최적화된 레이아웃 제공
카테고리 별 사용 예시•
웹사이트 : 기본적인 웹사이트 구조 제공
•
갤러리 : 이미지나 포트폴리오를 배치
•
리뷰 : 후기나 평가, 추천등 을 표시
•
소개 : 인물, 사물, 브랜드를 간단하게 소개
*디자인 추천에는 지속적으로 디자인이 추가 구성될 예정입니다.
2. 배경
웹사이트의 배경을 설정하는 요소입니다.
주요 역할•
배경 컴포넌트 사용시 요소나 레이아웃을 위에 올릴 수 있습니다.
•
이미지 또는 동영상을 배경으로 설정하고 싶을 경우 사용합니다.
•
이미지, 동영상 모두 파일을 업로드하거나, 임베드하는 방식으로 원하는 콘텐츠를 불러올 수 있습니다.
*배경은 가장 최상단 컴포넌트로 삭제나 변경이 어려울 수 있어 가장 먼저 적용하는 것을 추천합니다.
3. 레이아웃
레이아웃은 콘텐츠를 배치하는 틀 역할을 하는 구조적인 요소입니다.
주요 역할•
콘텐츠를 보기 쉽게 정리 → 사용자가 정보를 빠르게 이해할 수 있도록 구성
•
웹사이트의 가독성과 사용성 향상 → 잘 정돈된 디자인 유지
•
반응형 디자인 지원 → 다양한 화면 크기에서 최적화된 배치 제공
•
페이지 흐름을 효과적으로 조정 → 중요 콘텐츠를 강조하고, 시각적인 균형 유지
구성 요소•
플렉스 박스 : 다양한 컴포넌트를 정리 정돈하는 유연한 레이아웃 시스템
•
그리드 : 여러 개의 요소를 열 또는 행 배치로 정렬하는 구조
•
구분선 : 콘텐츠 간 구획을 나누는 시각적인 선
•
공백 : 요소 간의 간격을 조정하는 여백의 역할
사용 예시•
플렉스박스(Flexbox) → 콘텐츠를 가로 또는 세로로 정렬할 때 사용
•
그리드(Grid) → 카드형 콘텐츠, 이미지 갤러리 등 2개 이상의 요소에 대해 열 또는 행 배치가 필요할 때 사용
•
구분선(Divider) → 콘텐츠 간 구획을 시각적으로 분리할 때 사용
•
공백(Spacing) → 요소 간 간격을 조정하여 가독성을 높일 때 사용
4. 요소
웹사이트를 구성하는 개별적인 기능 단위 컴포넌트입니다.
주요 역할•
웹사이트의 콘텐츠를 구성하는 기본(또는 최소) 단위
•
사용자와의 상호작용(버튼 클릭, 동영상 재생 등)을 가능하게 함
•
텍스트, 이미지, 동영상을 활용하여 정보 전달
•
디자인 요소로 활용하여 웹사이트의 가독성과 시각적 효과 향상
구성 요소•
텍스트 : 제목, 본문, 설명 등을 표시
•
버튼 : 클릭 가능한 액션 요소
•
이미지 : 사진, 아이콘 삽입
•
동영상 : 비디오 콘텐츠 삽입
•
임베드 : 외부 콘텐츠 삽입