---
title: "마음에 드는 사이트로 만들기 | Briks"
url: https://briks.dev/ko/docs/build-from-sites-you-like
description: "마음에 드는 사이트 하나와 스크린샷 최대 여섯 장을 추가해요. Briks가 레이아웃, 여백, 서체, 모션, 메뉴를 읽고 베끼지 않고 그 분위기로 만들어요."
last_updated: 2026-10-08
---

# 마음에 드는 사이트로 만들기

마음에 드는 레이아웃이나 분위기의 사이트를 본 적이 있다면, Briks에 그 사이트를 알려 주세요. Briks가 페이지의 구성 방식을 살펴보고, 그 느낌을 살려 직접 쓴 글과 사진으로 여러분의 사이트를 만들어요. 이 페이지에서는 사이트와 스크린샷을 추가하는 방법, Briks가 읽는 것과 절대 가져가지 않는 것, 사이트를 읽을 수 없을 때 해야 할 일을 안내해요.

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

## 사이트와 스크린샷 추가하기

1. 단계 열기

   위치: Show what you like

   New project의 세 번째 단계이고 **Optional** 로 표시돼 있어요. 패널에 용도가 이렇게 적혀 있어요. "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business."

2. 사이트 추가

   위치: A site to learn from

   주소를 입력하거나 붙여넣고 **Add** 또는 Enter를 누르세요. https는 빼도 돼요. 프로젝트마다 사이트 하나만 넣을 수 있고, 두 번째를 추가하면 ‘One site per project. Remove it to add another.’라고 나와요. 사이트는 X 표시가 있는 태그로 보이고, 눌러서 제거해요.

3. 스크린샷 추가

   위치: Screenshots

   **Add screenshots** 를 누르고 각각 12MB 이하의 JPEG, PNG, WebP 파일을 선택하세요. 카운터에 현재 개수가 표시되고, 최대 **6 of 6** 까지 가능해요.

4. 각 스크린샷이 무엇을 보여 주는지 말해 주세요

   위치: Screenshots

   **Whole page** 를 선택하고, 알고 있다면 캡처한 화면도 고르세요: **Desktop**, **Tablet**, **Phone** (**Screen size: detect** 는 자동으로 알아내요). 또는 **One section** 을 선택하고 히어로, 가격, 후기, 푸터처럼 보여 주는 부분을 고르세요.

5. 다음 단계로

   위치: Show what you like

   **Next** 를 누르세요. 검토 화면에 사이트 주소가 나오고 스크린샷 수도 함께 보여 줘요.

가입 전에 briks.dev의 입력란에서 사이트 하나를 가져올 수도 있어요: **+** 메뉴를 열고 **Add a site you like** 를 고르면 가입 후 이 단계로 와요.

## Briks가 읽는 것

사이트는 Briks가 쿠키 배너에 응답하고 팝업을 닫은 뒤, 데스크톱, 태블릿, 휴대폰 너비에서 읽어요. 살펴보는 항목은 다음과 같아요:

- **레이아웃:** 위에서 아래로 이어지는 섹션, 콘텐츠의 너비, 열 구성, 휴대폰에서 달라지는 부분이에요.
- **간격:** 섹션 사이와 섹션 안의 여백 리듬이에요.
- **Type:** 제목과 본문의 크기와 굵기, 그리고 서체의 성격이에요.
- **Colour:** 배경, 글자색, 강조색.
- **모션:** 스크롤할 때 서서히 나타나거나 밀려 들어오는 것, 고정된 채 남는 것, 저절로 움직이는 줄, 링크와 버튼에 마우스를 올렸을 때의 반응이에요.
- **헤더와 메뉴:** 단순한 링크 한 줄, 드롭다운, 큰 패널 모두 해당돼요. 패널은 하나하나 열어서 확인해요.
- **일러스트:** 페이지에 사진이 아닌 그림을 쓰면, 내 이미지도 비슷한 손그림 느낌으로 그려져요.

스크린샷으로 Briks가 알 수 있는 것은 더 적어요. 레이아웃과 정렬, 간격, 제목의 크기, 색상, 그리고 밝은지 어두운지예요. **One section** 으로 표시한 스크린샷은 그 섹션에 대해서만 알려 줘요.

## 절대 가져가지 않는 것

패널은 분명하게 말해요. ‘프로젝트당 사이트 하나. 구조, 리듬, 서체를 살펴봐요. 아무것도 복사하지 않아요.’ 실제로는 이래요:

- **문구.** 게시 전에 Briks는 마음에 드는 사이트에서 가져온 문장이 있는지 사이트를 점검하고, 있으면 여러분 비즈니스의 말투로 다시 써요. 여러분의 브리프에 있던 문장은 그대로 둬요.
- **로고와 이름.** 헤더에는 이름, 업로드한 로고 또는 그려서 만든 마크가 들어가요.
- **사진.** 스튜디오 라이브러리에서 가져오거나, 새로 그려 주거나, 직접 추가한 사진을 써요.
- **다른 회사.** 고객사나 파트너 로고 줄에는 내가 알려 준 이름만 표시돼요.

만들기 전의 질문은 내 브리프와 주소만으로 작성되고, 다른 사이트의 글에서는 가져오지 않아요.

## 사이트나 스크린샷, 또는 둘 다

Briks가 사이트를 얼마나 가깝게 따르는지는 그 밖에 무엇을 주느냐에 달려 있어요.

| 추가하는 것 | Briks가 하는 일 |
| --- | --- |
| 사이트 하나, 그것뿐 | 그 페이지에서 비즈니스에 맞춘 홈페이지 섹션의 순서를 정해요 |
| 사이트와 스크린샷 | 둘이 함께 빌드를 이끌어서, 더 이상 사이트가 순서를 정하지 않아요. 한 섹션의 스크린샷은 그 섹션을 결정해요 |
| 스크린샷만 | 레이아웃과 느낌의 기준이 되고, 섹션 스크린샷이 해당 섹션을 결정해요 |
| **Your brand** 설정 | 어떤 참고 사이트보다 우선하기 때문에, 마음에 드는 사이트가 초록색이어도 강조 색은 내 색으로 유지돼요 |

정확한 페이지를 짚어 주세요

Briks는 사이트 전체가 아니라 입력한 주소의 페이지만 읽어요. 마음에 드는 요금 페이지라면 홈 페이지 주소가 아니라 그 요금 페이지의 주소를 붙여넣으세요.

## 사이트 기준으로 빌드 측정하기

사이트를 추가하면 이 단계에 **Measure the build against the reference** 도 나타나요. 기본값은 꺼짐이에요. 켜면 Briks가 게시 전에 완성된 페이지를 마음에 드는 사이트와 비교하고, 측정된 차이를 바로잡아요. 스크린샷 없이 그 사이트만 참고로 쓸 때만 적용돼요. 그럴 때 페이지가 그 사이트의 레이아웃을 따르기 때문이에요. 빌드에 크레딧과 시간이 더 들어서, 아주 비슷하게 만드는 게 중요하지 않다면 꺼 두세요. 나중에 **Preferences** 의 **Measure builds against the reference** 에서 바꿀 수 있어요.

## 사이트가 나머지 설정을 바꾸는 방식

- **고를 수 있는 룩이나 히어로가 없어요.** **How it is built** 단계에는 "참고 사이트가 룩과 히어로를 정하기 때문에 고를 것이 없어요."라고 나와요. briks.dev에서는 "마음에 드는 사이트가 룩을 정해요."라는 안내와 함께 **Pick a look first** 가 꺼져요. [룩 고르기](https://briks.dev/ko/docs/pick-a-look) 를 참고하세요.
- **질문이 줄어요.** 레이아웃, 디자인, 페이지에서 무엇을 앞세울지는 Briks가 묻지 않아요. 사이트가 이미 답을 주기 때문이에요.
- **Dashboards** 도 참고 자료를 쓸 수 있어요. Briks는 화면에서 내비게이션(사이드바 또는 상단 바)과 패널, 표, 차트가 몇 개인지 읽어요. 대부분의 대시보드는 로그인 뒤에 있어서, 보통은 스크린샷으로 보여주면 돼요.

빌드가 진행되는 동안 대화에 **What your references decided** 상자가 생겨, 참고 자료마다 정한 내용을 보여 줘요. 콘텐츠 너비, 리듬, 헤더 메뉴, 움직임 방식이에요.

## 사이트를 읽을 수 없을 때

대부분의 공개 페이지는 문제없이 읽혀요. 그렇지 않은 흔한 이유는 다음과 같아요:

- **로그인 뒤에 있는 페이지예요.** Briks는 로그인하지 않은 방문자가 보는 화면만 볼 수 있어요. 로그인이 필요한 화면은 스크린샷을 사용하세요.
- **자동 방문자를 막는 사이트가 있어요.** 어떤 사이트는 페이지 대신 로봇 확인을 보여 줘요. Briks는 두 번째 방법으로 접근해 보고, 그것도 막히면 그 사이트는 건너뛰어요.
- **쿠키 배너와 팝업** 은 거의 문제가 되지 않아요. Briks가 살펴보기 전에 배너에 응답하고 팝업을 닫기 때문이에요.

사이트를 읽을 수 없지만 스크린샷은 읽을 수 있으면 빌드는 사이트 없이 계속되고, 상자에 “참고 자료 1개를 읽을 수 없어 건너뛰었어요.”라고 나와요. 추가한 것을 하나도 읽을 수 없으면, 요청하지 않은 사이트를 디자인하는 대신 빌드가 멈춰요. 이렇게 멈춘 빌드는 청구되지 않고 묶어 둔 크레딧이 돌아와요. 스튜디오가 알려 주는 내용은 이유에 따라 달라요:

| 스튜디오가 알려주는 말 | 할 일 |
| --- | --- |
| ‘참조 주소를 열 수 없었어요.’와 ‘아무것도 청구되지 않았어요.’ | **Build without it** 을 누르면 입력한 말과 답을 그대로 두고 같은 요청을 만들며, 새 프로젝트의 크레딧을 다시 잡아둬요. 아니면 **Remove it** 을 누르세요. **Preferences** 의 **Reference site** 가 열리고, 거기서 **Remove** 로 주소를 지울 수 있어요. |
| "참고 사이트가 스튜디오의 브라우저를 막아서 내용을 읽을 수 없었어요. 다른 참고 사이트로 다시 시도해 주세요." | **Screenshots** 아래에 페이지 스크린샷을 올려 새 프로젝트를 시작하거나, 다른 사이트로 시작하세요. |
| "시스템 오류로 레퍼런스를 읽지 못했어요. 나중에 다시 시도해 주세요." | 나중에 **Try again** 을 눌러 주세요. 입력한 내용과 답변은 저장돼 있어서 질문을 다시 하지 않아요. 또는 입력창에 입력해 새로 쓴 내용을 더해 다시 시작할 수 있어요. |

**Preferences** 의 **Reference site** 그룹에는 사이트가 처음 게시될 때까지 주소가 표시돼요. 의도한 대로 저장됐는지 확인할 수 있어요.

어디에

1. Projects
2. Your project
3. Settings
4. Preferences
5. Reference site

## 실제 예시

사이트 하나 호텔처럼 차분한 분위기를 좋아하는 치과

> 브리프: 해로게이트의 가족 치과로, 치과의사 네 명, 토요일 오전 진료, 예약 요청 양식이 있어요. 추가한 사이트: 주인이 차분하고 탁 트였다고 느낀 작은 호텔의 홈페이지예요. 그 외에는 없어요.

병원의 홈페이지는 호텔 페이지의 구성 순서와 넉넉한 여백을 따르되, 병원 고유의 문구, 진료 항목, 사진을 담아요. 호텔의 이름, 사진, 문구는 어디에도 나타나지 않아요.

사이트 하나와 스크린샷 한 장 사이트와 스크린샷이 있는 커피 로스터리

> 사이트: 메뉴가 큰 패널로 열리는 로스터리. 스크린샷: 한 쇼핑몰의 상품 그리드이고, **One section** 으로 표시하고 상품을 골라 둔 상태. **Your brand**: 강조색 `#B4542D`.

스크린샷을 추가하면 로스터리 페이지가 더 이상 섹션 순서를 정하지 않아요. 패널 메뉴는 그대로 가져오고, 제품 섹션은 스크린샷을 따르며, 참고 사이트의 색보다 로스터 본인의 포인트 색이 우선해요.

## 자주 묻는 질문

### 사이트를 만든 뒤에 참고 자료를 추가할 수 있나요?

네, 이미지로 가능해요. 스튜디오 입력창에 스크린샷을 첨부하고 **Reference** 로 표시된 상태로 두세요. 그리고 무엇을 가져올지 말해 주세요. `가격 섹션을 이 느낌으로 만들어 줘요. 세 칸으로 나누고 가운데 칸을 올려서요.`

### 비밀번호가 필요한 사이트도 만들 수 있나요?

별 도움이 되지 않아요. Briks는 공개된 페이지만 볼 수 있어요. 대신 스크린샷을 찍어서 **Screenshots** 아래에 추가해 주세요.

### 왜 더 이상 스타일을 고를 수 없나요?

마음에 드는 사이트가 있으면 그 사이트가 디자인을 정해요. 보드 세 개 중에서 고르고 싶다면 **Show what you like** 에서 그 사이트를 지워 주세요.

## 다음 글 읽기

- [제작 중 **새 프로젝트 시작하기** 새 프로젝트 페이지의 모든 선택을 단계별로 안내해요: 프로젝트 종류, 브리프, 마음에 드는 사이트, 브랜드, 사진, 빌드 스위치, 시작 비용.](https://briks.dev/ko/docs/new-project)
- [제작 중 **스타일 고르기** AI 홈페이지 제작 도구 Briks: 사이트를 만들기 전에 색, 글꼴, 모서리, 버튼, 카드로 이뤄진 세 가지 룩을 보고 고르세요.](https://briks.dev/ko/docs/pick-a-look)
- [제작 중 **좋은 브리프 쓰는 법** 첫 결과가 잘 나오는 브리프 작성법: 사업, 고객, 페이지, 핵심 행동, 사실과 말투, 전후 예시 6개.](https://briks.dev/ko/docs/writing-a-brief)
- [제작 중 **웹 앱과 대시보드** AI 앱 제작 도구의 앱·대시보드 종류가 만드는 것, 기록 저장 위치, 아직 안 되는 기능, 예약·재고·카페 주문 예시예요.](https://briks.dev/ko/docs/web-apps-and-dashboards)

아직 해결되지 않았나요?

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