cre8 공식 웹사이트 구축

cre8 웹사이트 개발 프롬프트 (Phase 1)

나는 홍익대학교 산업디자인전공 공식 AI 소모임 cre8의 공식 웹사이트를 만들고 있다.
표기 규칙 (엄수): cre8은 모든 위치에서 항상 소문자 cre8로 표기한다. (…)
이 프로젝트는 단순한 동아리 소개 사이트가 아니라, cre8 크루원들이 디자인 과정에서 AI를 활용한 방법을 기록하고 외부에 공개하는 AI 디자인 워크플로우 아카이브다.

구성: 프로젝트 목표 / 서비스 포지셔닝(3단계 권한: 열람은 누구나, 작성은 크루만, 검수는 관리자만) / 브랜드 정보 / 기술 스택(Next.js App Router + TypeScript + Tailwind + Supabase, mock 폴백 모드 필수) / 전체 사이트맵(workflows·activities·crew·about·login·dashboard) / 공개 페이지 요구사항 / 데이터 모델 / Phase 1a·1b 분할 / 검증 기준(build·type-check·mock 렌더링)

흠 전체적인 구조는 좋은데 지금 약간 모든게 너무 큼지막한 느낌이고 선으로 나뉘는 방식이 좀 ux적으로 별로인거 같아
일단 메인 배경 색을 화이트로 바꿔주고 양쪽에 이렇게 여백이 있는 게 가독성이 더 좋은 거 같아 선으로 나뉘는게 아니라 웬만하면 면으로 깔끔하게 나뉘는 것도? 
대신 우리는 r값이 너무 크지 않은 사각형 면들 위주로 가고 그림자 같은 건 넣지말자!
모든 캐러셀들도 (워크플로우, 크루원 등) 한줄당 2개씩만 있어서 크기가 너무 큰거 같아

워크플로우 아카이브의 필터 드롭다운 두 개를 아래 내용으로 교체해주세요.
두 필터는 독립적으로 작동하며(AND 조건으로 교차 필터링), 각 항목에는
등록/툴팁용 설명 텍스트가 붙습니다.

[드롭다운 1 — 디자인 분야]
기존 6개 항목(Branding, Content, Graphic, Motion, Product, Research)을 교체:

Branding — 브랜드 아이덴티티, BX, 로고·아이덴티티 시스템
Graphic — 시각·편집 디자인, 포스터, 타이포그래피
UX/UI — 앱·웹 등 디지털 프로덕트
Industrial — 제품, 가구, 모빌리티
Space — 공간, 전시, 환경
Motion — 영상, 모션그래픽

[드롭다운 2 — 활용 목적]
기존 5개 항목(Ideation, Image Generation, Research, Video, Visualization)을 교체:

Ideation & Writing — 아이디어 발산, 컨셉·네이밍, 페르소나, 카피·UX 라이팅, 포트폴리오 텍스트
Research & Analysis — 데스크 리서치, 인터뷰·녹취 정리, 설문과 데이터 분석, 트렌드 조사
Image — 이미지·목업·무드보드 생성, 리터칭·인페인팅·업스케일, 다이어그램·인포그래픽
Video & Motion — 영상 생성, 모션그래픽, 립싱크·애니메이팅
3D & Space — 3D 모델·텍스처 생성, 공간과 제품의 형태 탐색
Code & Prototype — 바이브 코딩, 인터랙션 프로토타입, 웹사이트 구축
Sound & Music — BGM·사운드 이펙트 생성, 보이스오버
Automation — 반복 작업 자동화, 파일 정리, 프로세스 파이프라인 연결
...

현재 상세 페이지를 아래 구조로 개편해주세요. 목표: ① 필수 입력 최소화
(선택 필드는 비어 있으면 렌더링하지 않음) ② 중복 섹션·과도한 번호 제거

새 구조: HERO → CONTEXT → STEPS → REFLECTION → REFERENCES → RELATED
HERO: 메타 5개로 축소(FIELD/PURPOSE/TOOLS/AUTHOR/TIME),
DIFFICULTY 삭제, 절약 시간을 TIME에 병합("90 min · 3h 절약"),
COLLABORATOR·YEAR·대표 이미지는 선택
WORKFLOW MAP 섹션 삭제 (STEP DETAIL과 중복)
STEPS: 스텝명+툴 배지 / 단계 목적(선택) / 프롬프트 블록.
큰 번호 타이포 제거. 프롬프트 블록이 시각적 중심 —
어두운 배경 코드블록 + 복사 버튼 필수, 모노스페이스.
스텝별 "결과 및 배운 점" 삭제 → REFLECTION으로 일원화.
스텝 이미지는 선택(없으면 플레이스홀더 포함 미렌더링)
REFLECTION: 7개 → 3개 카드로 통합
(잘된 점 & 한계 / 삽질 & 다음엔 / 이게 맞는 상황). 전부 선택.
REFERENCES 신규 (REFLECTION과 RELATED 사이):
항목당 링크 URL(필수)/한 줄 메모(선택)/유형 태그(선택: VIDEO,
ARTICLE, TOOL DOC, SNS, ETC). 도메인은 URL에서 자동 추출.
우측 고정 틱 인디케이터: 섹션당 틱 1개(약 18×2px, 동일 길이),
비활성 연한 회색/활성 검정 — 색상 변화만으로 상태 표현.
IntersectionObserver로 스크롤 추적. 호버 시 배경·테두리 없는
텍스트 라벨 페이드 인. 클릭 시 smooth scroll.
aria-label 부여, 키보드 포커스 가능. 모바일(768px 이하) 숨김.
공통: 필수 = 제목, 한 줄 설명, FIELD, PURPOSE, TOOLS, AUTHOR,
스텝 최소 1개(스텝명·툴·프롬프트). 나머지 전부 조건부 렌더링.

너는 지금부터 cre8 사이트(wedocre8.com)의 리드 프로덕트 디자이너 겸 디자인 엔지니어다.
이 사이트는 "AI 디자인 워크플로우 아카이브"이며, 이번 작업의 목표는
페이지마다 제각각인 모든 UX/UI 요소를 하나의 디자인 시스템으로 강제 통일하고,
감사에서 발견된 구조적 결함을 수정하는 것이다.

반드시 단계별로 진행하고, 각 단계가 끝나면 보고 후 내 승인을 받아라.
승인 없이 다음 단계로 넘어가지 마라.

STEP 0. 백업
STEP 1. 전체 감사
STEP 2. 파운데이션 토큰 정의
STEP 3. 컴포넌트 시스템 정의
STEP 4. 정보 위계 표준화
STEP 5. 라벨 체계 통일
STEP 6. 메타데이터 및 구조 결함 수정
STEP 7. 전면 치환 및 중복 제거
STEP 8. 최종 검증 보고

절대 규칙

콘텐츠는 지시된 것 외에 수정하지 마라.
새로운 디자인을 발명하지 마라.
각 단계 완료 후 반드시 멈추고 보고하라.
판단이 애매한 지점은 임의로 결정하지 말고 선택지를 제시하라.

자 아까 새 활동 작성하는 파트에서도 오류 뜨고 저장 안됐거든? 대시보드의 모든 항목에 대해서 발행시의 문제가 있는지 강하게 검토하고 메인 화면 및 메뉴들에까지 아카이빙 잘 되는지 마지막까지 제대로 확인해. 오류 하나도 없는지 잘 보고

그냥 대시보드에서 일반 크루원이 발행 누르면 바로 발행되고 수정 삭제는 발행한 본인 및 운영진만 가능하게 바꾸자 너무 복잡하다
바꾸고 배포하고 실제로 실행되는지까지 검수 완료해줘

배포 전 확인: 20260716_taxonomy_generation.sql이 기존 generation 컬럼을
제거하거나 변경하는가? 그렇다면 (a) 구 컬럼을 유지한 채 신규 컬럼만 추가하고
구 컬럼 제거는 배포 후 별도 마이그레이션으로 분리하거나,
(b) SQL 적용과 배포를 최대한 붙여서 진행하는 절차를 제시하라.
전환 중 구버전 코드가 깨지지 않는 방식이 우선이다.

홈페이지의 가이드대로 워크플로우나 활동을 입력하기 쉽게 해주는 변환기를 만들려고 하는데
일반 텍스트 지피티에 입력할 프롬프트 작성해줘
항상 제목은 명사형으로 끝났으면 좋겠고 글이나 내용이 간결하고 두괄식이었으면 좋겠어

아 근데 그냥 맞춤형 gpt를 만드는 건 어때? 그냥 이 프롬프트 그대로 입력하면 되나?

##기획 및 구조 설계

ChatGPT
웹사이트의 목표와 서비스 포지셔닝, 전체 사이트맵, 콘텐츠 구조, 권한 체계를 정리하는 데 사용했습니다. 워크플로우·활동·프로젝트별 입력 항목과 상세 페이지 구조를 설계하고, 운영 정책과 Custom GPT용 프롬프트를 작성하는 역할도 맡았습니다.

Claude
초기 요구사항의 모순과 누락을 검토하고, 정보 구조와 기능 범위를 교차 검증하는 데 사용했습니다. 디자인 시스템 감사, 데이터 구조, 보안 정책, 배포 위험과 개선 방향을 검토하는 보조 기획·리뷰 도구로 활용했습니다.

##UI·UX 및 시각 설계

Figma
페이지 레이아웃, 정보 위계, 카드와 필터 UI, 상세 페이지 구조를 시각적으로 설계하고 검토하는 데 사용했습니다. 실제 개발 화면의 여백, 크기, 정렬과 반응형 구성을 결정하는 기준으로 활용했습니다.

##코드 구현 및 수정

Codex
실제 코드베이스를 조사하고 Next.js 페이지와 컴포넌트를 구현·수정하는 데 사용했습니다. 로그인, 대시보드, 콘텐츠 작성·발행, 이미지 업로드, 권한 관리, 반응형 UI, 디자인 시스템과 각종 오류 수정까지 실제 개발 작업 전반을 담당했습니다.

Next.js App Router
공개 페이지와 로그인·대시보드·에디터 페이지를 구성하는 웹 애플리케이션 프레임워크로 사용했습니다. 동적 라우트, 서버 렌더링, 서버 액션, 메타데이터와 SEO 설정을 처리했습니다.

React
카드, 필터, 캐러셀, FAQ, 폼, 에디터, 목차와 같은 재사용 가능한 인터페이스 컴포넌트를 만드는 데 사용했습니다.

TypeScript
데이터 구조와 컴포넌트 속성, 서버 액션의 입력값을 명확하게 정의하고 개발 중 오류를 줄이는 데 사용했습니다.

CSS 및 디자인 토큰
타이포그래피, 색상, 간격, 페이지 폭, 테두리 반경과 인터랙션 상태를 사이트 전체에서 통일하는 데 사용했습니다.

Tailwind CSS
초기 기술 스택과 일부 화면 스타일링을 구성하는 데 사용했습니다. 이후에는 공통 CSS와 디자인 토큰을 중심으로 스타일 체계를 정리했습니다.

##데이터베이스 및 콘텐츠 관리

Supabase Database
워크플로우, 활동, 프로젝트 컬렉션, 크루 프로필, 참여자, 사용 도구, 참고자료와 미디어 연결 정보를 저장하는 PostgreSQL 데이터베이스로 사용했습니다.

Supabase Auth
크루원과 운영진의 로그인, 이메일 인증, 비밀번호 설정과 계정 권한 구분을 처리하는 데 사용했습니다.

Supabase Storage
워크플로우 대표 이미지, 단계 이미지, 활동 사진, 프로젝트 이미지와 운영진 프로필 사진을 저장하는 데 사용했습니다.

Supabase SQL Editor
테이블·필드 추가, 기존 데이터 변환, 권한 정책 수정, 운영진 및 크루 계정 데이터 설정과 마이그레이션 적용에 사용했습니다.

Row Level Security(RLS)
공개 사용자는 발행된 콘텐츠만 열람하고, 크루는 본인이 작성한 콘텐츠를 수정하며, 운영진은 전체 콘텐츠와 계정을 관리하도록 데이터 접근 권한을 제한하는 데 사용했습니다.

##이메일 및 계정 운영

Resend
초대 메일과 비밀번호 설정·재설정 메일을 안정적으로 발송하기 위한 이메일 전송 서비스로 사용했습니다.

Gmail
cre8 공식 운영 계정과 크루원 초대·인증 메일을 수신하고 관리하는 데 사용했습니다.

##버전 관리 및 협업

Git
코드 변경 이력을 기록하고, 문제가 생겼을 때 이전 상태로 복구할 수 있도록 버전을 관리하는 데 사용했습니다.

GitHub
웹사이트 소스 코드를 보관하고 Vercel 배포와 연결하는 원격 저장소로 사용했습니다. 코드 백업과 변경 이력 관리의 기준 저장소 역할도 합니다.

##배포 및 도메인

Vercel
Next.js 웹사이트를 빌드하고 실제 인터넷에 배포하는 호스팅 플랫폼으로 사용했습니다. GitHub의 변경 사항을 반영하고, 환경 변수와 커스텀 도메인, 배포 로그를 관리했습니다.

Porkbun
wedocre8.com 도메인을 구매하고 소유권과 갱신을 관리하는 도메인 등록 서비스로 사용했습니다.

Cloudflare 기반 DNS
Porkbun에서 관리되는 도메인의 DNS 레코드를 Vercel, Resend 등과 연결하는 데 사용했습니다.

##품질 검수 및 디버깅

브라우저 개발자 도구
콘솔 오류, 네트워크 요청 실패, 반응형 레이아웃, 이미지 로딩과 로그인·발행 오류를 확인하는 데 사용했습니다.

자동화 테스트
로그인 권한, 콘텐츠 작성·발행·수정·삭제, 공개 데이터 조회와 데이터베이스 정책의 회귀 오류를 확인하는 데 사용했습니다.

Type Check
TypeScript 타입 오류가 남아 있는지 확인하는 데 사용했습니다.

ESLint
코드 문법과 품질 문제, 잘못된 패턴을 검사하는 데 사용했습니다.

Next.js Production Build
실제 Vercel 배포 환경에서 프로젝트가 정상적으로 컴파일되고 실행될 수 있는지 확인하는 데 사용했습니다.

PageSpeed Insights 및 Lighthouse
모바일·데스크톱 성능, 접근성, SEO와 웹 표준 준수 상태를 측정하는 데 사용했습니다.

##콘텐츠 작성 지원

Custom GPT
크루원이 자유 형식으로 작성한 작업 메모를 cre8 홈페이지의 워크플로우·활동 입력 양식에 맞게 변환하는 전용 아카이브 편집 도구로 제작했습니다. 제목을 명사형으로 정리하고, 내용을 간결한 두괄식 문장과 작업 단계·회고·참고자료 구조로 변환하도록 설계했습니다.