---
title: "첫 홈페이지 만들기: 처음부터 끝까지 | Briks"
url: https://briks.dev/ko/docs/your-first-site
description: "작은 베이커리 하나를 따라가요. 새 프로젝트부터 briks.live 미리보기, 채팅으로 첫 수정, 프로덕션 게시까지 모든 화면을 순서대로 보여드려요."
last_updated: 2026-10-08
---

# 첫 홈페이지 만들기: 처음부터 끝까지

이 안내는 빈 워크스페이스에서 공개 사이트까지 한 사업체를 따라가며, 직접 해 보기 전에 모든 화면을 한 번씩 보여 드려요. 예시는 요크의 작은 베이커리 Larder Lane이고, Free 플랜의 50 크레딧으로 만들어요.

읽는 데 9분 2026년 10월 8일 스튜디오 기준으로 확인함

## 시작하기 전에

세 가지를 준비해 주세요. 사업 이름, 사업을 소개하는 한 문단, 대략적인 페이지 목록이에요. Larder Lane을 운영하는 Sam은 빵을 보여 주고, 토요일 사전 주문을 받고, 가게 위치와 영업시간을 알려 주는 사이트를 원해요.

Sam은 Free 플랜이라 50 크레딧이 있고 프로젝트는 1개까지 만들 수 있어요. 새 사이트는 만드는 동안 50 크레딧을 잡아 두기 때문에, 그는 다른 일에 먼저 쓰지 않고 가득 찬 잔액으로 시작해요. Free 워크스페이스의 첫 사이트라서, 가진 크레딧보다 더 들더라도 끝까지 만들어져요.

## 1단계: 비즈니스 설명하기

어디에

1. Projects
2. New project

Home의 프롬프트 상자에서 시작해 **Continue** 를 눌러도 돼요. 어느 쪽이든 일곱 단계의 짧은 설정으로 이어져요: **What are you making?**, **Describe it**, **Show what you like**, **Your brand**, **Pictures**, **How it is built**, **Review and create** 예요. 옆의 목록에서 지금 어디쯤인지 볼 수 있고, **Back** 과 **Next** 로 단계를 오가요. 입력한 내용은 제작이 시작될 때까지 이 브라우저에 저장되니, 나갔다가 다시 와도 돼요.

1. 종류를 고르고 이름을 붙여요

   위치: What are you making?

   Sam은 **Website** 를 고르고 **Business or project name** 에 `Larder Lane`을 입력해요. 이 이름은 사이트의 첫 주소도 돼요.

2. 설명 작성하기

   위치: Describe it

   입력란에는 최대 25,000자까지 적을 수 있고 최소 열 자가 필요해요. 직접 입력하거나 음성으로 말할 수 있어요. 아래 패널에는 좋은 설명에 들어갈 내용이 나와 있어요. 누구를 위한 것이고 어디에 있는지, 무엇을 제공하거나 하는지, 어떤 느낌이어야 하는지, 필요한 페이지나 기능이에요.

3. 선택 단계 건너뛰기

   위치: Show what you like, Your brand

   둘 다 **Optional** 로 표시되어 있고, 아무것도 채우지 않으면 버튼에 **Skip** 이라고 나와요. Sam은 따라 하고 싶은 사이트도 정해 둔 색도 없어서 둘 다 건너뛰고 Briks가 고르게 해요.

4. 기본 제공 사진 유지하기

   위치: Pictures

   **Included** 라고 표시된 첫 번째 선택지는 스튜디오 라이브러리에서 어울리는 사진을 가져오고 없는 것은 새로 그려요. 사진에는 비용이 들지 않아요. 나머지 선택지는 모든 사진을 새로 그리고, 사진 한 장마다 가격이 빌드에 더해져요.

5. 구조 확인하기

   위치: How it is built

   **Ask about what is unclear before building** 은 켜져 있어요. 그대로 두세요. Sam은 승인 스위치와 **Check the published site** 를 꺼 둬요.

6. 검토하고 제작하기

   위치: Review and create

   선택한 항목마다 되돌아가 바꿀 수 있는 방법이 함께 나와요. 그 아래 안내에는 새 프로젝트가 만드는 동안 크레딧 50개를 보류해 둔다는 것, 현재 잔액, 첫 버전이 나오기까지 몇 분 걸린다는 내용이 있어요. 이런 프로젝트가 보통 가진 크레딧보다 더 필요하면, 그 아래 한 줄에 예상치가 나와요. Sam은 **Build it** 을 눌러요.

Sam의 브리프 라더 레인, 요크

> 요크의 작은 동네 빵집으로, 수요일부터 토요일까지 문을 열어요. 사워도우, 호밀빵, 페이스트리를 매일 아침 매장에서 구워요. 손님은 간단한 양식(이름, 전화번호, 원하는 빵, 픽업 시간)으로 토요일 수령용 빵을 미리 주문할 수 있어요. 페이지: 홈, 우리 빵, 사전 주문, 영업시간과 오시는 길이 담긴 방문 안내, 두 사람의 짧은 이야기. 따뜻하고 꾸밈없는 말투. 크림색과 짙은 초록색, 크고 솔직한 빵 사진.

쇼핑몰이 아니라 폼인 이유

Sam은 간단하게 시작하고 싶어서 온라인 결제 대신 폼으로 사전 주문을 받아요. 고객은 매장 계산대에서 결제해요. 나중에 온라인 결제를 받으려면 **Settings**, **Payments** 에서 자신의 결제 서비스를 연결하고 변경으로 요청하면 돼요.

50 크레딧에서는 승인 단계를 꺼 두세요

**Approve the words before building**, **Choose the look from three directions**, **Choose the hero from four wireframes** 는 각각 결정할 때까지 빌드를 멈춰요. 이어서 진행하면 다시 최대 50 크레딧, 잔액이 그보다 적으면 최대 5 크레딧까지 보류되고, 각 단계는 작업한 만큼만 차감돼요. 50 크레딧으로 멈춤이 여러 번 있는 빌드를 하면 잔액이 부족해질 수 있어요. [빌드 중 승인하기](https://briks.dev/ko/docs/approval-steps) 를 참고하세요.

## 2단계: 질문에 답하기

프로젝트는 **Studio** 탭에서 열려요. 왼쪽에는 대화, 오른쪽에는 미리보기가 보여요. 무엇이든 계획하기 전에 Briks가 몇 가지 질문을 준비하고, 미리보기 위 라벨에는 'Waiting for your answers'라고 나와요. 자세한 내용은 [빌드 전 질문](https://briks.dev/ko/docs/questions-before-building) 에서 볼 수 있어요.

1. 페이지에 체크하기

   위치: Studio

   Briks가 브리프를 바탕으로 페이지를 제안해요. **Home** 에는 **Always** 가 표시돼요. 나머지는 체크하거나 해제하고, 'Add a page, for example Careers'라고 적힌 입력란에 직접 추가할 수도 있어요. 사이트는 최대 10개 페이지로 시작할 수 있고, 체크한 페이지는 모두 빠짐없이 만들어져요.

2. 나머지 질문에 답하기

   위치: Studio

   각 질문에는 **Recommended** 로 표시된 선택지가 이미 선택되어 있어요. 맞지 않는 건 바꾸거나, **Something else** 를 선택해 직접 답을 쓰세요.

3. 답변 보내기

   위치: Studio

   **Continue** 를 누르세요. **Decide for me** 를 누르면 추천 답변이 모두 선택돼요. 대화창 아래 입력란에 직접 말로 답을 적어도 돼요.

Sam이 선택한 것

> Sam은 Home, Our bread, Pre-orders, Visit us, Our story를 그대로 두고, 납품하는 카페 세 곳을 위해 `Wholesale`을 추가했어요. 선불 예약을 어떻게 받을지 묻는 질문 하나에는 추천 답변을 그대로 선택했어요.

여섯 페이지를 정하고 Continue를 눌렀어요. 제작이 바로 시작됐어요.

## 3단계: 만드는 모습 지켜보기

대화창에 **Planning the site and its pictures**, **Designing and building**, **Verifying build**, **Publishing** 처럼 각 단계가 진행되는 대로 표시돼요. 첫 버전은 몇 분 걸려요. 진행 중에 페이지를 떠나도 제작은 계속되고, 돌아오면 결과가 기다리고 있어요. 각 단계는 [제작 과정 지켜보기](https://briks.dev/ko/docs/watching-a-build) 에서 설명해요.

사이트가 게시되면 미리보기가 채워지고 위의 라벨이 **Live preview** 로 바뀌어요. 미리보기 위의 버튼으로 데스크톱, 태블릿, 휴대폰 너비로 보거나, 새로고침하거나, 전체 화면으로 열거나, 사이트 자체 주소의 새 탭으로 열어 방문자처럼 모든 페이지를 눌러 볼 수 있어요.

만드는 중에 마음이 바뀌었나요?

**Stop** 을 누르면 진행 중인 빌드가 게시되기 전에 멈추고 사이트는 그대로 유지돼요. 멈출 때까지 한 작업에 대해서만 비용이 청구돼요.

빌드가 크레딧을 기다릴 때

이후 사이트나 유료 요금제에서, 나머지 작업에 보통 가진 크레딧보다 더 많이 드는 제작은 계획을 세운 뒤 멈춰요. 대화에 예상치와 가진 크레딧과 함께 **Waiting for credits** 가 표시되고 계획은 그대로 보관돼요. **Get credits** 를 누르고 크레딧을 받은 뒤 **Resume building** 을 누르세요. 저절로 이어지지는 않아요. [크레딧과 요금제](https://briks.dev/ko/docs/credits-and-plans) 를 확인해 보세요.

## 4단계: 미리보기 열기

처음 게시하면 프로젝트 이름으로 만든 주소의 미리보기가 만들어져요. 여기서는 `larder-lane.briks.live`예요. 이미 사용 중인 이름이면 끝에 몇 글자가 붙어요. Owner나 Admin은 나중에 바꿀 수 있어요. [사이트 주소](https://briks.dev/ko/docs/site-address) 를 확인해 보세요.

미리보기는 주소를 아는 누구나 열 수 있는 실제로 작동하는 사이트예요. 프로덕션과는 두 가지가 달라요. 검색 엔진에는 제외해 달라고 요청하고, 폼으로 보낸 메시지는 스튜디오에 보관될 뿐 이메일로는 전달되지 않아요.

- 미리보기 창만 보지 말고, 모든 페이지를 직접 휴대폰으로 읽어 보세요.
- 메뉴를 열고 체크한 페이지가 모두 있는지 확인하세요.
- 양식으로 테스트 사전 주문을 보낸 다음, 프로젝트의 **Forms** 에서 확인하세요.

어디에

1. Projects
2. Larder Lane
3. Settings
4. Forms

## 5단계: 하나 바꿔 보기

Sam은 방문 안내 페이지에서 영업시간이 아래쪽에 있고, 홈페이지 사진에는 사워도우로 알려진 가게인데 크루아상이 나와 있는 걸 발견해요. 대화 아래 입력창, 'Change the hero, add a page, adjust the colours…'라고 적힌 곳에 메시지를 한 번 써요.

1. 바꿀 내용 쓰기

   위치: Studio

   무엇을 어디서 바꿀지 쉬운 말로 적어 주세요. 메시지 하나에 관련된 변경을 여러 개 담을 수 있고, 최대 6,000자까지 쓸 수 있으며 이미지나 동영상은 여섯 개까지 첨부할 수 있어요.

2. 점검으로 결정하기

   위치: Studio

   상자 아래의 **Check the site after this change** 는 게시된 사이트를 네 가지 화면 크기로 살펴보고 깨져 보이는 부분을 고쳐요. 몇 분과 크레딧이 조금 더 들어서, 이번처럼 작은 변경에는 꺼 두세요.

3. 보내기

   위치: Studio

   보내기 버튼 **Send** 를 누르세요. 변경은 실행되는 동안 5 크레딧을 잡아 둬요. 이미 빌드가 실행 중이면 버튼이 **Queue** 로 바뀌어요. 메시지는 대기하다가 그 빌드가 끝나면 실행돼요.

Sam의 변경

> Visit us에서 영업시간을 맨 위에 큰 글씨로 넣어 주세요. 수요일부터 토요일, 오전 8시부터 오후 2시까지예요. 홈페이지에서는 큰 사진을 나무 도마 위 사워도우 빵을 가까이서 찍은 사진으로 바꿔 주세요.

Briks가 변경 사항을 빌드해 같은 주소에 게시했고, 미리보기가 다시 로드됐어요. 이전 버전은 Sam이 다시 필요할 때를 위해 프로젝트의 버전에 남아 있어요.

팁

변경이 아니라 질문을 입력하면, 예를 들어 '폼이 있는 페이지는 어디야?'처럼 입력하면, 빌드 없이 대화창에서 답을 받고 아무것도 묶이지 않아요. [질문하기](https://briks.dev/ko/docs/asking-questions) 와 [변경하기](https://briks.dev/ko/docs/making-changes) 를 참고하세요.

## 6단계: 프로덕션에 게시하기

프로덕션은 사이트를 완전히 공개해요. 검색 엔진에 노출될 수 있고, 폼으로 들어온 메시지는 이메일로 전달돼요.

1. Publish를 누르세요

   위치: Top bar

   사이트를 게시한 뒤에는 상단 바에 **Preview** 와 **Publish** 버튼이 보여요. Publish를 누르세요.

2. 대화상자를 읽어 보세요

   위치: Publish to production

   무엇이 바뀌는지 설명해 줘요. Briks가 먼저 링크를 포함해 사이트를 점검하고, 고칠 것이 있으면 아무것도 바뀌지 않으며 스튜디오가 이유를 알려 줘요.

3. 확인

   위치: Publish to production

   **Publish to production** 을 누르세요. 끝나면 상단 바의 버튼이 **In production** 으로 바뀌어요.

프로덕션에 게시하는 일과 **Back to preview** 로 되돌아가는 일에는 크레딧이 들지 않아요. 사이트가 프로덕션에 올라간 뒤에는 보내는 변경 사항도 그곳에 함께 게시돼요. 자세한 내용은 [프로덕션에 게시하기](https://briks.dev/ko/docs/publish-to-production) 에서 볼 수 있어요.

## 7단계: 나만의 도메인

Free 요금제에서는 사이트가 `briks.live` 주소에 머물고, 프로덕션에서도 그 주소로 작동해요. `larderlane.co.uk` 같은 나만의 도메인 연결은 Starter 요금제부터예요.

어디에

1. Projects
2. Larder Lane
3. Settings
4. Domain

**Your domain** 에 도메인을 입력하고 **Connect domain** 을 누르세요. 그런 다음 도메인을 구입한 업체에서 레코드 세 개를 추가해요. 레코드는 도메인이 어디를 가리키는지 인터넷에 알려 주는 짧은 설정이에요. 여기서는 A 레코드, `edge.briks.live`를 가리키는 `www`용 CNAME, 도메인이 내 것임을 증명하는 `_briks`라는 TXT 레코드예요. Briks는 2분마다 다시 확인하고 보안 인증서를 대신 발급해요. [도메인 연결하기](https://briks.dev/ko/docs/custom-domains) 에서 과정을 안내해요.

## 문제가 생겼을 때

### 빌드가 실패했어요. 크레딧이 차감됐나요?

아니요. 실패한 요청에는 비용이 청구되지 않고, 잡아 둔 금액도 잔액으로 돌아가요. 프로젝트에는 **Needs attention** 이 표시돼요. 대화의 마지막 메시지를 읽고, 다음 메시지를 보내서 이어 가세요.

### 변경에 쓸 크레딧이 부족해요.

스튜디오가 변경 내용에 무엇이 들어 있는지와 잔액을 알려 주고, 아무것도 시작하지 않아요. 페이지를 추가하는 변경이 보통 가진 크레딧보다 많이 든다면 예상치와 함께 거절될 수도 있어요. 사이트는 계속 온라인 상태예요. Owner는 열리는 창이나 **Billing** 에서 크레딧이 더 많은 플랜으로 바꿀 수 있어요. [크레딧과 플랜](https://briks.dev/ko/docs/credits-and-plans) 을 참고하세요.

### Free에서 두 번째 사이트를 만들 수 있나요?

아니요. Free 플랜에는 프로젝트 1개가 포함돼요. Pro 이상은 더 많이 포함돼요. [크레딧과 플랜](https://briks.dev/ko/docs/credits-and-plans) 의 플랜 표를 참고하세요.

### 공개하기 전에 다른 사람이 먼저 봐야 할 때예요.

미리보기 주소를 보내 주세요. 계정은 필요 없어요. [미리보기 공유하기](https://briks.dev/ko/docs/sharing-a-preview) 를 참고하세요.

## 다음 글 읽기

- [제작 중 **새 프로젝트 시작하기** 새 프로젝트 페이지의 모든 선택을 단계별로 안내해요: 프로젝트 종류, 브리프, 마음에 드는 사이트, 브랜드, 사진, 빌드 스위치, 시작 비용.](https://briks.dev/ko/docs/new-project)
- [제작 중 **좋은 브리프 쓰는 법** 첫 결과가 잘 나오는 브리프 작성법: 사업, 고객, 페이지, 핵심 행동, 사실과 말투, 전후 예시 6개.](https://briks.dev/ko/docs/writing-a-brief)
- [프로젝트에서 작업하기 **수정 요청하는 방법** Briks에 글로 요청해 사이트를 바꾸는 방법: 말하는 법, 사진 추가, 변경 내용과 비용, 내부 페이지, 대기 요청, 잘못된 결과 고치기.](https://briks.dev/ko/docs/making-changes)
- [게시와 도메인 **프로덕션에 게시하기** Briks 사이트를 미리보기에서 프로덕션으로 옮겨요. 사이트 점검이 읽는 것, 출시를 막는 것, 해결법, 되돌리기를 안내해요.](https://briks.dev/ko/docs/publish-to-production)

아직 해결되지 않았나요?

프로젝트 이름과 기대했던 내용을 적어 [hello@briks.dev](mailto:hello@briks.dev) 로 보내 주세요. 스크린샷이 있으면 도움이 돼요.