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

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

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

#Briks가 읽는 것

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

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

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

#절대 가져가지 않는 것

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

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

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

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

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

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

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

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

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

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

#사이트를 읽을 수 없을 때

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

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

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

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

#실제 예시

#자주 묻는 질문