Guide:웹 빌더

스타트업풀 위키

개요[편집 | 원본 편집]

스타트업풀 생성형 AI 웹 빌더 서비스는 챗봇을 통해 누구나 쉽고, 빠르게 웹 사이트를 생성할 수 있는 서비스이다. 그리고, 해당 위키는 웹 빌더 서비스에 대한 가이드를 제공하는 위키이다.

시작하기[편집 | 원본 편집]

웹 빌더 서비스는 회원들만 사용할 수 있는 기능이기에 로그인 이후 사용할 수 있다. 또한, 무분별한 생성을 막기 위해 포인트 사용을 통해 서비스를 이용할 수 있으며, 회원가입 후 지급받는 포인트로도 충분히 제작할 수 있다. 포인트 관련 가이드는 해당 위키 참고

스타트업풀의 좌측 사이드바 하단에 AI 빌더 항목에 웹 빌더를 클릭하여 웹 빌더 페이지에 진입할 수 있으며, 현재 모바일은 사용이 불가능하고, PC만 사용이 가능하다.

생성하기[편집 | 원본 편집]

웹 빌더 페이지에 진입하게 되면, 사용자는 상단에 위치한 대형 배너와 하단에 제시된 간단한 가이드를 볼 수 있다. 이 가이드는 사용자가 웹 사이트를 생성하는 과정을 4단계로 쉽게 설명한다. 웹 사이트 생성을 시작하려면, 상단 배너에 표시된 '생성하기' 버튼을 클릭한다.

'생성하기' 버튼을 클릭하면 챗봇이 화면에 나타난다. 이 챗봇을 통해, 사용자는 원하는 웹 사이트의 유형을 선택할 수 있다. 이후, 현재 상황에 맞는 선택지를 선택하거나 질문에 답변을 하면서, 필요한 핵심 데이터를 제공하면 된다. 사용자가 제공한 데이터는 서버로 전송되고, 이 데이터를 바탕으로 인공지능이 콘텐츠를 분석하여 적합한 웹 사이트 콘텐츠를 생성한다. 이 과정을 통해, 사용자는 자신의 요구사항과 목적에 부합하는 맞춤형 웹 사이트를 신속하게 얻을 수 있다.

웹 사이트 유형[편집 | 원본 편집]

스타트업풀 생성형 AI 웹 빌더 서비스를 통해 생성할 수 있는 웹사이트 유형은 다음과 같다:

  • 이력서(포트폴리오): 사용자는 자신의 이력서나 포트폴리오를 웹에 적용하여, 트렌디하고 접근성 높은 이력서(포트폴리오) 웹 사이트를 생성할 수 있다. 이를 통해 자신의 경력과 업적을 효과적으로 전시할 수 있다.
  • 랜딩페이지: 사용자는 매력적인 원페이지 랜딩페이지를 순식간에 제작할 수 있다. 이는 제품 또는 서비스의 효과적인 마케팅을 위한 중요한 도구로 사용될 수 있다.
  • 기업페이지: 기업 또는 서비스 소개 페이지를 비롯해 연혁, 연락처, 채용 정보 페이지까지 포함하여 기업의 전반적인 정보를 소개하는 페이지를 생성할 수 있다. 이를 통해 기업의 이미지를 강화하고, 방문자와의 커뮤니케이션을 용이하게 할 수 있다.

업데이트 예정 정보[편집 | 원본 편집]

  • 현재 상태: 2024년 3월 8일 기준으로, 이력서(포트폴리오) 생성 기능만 사용 가능하다.
  • 업데이트 예정: 랜딩페이지와 기업 페이지 생성 기능은 다음 주에 업데이트될 예정이다.

관리하기[편집 | 원본 편집]

guide_builder_top_banner
root 웹 사이트 생성 후 보여지는 웹 빌더 상단 메뉴

웹 빌더를 사용하여 웹 사이트를 생성한 후, 사용자는 웹 빌더 메인 페이지에서 다양한 관리 작업을 수행할 수 있게 된다. 이 페이지는 사용자가 웹 사이트를 생성하기 전과 다르게 보이며, 여러 관리 옵션이 제공된다.

관리 옵션[편집 | 원본 편집]

  1. 미리보기: 사용자는 이력서(포트폴리오)와 기업페이지를 포함하여, 생성한 각 웹 사이트의 root로 하나의 고유 페이지만을 생성할 수 있다. 미리보기 버튼을 통해 이러한 root 페이지에 쉽게 접근할 수 있다. 이를 통해 최종 사용자의 관점에서 웹 사이트를 확인하고, 필요한 경우 조정할 수 있다.
  2. 수정하기: 생성된 웹 사이트는 root로 하나의 고유 페이지를 가지며, 사용자는 수정하기 버튼을 통해 이 페이지를 손쉽게 수정할 수 있다. 이 기능을 사용하여 콘텐츠, 디자인, 레이아웃 등을 업데이트하여 웹 사이트를 최신 상태로 유지할 수 있다.
  3. 추가하기: 이력서(포트폴리오)와 기업페이지 모두 root 페이지에 부가적인 페이지들을 추가할 수 있다. 이력서(포트폴리오)의 경우, 포트폴리오 섹션을 추가하거나 업데이트할 수 있으며, 기업 페이지의 경우 다양한 메뉴 관리에 대한 페이지나 채용 정보 페이지 등을 추가하고 업데이트할 수 있다. 이 기능은 웹 사이트의 내용을 확장하고, 방문자에게 더 많은 정보를 제공하는 데 유용하다.
  4. 가이드북: 스타트업풀 웹 빌더는 사용자가 챗봇을 통해 쉽고 빠르게 웹 사이트를 생성할 수 있도록 설계되었지만, 퀄리티 높은 업데이트를 위한 추가적인 방법도 제공한다. 가이드북은 이러한 업데이트 과정을 안내하여, 사용자가 자신의 웹 사이트를 더욱 전문적이고 매력적으로 만들 수 있도록 돕는다.

수정하기[편집 | 원본 편집]

guide_builder_detail
웹 빌더 수정 화면

스타트업풀 생성형 AI 웹 빌더 서비스를 통해 웹 사이트를 생성한 후, 사용자는 웹 사이트를 자세하고 구체적으로 수정할 수 있는 기능을 제공받는다. 이러한 수정 과정은 사용자가 자신의 웹 사이트를 더욱 개인화하고, 특정 목적에 맞게 최적화할 수 있도록 설계되었다.

생성된 웹 사이트에 대해 수정을 시작하려면, 메인 페이지 상단 메뉴에 위치한 수정 버튼 또는 추가 페이지들의 카드 하단에 위치한 수정 버튼을 클릭한다. 이를 통해 사용자는 웹 페이지의 수정 모드로 진입할 수 있다.

자주 사용하는 기능[편집 | 원본 편집]

  • 우측 스타일 매니저 > 꾸미기 > 배경 > Image > Undefined 버튼을 통해 컨테이너의 배경 이미지를 변경할 수 있다.
  • 배경 어둡게 조정하는 방법은 위의 방법을 통해 이미지 적용 후 투명도가 있는 색상을 적용한 요소를 이미지 위에 적용하면 된다.
  • 더블클릭: 이미지와 텍스트를 더블클릭하면 해당 이미지 또는 텍스트를 바로 수정할 수 있다.
  • 컨테이너 박스를 클릭하면 작은 메뉴바가 나오는 데 해당 메뉴바를 통해 쉽게 이동, 복사, 삭제를 할 수 있다.
  • 영상 클릭 후 구분을 유튜브로 변경하여 Video ID 를 변경하면 손쉽게 유튜브의 영상을 적용할 수 있다.

빌더 관리 매니저[편집 | 원본 편집]

툴 매니저(좌측)
섹션 구분 설명
첫 번째 추가 이 기능은 향후 업데이트를 통해 제공될 예정이며, 페이지 내에서 직접 여러 요소를 관리할 수 있도록 설계될 것이다.
미리보기 현재 작업 중인 페이지를 실제로 배포했을 때와 같은 화면을 미리 볼 수 있게 하는 기능이다. 이를 통해 개발자는 최종 사용자의 관점에서 페이지를 확인하고, 필요한 조정을 할 수 있다.
두 번째 반응형 페이지가 데스크탑, 태블릿, 모바일 등 다양한 디바이스에서 어떻게 보일지를 미리 확인하고 조정할 수 있게 하는 기능이다. 각 버튼을 클릭하면 해당 디바이스의 브레이크 포인트가 적용되어 확인할 수 있다.
세 번째 작업취소/

되돌리기

실수로 원하지 않은 작업을 했거나 변경 사항을 취소하고 싶을 때 사용할 수 있는 기능이다. 작업을 취소하고 이전 상태로 되돌리거나, 되돌린 작업을 다시 적용할 수 있다.
네 번째 블럭뷰어 페이지 내의 레이아웃 구조를 더 명확하게 이해할 수 있도록 도와주는 기능이다. 컨테이너 박스들을 점선으로 표시하여 각 요소의 구분을 더욱 명확하게 할 수 있다.
전체화면 작업 환경을 전체 화면으로 전환하여 보다 몰입감 있고 넓은 화면에서 작업을 진행할 수 있다.
코드뷰어 현재 페이지의 HTML, CSS 코드를 확인할 수 있는 기능이다.
코드추출 현재 페이지에 적용된 코드를 추출하여, 템플릿이나 다른 용도로 활용할 수 있게 해준다.
리셋 생성된 페이지를 초기 상태로 되돌린다. 이 기능은 페이지에 연동된 요소들이 많기 때문에 신중하게 사용해야 한다.
블럭 매니저(좌측)
섹션 구분 설명
기본 1열 단일 열을 가진 컨테이너 블럭이다. 이는 웹 페이지의 기본 섹션을 만드는 데 사용된다.
2열 두 개의 열을 가진 컨테이너 블럭이다. 병렬 콘텐츠를 표시하는 데 유용하다.
3열 세 개의 열을 가진 컨테이너 블럭이다. 다양한 항목을 나란히 배치할 때 사용된다.
2열

3:7

두 개의 열을 가지되, 3:7의 비율로 나누어진 컨테이너 블럭이다. 다른 중요도를 가진 콘텐츠를 표시하는 데 적합하다.
텍스트 웹 페이지에 텍스트 콘텐츠를 추가하는 데 사용되는 블럭이다.
링크 텍스트 또는 이미지 링크를 웹 페이지에 추가할 수 있는 블럭이다.
이미지 웹 페이지에 이미지를 삽입하는 데 사용되는 블럭이다.
영상 비디오 콘텐츠를 웹 페이지에 삽입할 수 있는 블럭이다.
지도 위치 정보를 보여주는 지도를 웹 페이지에 삽입할 수 있는 블럭이다.
입력폼 제출폼 사용자로부터 받은 데이터를 제출하기 위한 폼이다. 일반적으로 여러 입력 필드와 함께 제출 버튼을 포함한다.
입력폼 텍스트 입력, 이메일 주소, 비밀번호 등 사용자로부터 특정 정보를 입력받기 위한 필드이다.
버튼 사용자가 클릭할 수 있는 버튼으로, 폼 제출 또는 다른 동작을 트리거하는 데 사용된다.
라벨 입력폼과 같이 사용되어 사용자에게 해당 필드에서 어떤 정보를 입력해야 하는지 설명한다.
체크박스 사용자가 여러 옵션 중 하나 이상을 선택할 수 있게 하는 선택 필드이다.
라디오박스 사용자가 주어진 옵션 중 단 하나만 선택할 수 있게 하는 선택 필드이다.
기타 코드 사용자 정의 HTML, CSS, JavaScript 코드를 웹 페이지에 직접 삽입할 수 있는 블럭이다. 이를 통해 고급 사용자는 웹 페이지에 특수한 기능이나 스타일을 추가할 수 있다.
블로그 생성된

레이아웃

웹 사이트 내에 블로그 섹션을 구성하는 데 사용되는 레이아웃이다. 글 게시물을 정리하고 표시하는 데 적합하다.
연락 사용자와의 커뮤니케이션을 위한 연락처 정보와 폼을 포함하는 섹션이다.
콘텐츠 다양한 유형의 콘텐츠를 표시하기 위한 레이아웃이다.
CTA 사용자가 특정 동작을 취하도록 유도하는 버튼이나 링크를 포함하는 섹션이다.
커머스 온라인 상점과 관련된 상품 목록이나 구매 옵션을 포함하는 섹션이다.
특징 웹 사이트, 서비스 또는 제품의 주요 특징을 강조하는 데 사용되는 섹션이다.
푸터 웹 사이트 하단에 위치하는 정보 및 링크 모음이다.
갤러리 이미지나 비디오와 같은 미디어 콘텐츠를 효과적으로 전시하기 위한 섹션이다.
헤더 웹 사이트 상단에 위치하는 주요 네비게이션 및 브랜딩 요소를 포함하는 섹션이다.
상단배너 웹 사이트 방문자에게 첫인상을 주는 중요한 시각적 요소가 포함된 섹션이다.
유로 플랜 서비스나 제품의 다양한 가격 책정 계획을 표시하는 섹션이다.
통계

데이터

사이트나 서비스의 성공 지표와 같은 중요한 수치 정보를 시각적으로 표현하는 섹션이다.
프로세스 작업의 단계나 과정을 설명하는 데 사용되는 섹션이다.
조직의 구성원이나 직원 프로필을 소개하는 섹션이다.
인용 고객 테스트모니얼, 유명 인사의 격언 등을 표시하는 데 사용되는 섹션이다.
스타일 매니저(우측)
섹션 구분 설명
기본

설정

정렬 요소의 정렬 방식을 조정할 수 있다. 예를 들어, 가운데 정렬, 좌측 정렬, 우측 정렬 등이 있다.
속성 요소의 CSS 디스플레이 속성을 설정할 수 있다. 인라인, 블럭, 플렉스 등의 속성을 선택하여 요소의 배치와 표시 방식을 정할 수 있다.
위치 요소의 위치를 정확하게 조정할 수 있다. 상대적, 절대적 위치 지정을 포함하여, 다양한 위치 설정이 가능하다.
여백 넓이 요소의 넓이를 정할 수 있다. 특정 크기를 지정하거나 퍼센트 단위로 조정할 수 있다.
높이 요소의 높이를 설정할 수 있다. 넓이와 마찬가지로 특정 크기나 퍼센트 단위로 조정이 가능하다.
외부여백 요소의 외부 여백을 조정할 수 있다. 이는 요소와 주변 요소 사이의 공간을 조정하는 데 사용된다.
내부여백 요소 내부의 여백을 조정할 수 있다. 이는 요소의 경계와 내용 사이의 공간을 조정하는 데 사용된다.
텍스트 폰트 텍스트의 폰트를 선택할 수 있다. 다양한 글꼴 옵션을 통해 콘텐츠의 스타일을 정할 수 있다.
크기 텍스트의 크기를 조정할 수 있다. 픽셀 또는 다른 단위로 크기를 설정할 수 있다.
굵기 텍스트의 굵기를 설정할 수 있다. 일반적으로 더 중요한 텍스트에 더 굵은 굵기를 사용한다.
자간 문자 사이의 간격을 조정할 수 있다.
색상 텍스트의 색상을 조정하는 기능이다. 사용자는 색상 선택기를 활용하여 원하는 색상을 텍스트에 적용할 수 있다.
행간 텍스트 줄 사이의 간격을 조정할 수 있다. 이를 통해 가독성을 향상시킬 수 있다.
정렬 텍스트의 정렬 방식을 조정할 수 있다. 가운데, 좌측, 우측 정렬 등이 가능하다.
그림자 텍스트에 그림자 효과를 추가할 수 있다. 이는 텍스트를 더 돋보이게 하고, 시각적 효과를 향상시키는 데 사용될 수 있다.
꾸미기 배경색 요소의 배경색을 설정하는 기능이다. 다양한 색상 옵션 중에서 선택할 수 있다.
모서리

둥글게

요소의 모서리를 둥글게 만드는 설정이다. 이를 통해 더 부드럽고 현대적인 디자인을 구현할 수 있다.
테두리 요소에 테두리를 추가하는 설정이다. 스타일, 두께, 색상을 조정할 수 있다.
상자

그림자

요소에 그림자 효과를 추가하는 기능이다. 이를 통해 요소에 입체감을 부여할 수 있다.
배경 배경에 이미지, 색상, 그라데이션을 적용할 수 있는 기능이다. 페이지의 분위기와 테마를 강화하는 데 사용된다.
추가

설정

투명도 요소의 투명도를 조정하는 설정이다. 이를 통해 다양한 시각적 효과를 만들어낼 수 있다.
효과 요소에 적용할 수 있는 다양한 시각적 효과들이다.
원근감 요소에 원근감을 부여하는 설정이다. 이를 통해 디자인에 깊이감을 추가할 수 있다.
변형 요소를 변형시키는 기능이다. 이를 활용하여 요소의 크기, 회전, 기울기 등을 조정할 수 있다.