3장. 디자인 정하기

이번 장에서 할 일

프리셋 팩(만들 서비스의 화면 구성, 기능 규칙, 디자인 노트, 예시 데이터, 그림을 묶어 둔 폴더)의 디자인 노트(design-notes.md)에 적힌 주소에서 DESIGN.md(색, 글꼴, 간격 규칙을 적은 파일)를 받아 고쳐 써요. 받는 원문은 디자인 카탈로그 Refero Styles에 있는 넷플릭스 스타일이에요. 로그인 전 첫 화면을 잰 것이라 로그인 후 둘러보기 화면에 맞게 고치고 로고, 빨강, 서체처럼 브랜드를 알아보게 하는 것은 바꿔요.

그다음 홈 화면 구성 세 가지 가운데 하나를 골라요. 기본은 구성도(고르기 페이지가 직접 그리는 화면 구성 그림)로 고르고, 원하면 시안(comp. 완성 화면을 미리 그린 그림)을 그려서 골라요.

1. DESIGN.md 받아 고치기

2장과 같은 대화창에 보내요.

시안을 그려서 고르고 싶으면 넷째 줄의 시안은 그리지 말고 구성도로 보여 줘.를 시안을 그려서 보여 줘.로 바꿔 보내세요.

배치도는 프리셋 팩에 들어 있는 화면 배치 그림이에요. 에이전트는 이런 순서로 일해요.

1. 1.

   브라우저 도구로 Refero 페이지를 열고 "Download DESIGN.md" 버튼으로 받아요. 안 되면 페이지에 있는 원문을 써요.

2. 2.

   "받은 뒤 고칠 것"대로 고쳐요. 바탕과 버튼은 로그인 후 화면에 맞추고, 강조색은 비슷한 계열의 다른 빨강, 서체는 Pretendard, 로고는 서비스 이름 글자로 바꿔요.

3. 3.

   명세 검사기로 확인하고, 원래 서비스 이름과 색 코드가 남지 않았는지 찾아봐요.

고친 내용을 확인하려면 이렇게 물어보세요.

2. 화면 구성 고르기

DESIGN.md를 고치면 에이전트가 서체 파일을 받고, 브라우저에 화면 구성 고르기 페이지를 열어요. 홈 화면 카드 세 장이 나와요. 기본은 카드마다 구성도(에이전트는 배치도나 wireframe이라고 부르기도 해요)가 나오고, 시안을 그리게 했다면 시안이 나와요.

배치는 프리셋 팩의 배치도로 정해져 있어서 세 장은 같은 배치 안에서 세부가 조금씩 달라요. 마음에 드는 카드를 눌러 고르세요.

시안을 그리면 이런 그림이 나와요. 프리셋을 만들 때 이 세 장을 받았어요.

크게 보기

크게 보기

크게 보기

대화창에 적어 보내도 돼요. 여러 안을 섞고 싶으면 두 번째처럼 보내세요. 두 번째의 빌보드는 홈 맨 위의 큰 대표 작품 화면이에요.

고른 다음 4장의 프롬프트를 보내면 모든 페이지를 만들기 시작해요.

더 해 보기

다른 스타일로 바꾸기

[ ] 안의 주소를 표에서 고른 주소로 바꾸세요. 디자인 노트의 "받은 뒤 고칠 것"은 넷플릭스 원문에 맞춘 것이라 쓰지 않아요.

원래 서비스를 보고 더 맞추기

ego lite를 설치하고 넷플릭스에 로그인해 프로필을 골라 두세요. 알림 권한을 물으면 "차단"을 고르세요. 미리 보기 영상이 자동으로 재생되면서 넷플릭스의 예고편 기록에 남을 수 있어요.

에이전트가 물어보면