DAY 1 · 8/7 (금) · SESSION 68
좋은 홈페이지를 분석하고, Stitch 설계를 Codex와 Three.js로 구현합니다.
THREE.JS REFERENCE · 01
자동차를 직접 움직이며 작업과 소개를 발견하는 3D 포트폴리오입니다. 3D 장면 자체가 내비게이션이 되는 방식을 볼 수 있습니다.
THREE.JS REFERENCE · 02
첫 문장으로 회사가 하는 일을 설명하고, 스크롤에 맞춰 3D 장면과 프로젝트를 연결합니다. 3D가 장식이 아니라 전문성을 증명하는 콘텐츠가 되는 방식을 관찰합니다.
THREE.JS REFERENCE · 03
짧은 정보 구조와 넓은 여백 안에 3D 장면을 배치한 사례입니다. 전체 효과를 복제하지 않고, 상단 메뉴·한 줄 제목·중앙 오브젝트·링크 버튼만 Codex로 따라 만듭니다.
좋은 홈 읽기
좋은 3D 홈페이지는 3D가 없어도 메시지와 첫 행동이 이해되고, 3D가 더해졌을 때 경험의 의미가 강화됩니다.
내용 정리
브랜드 이름 · 대상 사용자 · 한 줄 가치 제안 · 첫 행동 버튼 · 카드 3개를 빈칸 없이 작성합니다.
Stitch 생성
반응형 홈페이지의 첫 화면을 디자인해 주세요. 서비스: [브랜드 이름 / 제공하는 서비스] 대상 사용자: [누가 사용하는지] 핵심 메시지: [한 줄 가치 제안] 첫 행동 버튼: [버튼 문구] 콘텐츠: 소개 문장, 서비스 또는 상품 카드 3개 디자인 방향 - 신뢰감 있고 현대적인 분위기 - 배경색 1개, 강조색 1개, 중립색만 사용 - 제목과 첫 행동 버튼이 가장 먼저 보이는 정보 계층 - 충분한 여백과 명확한 카드 구분 - 데스크톱 1440px 기준으로 먼저 디자인 - 모바일 390px에서는 한 열로 자연스럽게 재배치 로그인, 장바구니, 관리자 화면, 복잡한 애니메이션은 넣지 마세요.
Stitch 수정
현재 첫 화면의 전체 분위기와 콘텐츠는 유지해 주세요. 다음 네 가지만 수정해 주세요. 1) 메인 제목이 첫 번째로 읽히도록 크기와 줄 간격 조정 2) 첫 행동 버튼의 대비와 클릭 영역 강화 3) 카드 3개의 제목·설명·여백 규칙 통일 4) 390px 모바일에서 제목, 버튼, 카드가 한 열로 이어지게 재배치 새 섹션이나 새 기능은 추가하지 말고, 수정 전후 차이가 분명하게 보이게 해 주세요.
Codex 구현
현재 React starter의 파일 구조를 먼저 읽어 주세요. 첨부한 Google Stitch 화면을 참고하되, 생성 코드를 그대로 덮어쓰지 말고 아래 디자인 규칙만 현재 프로젝트에 적용해 주세요. - 화면 구성: 브랜드 이름, 한 줄 소개, 첫 행동 버튼, 카드 3개 - 색상: [배경색], [강조색], 중립색 - 글자: 제목 [크기], 본문 [크기], 명확한 굵기 차이 - 간격: 섹션과 카드 사이에 일관된 여백 - 반응형: 390px 한 열, 1440px 카드 3열 먼저 수정할 파일과 적용할 디자인 규칙을 짧게 설명하고 구현하세요. Three.js, 로그인, API, 장바구니는 아직 추가하지 마세요.
3D 메인
현재 [브랜드 이름] 홈페이지의 기본 레이아웃과 첫 행동 버튼(첫 행동 버튼(CTA))은 그대로 유지한 채, 메인 화면 배경에만 Three.js 3D 요소 하나를 추가해 주세요. 1) three 패키지가 없다면 설치 방법을 먼저 알려 주세요. 2) 카메라, 조명, 기하 도형 하나만 사용하세요. 3) 도형은 천천히 회전하거나 마우스/터치에 아주 약하게 반응하게 하되, 첫 행동 버튼(첫 행동 버튼(CTA))과 본문을 가리지 마세요. 4) 390px 모바일에서는 성능을 위해 정적인 배경 또는 간단한 CSS 대체 화면을 보여 주세요. 5) prefers-reduced-motion에서는 움직임을 멈추세요. 새 페이지·로그인·API·장바구니는 추가하지 말고, 수정할 파일을 짧게 설명한 뒤 구현하세요.
직접 검수
방금 구현한 [오늘 목표]를 확인할 체크리스트를 만들어 주세요. 모바일 390px, 데스크톱 1440px, 버튼 또는 입력 동작에서 각각 한 가지씩 직접 확인할 항목을 적어 주세요. 코드를 새로 만들지 말고 검수 항목만 답하세요.