처음부터 배포까지, 8단계 사용 가이드

1단계 · 시작하기 — 첫 화면에서 할 일

빌더를 처음 열면 아래와 같은 「포트폴리오 사이트 만들기」 창이 나옵니다. 아무것도 없는 빈 화면에서 시작하지 않도록, 완성된 구조 하나를 먼저 골라 얹어 주는 화면입니다.

틀 10종, 무엇이 다른가요?

고민된다면: 아무거나 골라도 됩니다. 구조는 나중에 왼쪽 1 틀 단계에서 언제든 다시 바꿀 수 있고, 바꿔도 써 둔 글과 색은 유지됩니다. 완전히 백지에서 시작하고 싶을 때만 빈 페이지로 시작하기를 누르세요.

이 창을 다시 보고 싶다면: 주소 뒤에 ?welcome=1을 붙여 접속하면 언제든 다시 열립니다.

2단계 · 화면 익히기 — 어디에 무엇이 있나

틀을 고르면 아래와 같은 편집 화면이 나옵니다. 크게 왼쪽 패널 · 가운데 캔버스 · 오른쪽 편집 패널 세 부분입니다.

상단 도구 막대

• 왼쪽 — 지금 문서의 요약(페이지 · 테마 · 글꼴 · 채운 영역 수)과 저장됨 표시. 작업은 이 브라우저에 자동 저장됩니다.
• 화면 크기 버튼(모니터 · 태블릿 · 폰 모양) — 모바일에서 어떻게 보일지 캔버스 폭을 바꿔 미리 봅니다.
• 달 모양 — 편집 화면을 어둡게(다크 모드). 결과물 색과는 무관합니다.
• 되돌리기 / 다시하기(화살표) — 실수했을 때 누르세요. 몇 단계든 되돌아갑니다.
• 눈 모양 — 편집 표시 없이 결과물만 미리보기.
• 디스크 모양 — 저장 · 불러오기 창 (8단계에서 자세히).
• 아래 화살표 — 내보내기 창 (6단계에서 자세히).

기억할 것 하나: 이 화면에서 길을 잃으면 왼쪽 위 네 개 탭만 보세요. 1에서 4까지 순서대로 가면 완성됩니다.

3단계 · 틀 잡기 — 페이지와 구조

왼쪽 1 틀 탭에서 사이트의 뼈대를 정합니다. 패널이 아래처럼 바뀝니다.

페이지 — 사이트의 상단 메뉴가 됩니다

첫 번째 페이지가 대문입니다. 방문자가 주소로 들어오면 목록 맨 위 페이지(index.html)를 먼저 봅니다. 가장 보여주고 싶은 페이지를 맨 위에 두세요.

템플릿 — 지금 페이지의 구조 바꾸기

• 패널 아래쪽 템플릿 카드를 누르면 지금 보고 있는 페이지의 구조와 파트 배치가 그 틀로 바뀝니다.
• 배경색·글꼴·이미 써 둔 글은 그대로 유지되므로, 여러 번 눌러 보면서 마음에 드는 구조를 찾아도 됩니다.
• 페이지마다 다른 템플릿을 써도 됩니다 — 예: Home은 히어로형, Work는 카드 그리드형.

사이트 정보 — 탭 제목과 공유 미리보기

• 패널의 사이트 정보 칸에서 브라우저 탭 제목과, 링크를 카톡·슬랙에 붙였을 때 나오는 제목·설명을 정합니다.
• 비워 두면 첫 페이지 이름이 대신 쓰입니다.

4단계 · 내용 채우기 — 영역과 파트

이제 2 내용 탭으로 갑니다. 이 빌더의 핵심 개념은 이것 하나입니다:

1) 캔버스에서 영역 선택

• 캔버스에서 아무 칸이나 클릭하면 그 영역이 선택됩니다 (A, B, C… 이름이 붙어 있습니다).
• 선택을 풀려면 영역 밖 빈 곳을 클릭합니다.

2) 비어 있는 영역에 파트 끼우기

영역을 선택한 상태에서 왼쪽 영역 파트 목록을 누르면 그 파트가 영역에 들어갑니다. 자주 쓰는 파트:

3) 오른쪽 패널에서 내용 고치기

• 글 내용은 입력칸에 쓰는 대로 캔버스에 즉시 반영됩니다.
• 파트마다 항목이 다릅니다 — Hero는 인사말·버튼, Gallery는 카드 추가/삭제, Nav는 정렬·간격 등.
• 아래쪽 글자 묶음에서 이 영역만의 글꼴·크기·색을 바꿀 수 있습니다. 기본값은 상속(전체 설정을 따름)입니다.
• 이것저것 바꾸다 엉켰으면 맨 아래 전역값으로 되돌리기 한 번으로 초기화됩니다.
• 파트를 다른 것으로 바꾸려면 왼쪽 목록에서 다른 파트를 누르고, 비우려면 편집 패널 상단의 ×를 누릅니다.

사진 넣기: Gallery 카드나 배경의 사진 칸은 파일 선택으로 내 컴퓨터의 이미지를 넣거나, 무료 사진 버튼으로 온라인 이미지를 고를 수 있습니다. 넣은 사진은 결과물에 함께 담깁니다.

5단계 · 꾸미기와 효과, 3D 모델

3 꾸미기 탭은 사이트의 분위기(색 · 글꼴 · 배경 · 움직임)를 정하는 곳입니다.

색과 글꼴

• 배경색(테마) 드롭다운 — 18종. 고르는 순간 사이트 전체의 색 조합이 한 번에 바뀝니다. 밝은 톤(아이보리 · 세이지 · 크림)부터 진한 톤(네온 · 버건디 · 다크)까지.
• 글꼴 드롭다운 — Inter · Pretendard · Geist 등 10종. 맨 아래 내 글꼴 (업로드)를 고르면 .ttf 파일을 올려 내 글꼴을 쓸 수 있고, 내보내기에도 그대로 담깁니다.
• 여백 · 모서리 · 테두리 — 모든 영역에 한 번에 적용되는 전역값. 특정 영역만 다르게 하려면 4단계처럼 그 영역을 선택해 덮어씁니다.

사이트 배경

• 사이트 전체 뒤에 이미지나 영상을 깔 수 있습니다. 고정을 켜면 스크롤할 때 배경은 제자리에 있어 패럴랙스 느낌이 납니다.
• 배경을 깔면 각 영역은 기본적으로 불투명하게 내용을 지킵니다. 특정 영역만 배경이 비쳐 보이게 하려면 그 영역을 선택해 비침 값을 올리세요.

움직임 효과

• 영역 등장 효과 — 스크롤하면 영역이 떠오르듯 나타납니다. 꾸미기 탭에서 전체 방식을 고르고, 캔버스에서 특정 영역만 Shift+클릭하면 그 영역만 켜고 끌 수 있습니다.
• 텍스트 효과 — 글자가 뒤섞이며 나타나는 스크램블 등. 영역을 선택하면 편집 패널의 효과 목록에서 고를 수 있습니다.
• 인터랙션 — 부드러운 스크롤, 커스텀 커서 등은 스크립트가 필요해서 내보낸 결과물에서만 동작합니다. 편집 화면에 안 보여도 정상입니다.

3D 모델 (GLB)

3D는 단일 HTML에 담기지 않습니다. 브라우저 보안 제약 때문에 더블클릭으로 여는 단일 HTML에서는 3D가 빠집니다. 3D를 썼다면 다음 단계에서 폴더 ZIP으로 내보내세요.

6단계 · 내보내기 — 파일로 받기

사이트가 마음에 들면 상단 오른쪽 아래 화살표 아이콘(또는 4 내보내기 탭)을 누릅니다. 아래 창이 열립니다.

화면 설명

무엇으로 받을까?

스타일 · 글꼴 · 사진이 전부 함께 담깁니다. 받은 파일만 있으면 인터넷이 없어도, 어떤 컴퓨터에서도 똑같이 보입니다.

7단계 · 무료로 배포하기 — 내 주소 만들기

내보낸 ZIP을 인터넷에 올리면 누구에게나 보낼 수 있는 내 포트폴리오 주소가 생깁니다. 무료로 되는 방법부터 소개합니다.

GitHub Pages (무료 · 추천)

화면 캡처와 함께 하나씩 따라 하는 상세 가이드가 준비되어 있습니다:

• GitHub Pages로 무료 배포하기 (5분 가이드) — 3D 효과가 안 보일 때 해결법 포함
• 내 도메인(.com) 연결하기 — 이름.com 같은 나만의 주소를 붙이고 싶을 때 (선택)

고친 다음에는?

• 배포한 뒤 내용을 고치면, 빌더에서 다시 내보내서 같은 저장소에 올리면 됩니다. 주소는 그대로 유지됩니다.
• 이력서·자기소개서에 주소를 적어 두면 채용 담당자가 바로 열어 볼 수 있습니다.

8단계 · 저장 · 불러오기와 마무리 팁

작업은 브라우저에 자동 저장되지만, 여러 버전을 보관하거나 다른 컴퓨터로 옮길 때는 상단의 디스크 아이콘을 누릅니다.

불러오기는 지금 작업을 덮어씁니다. 확인 창이 한 번 뜨고, 실수로 덮었다면 되돌리기로 살릴 수 있습니다.

마무리 팁

• 모바일 확인은 필수 — 채용 담당자의 절반은 폰으로 봅니다. 상단 화면 크기 버튼으로 폰 폭을 꼭 확인하세요.
• 다크 모드 버튼은 편집 화면용입니다. 결과물의 색은 꾸미기의 테마가 정합니다.
• 자주 파일로 백업하세요. 브라우저 데이터를 지우면 자동 저장본도 사라집니다.
• 막히면 가이드 목록의 다른 글을 참고하세요.

여기까지 왔다면 끝입니다. 이제 빌더를 열고 1단계부터 직접 만들어 보세요.