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

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

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

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

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

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

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

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

상단 도구 막대

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

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

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

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

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

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

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

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

템플릿 10종 — 무엇이 어떻게 나오나

템플릿을 누르면 칸 배치와 파트가 한꺼번에 얹힙니다. 색과 글꼴은 건드리지 않으므로, 마음에 안 들면 다른 것을 눌러 몇 번이고 갈아 볼 수 있습니다.

템플릿을 바꾸면 칸 배치가 갈아엎어집니다. 써 둔 글은 같은 이름의 칸에 남지만, 칸 수가 다르면 갈 곳이 없는 내용은 사라집니다. 글을 많이 쓴 뒤에는 Ctrl+Z로 되돌릴 수 있다는 것을 기억하고 바꾸세요.

사이트 구성 — 한 페이지인가, 여러 페이지인가

1 틀 탭 맨 위에서 고릅니다. 결과물의 파일 개수와 메뉴 동작이 통째로 달라지는 선택이라 먼저 정하는 편이 좋습니다.

메뉴 동기화는 기본으로 켜져 있습니다. 한 페이지에서 메뉴 파트를 고치면 같은 파트를 쓰는 다른 페이지에도 함께 적용됩니다 — 페이지마다 따로 고치다 메뉴가 어긋나는 일을 막아 줍니다.

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

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

4단계 · 영역 다루기 — 칸을 만들고, 지우고, 늘리기

파트를 넣기 전에 칸(영역)부터 원하는 모양으로 만들어 둡니다. 템플릿이 준 칸을 그대로 써도 되지만, 칸을 더 넣거나 빼는 방법을 알면 원하는 구성을 훨씬 자유롭게 만들 수 있습니다.

1) 영역 선택하기

• 캔버스에서 아무 칸이나 클릭하면 선택됩니다. 오른쪽에 그 영역의 편집 패널이 열립니다.
• 선택을 풀려면 영역 밖 빈 곳을 클릭합니다.

2) + 로 칸 늘리기

영역 테두리 네 변 한가운데의 + 버튼이 그 방향으로 칸을 넣어 줍니다. 마우스를 영역 위에 올려야 보입니다.

좌우 + 가 안 보인다면 그 행이 이미 꽉 찼거나(한 행에 6칸이 최대), 템플릿이 정한 뼈대 칸이라 좌우로 못 늘리는 자리입니다. 위/아래 + 로 새 행을 만든 다음 그 행에서 좌우로 나누면 됩니다.

3) × 로 안 쓰는 칸 지우기

파트를 넣지 않은 빈 영역에는 오른쪽 위에 × 가 나타납니다. 누르면 그 칸이 사라지고 남은 칸들이 자리를 채웁니다.

4) 손잡이로 크기 바꾸기

영역을 선택하면 오른쪽 아래 모서리에 손잡이가 생깁니다. 끌어서 가로·세로를 바꿉니다.

• 가로를 늘리면 같은 행의 옆 칸이 그만큼 자동으로 좁아집니다. 행 전체 폭은 그대로입니다.
• 가로를 줄이면 남은 자리가 여백으로 남습니다. 이 여백을 어떻게 쓸지는 7단계 배치 다듬기에서 정합니다.
• 세로는 내용보다 작게 줄어들지 않습니다. 글이나 사진이 잘리는 것을 막기 위해서입니다. 더 줄이고 싶다면 안의 내용(글자 크기·여백)을 먼저 줄이세요.

되돌리기를 기억하세요. 이 단계의 모든 동작은 Ctrl+Z 로 되돌아갑니다. 마음껏 눌러 보세요.

5단계 · 파트 넣기 — 칸에 부품 끼우기

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

파트는 다섯 묶음으로 나뉘어 있습니다

넣는 방법

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

파트를 바꾸거나 비우려면: 왼쪽 목록에서 다른 파트를 누르면 교체되고, 편집 패널 상단의 × 를 누르면 칸이 다시 빈 상태가 됩니다.

6단계 · 내용 고치기 — 오른쪽 편집 패널

영역을 선택하면 오른쪽에 그 파트 전용 편집 항목이 열립니다. 여기서 글과 세부 모양을 고칩니다.

기본 사용법

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

사진 넣기: Gallery 카드나 배경의 사진 칸은 파일 선택으로 내 컴퓨터의 이미지를 넣습니다. 넣은 사진은 결과물에 함께 담깁니다.

모르는 항목은 ? 를 누르세요

항목 이름 옆의 작은 ? 를 누르면 “이게 무엇이고 언제 쓰는지” 설명이 말풍선으로 열립니다. 설명문을 화면에 늘 깔아 두지 않고 필요할 때만 꺼내 보도록 한 것입니다.

묶음은 접었다 펼 수 있습니다

편집 항목이 많은 파트는 묶음별로 접혀 있습니다. 묶음 제목을 누르면 펼쳐집니다. 지금 고칠 것만 펴 두면 패널이 짧아져 찾기 쉽습니다.

항목이 더 있습니다 — 부가 기능

상단 도구 막대의 부가 기능을 켜면 평소에 감춰 둔 세밀한 조정 항목들이 함께 나타납니다. 처음에는 꺼 둔 채로 쓰다가, 익숙해지면 켜 보세요.

이것저것 바꾸다 엉켰다면 패널 맨 아래 전역값으로 되돌리기 한 번으로 그 영역 설정이 초기화됩니다. 문서 전체는 Ctrl+Z 입니다.

7단계 · 배치 다듬기 — 여백과 자유 배치

4단계에서 칸 크기를 줄이면 남은 여백이 생깁니다. 그 여백을 어떻게 나눌지, 그리고 칸 안의 항목을 손으로 옮길지를 여기서 정합니다. 건너뛰어도 사이트는 완성됩니다 — 더 다듬고 싶을 때 오세요.

1) 행 정렬 — 여백을 어디에 둘까

한 행에 칸이 여럿이고 여백이 남을 때, 그 여백을 어느 쪽에 몰지 고릅니다.

2) 영역 안 자유 배치 — 항목을 손으로 옮기기

오른쪽 패널의 영역 안 자유 배치(항목 끌기) 를 켜면, 그 칸 안의 제목·글·버튼을 마우스로 끌어 원하는 자리에 놓을 수 있습니다.

• 켜는 순간 항목들이 지금 있던 자리 그대로 고정됩니다. 위로 튀어 오르지 않습니다.
• 3D Model을 뺀 모든 파트에서 쓸 수 있습니다.
• 폰 화면에서는 자유 배치가 자동으로 풀리고 위아래로 쌓입니다 — 좁은 화면에서 글이 겹치지 않게 하기 위해서입니다.

자유 배치는 마지막에 쓰세요. 글을 다 쓰고 크기를 정한 다음에 위치를 잡아야 두 번 일하지 않습니다.

8단계 · 꾸미기 — 색 · 글꼴 · 배경

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

테마 18종 — 색 한 벌을 통째로

테마를 누르면 배경 · 글자 · 강조색이 한 벌로 바뀝니다. 색을 하나씩 고를 필요가 없게 미리 맞춰 둔 조합입니다.

글꼴 10종

글꼴 파일은 결과물에 함께 담겨 나갑니다. 방문자 컴퓨터에 그 글꼴이 없어도 똑같이 보입니다.

사이트 배경

페이지 전체 뒤에 깔리는 배경입니다. 이미지 · 영상 · 그라디언트 중에서 고릅니다.

여백과 상자 모양 — 사이트 전체에 걸립니다

색과 글꼴

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

사이트 배경

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

9단계 · 효과와 3D 모델

여기부터는 없어도 되는 단계입니다. 사이트를 더 살아 움직이게 만들고 싶을 때 씁니다.

움직임 효과

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

3D 모델 (GLB)

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

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

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

화면 설명

두 방식, 무엇이 나오나

3D 모델을 넣었다면 반드시 ZIP입니다. 단일 HTML에는 3D가 들어가지 않습니다 — 모델 파일을 파일 하나에 욱여넣을 수 없기 때문입니다.

광고나 제휴 링크는 결과물에 절대 들어가지 않습니다. 편집 화면에 보이는 배너는 이 도구를 유지하기 위한 것이고, 여러분이 내려받는 파일에는 여러분이 만든 것만 담깁니다.

무엇으로 받을까?

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

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

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

GitHub Pages (무료 · 추천)

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

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

고친 다음에는?

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

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

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

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

세 가지가 각각 무엇을 하나

자동 저장은 늘 돌고 있습니다. 상단에 ‘저장됨’이라고 보이면 브라우저에 이미 담긴 상태입니다. 위 세 가지는 여러 벌 보관과 컴퓨터 옮기기를 위한 것입니다.

마무리 팁

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

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

13단계 · 파트 사전 — 16종 전부

각 파트가 무엇이고, 무엇을 고칠 수 있고, 화면에 어떻게 나오는지를 모아 두었습니다. 처음부터 읽지 마시고, 쓸 파트가 생겼을 때 그 줄만 찾아보세요.

파트를 넣는 방법은 어느 파트든 같습니다 — 캔버스에서 칸을 클릭한 다음, 왼쪽 2 내용 탭에서 파트를 클릭하거나 칸으로 끌어다 놓습니다. 넣은 뒤 고칠 항목은 전부 오른쪽 패널에 나옵니다.

머리 — 페이지 맨 위 메뉴

메뉴가 가리키는 곳은 세 파트에 공통으로 있습니다. 한 페이지 구성이면 같은 문서 안의 위치로 스크롤하고, 여러 페이지 구성이면 다른 파일로 이동합니다. 사이트 구성은 1 틀 탭 맨 위에서 정합니다.

본문 — 실제 내용이 들어가는 칸

배너 — 시선을 끄는 큰 띠

마무리 — 연락처와 페이지 하단

3D

3D Model만은 ‘영역 안 자유 배치’를 쓸 수 없습니다. 뷰어가 칸 전체를 차지해야 각도와 조명이 어긋나지 않기 때문입니다.

14단계 · 효과 사전 — 무엇이 어디에 붙나

효과는 아무 파트에나 붙지 않습니다. 어울리는 자리에만 붙도록 미리 정해 두었습니다. 아래 표에서 ‘붙는 파트’를 먼저 보세요.

붙이는 방법: 왼쪽 3 꾸미기 탭의 효과 카드를 캔버스의 파트 위로 끌어다 놓습니다. 받을 수 있는 파트는 끄는 동안 테두리가 밝아집니다. 뗄 때는 오른쪽 패널의 효과 목록에서 지웁니다.

영역에 붙이는 효과 11종

실크 배경과 도트 웨이브는 함께 켤 수 없습니다. 둘 다 칸 뒤를 채우는 캔버스라 서로를 가립니다. 새로 켠 쪽이 남습니다.

글자에 붙이는 효과 8종

파트 편집 항목의 글자 효과에서 고릅니다. 제목에 걸립니다.

사이트 전체에 거는 것

3 꾸미기 탭 아래쪽, 개별 칸이 아니라 사이트 전체에 걸립니다.

‘결과물에서만’이 왜 있나요? 편집 화면의 캔버스는 안쪽에 따로 떠 있는 화면이라, 스크롤과 커서의 주인이 바깥 편집기입니다. 흉내를 내면 실제 사이트와 어긋나 보이므로 아예 걸지 않습니다. 미리보기 버튼이나 내보낸 파일에서 확인하세요.

효과는 적을수록 낫습니다. 한 페이지에 서너 개면 충분합니다. 전부 켜면 눈이 어디를 봐야 할지 몰라 정작 작업물이 안 보입니다. 방문자의 기기가 ‘동작 줄이기’로 설정돼 있으면 움직임은 자동으로 꺼집니다.