cre8 공식 웹사이트 구축
GPT의 구현과 Claude의 기획·검증을 결합한 cre8의 아카이브와 크루 운영 시스템을 구축
- 작업일
- 2026.07.11–2026.07.26
- 디자인 분야
- UX/UI
- 활용 목적
- 코드·프로토타입
- 사용 도구
- Figma, ChatGPT · 5.6 sol, Claude · fable 5
- 작성자
- 이수연
작업 배경
cre8에는 크루원들이 만든 꽤 획기적인 워크플로우가 많이 쌓여 있었다. 그런데 기존에는 Figma에서 가이드에 맞춰 워크플로우를 하나하나 직접 작성해야 해서 너무 비효율적이었고, 나중에 다시 찾아보기도 어려웠다. 이렇게 좋은 작업들이 계속 조직 내부에만 머무는 것도 cre8이 추구하는 공유의 가치와는 맞지 않았다. 크루원들의 과정과 결과를 외부에 제대로 보여줄 수 있는 공식 아카이브가 필요했고, 무엇보다 공식 홈페이지가 있어야 가오도 산다고 생각했다. 마침 GPT 5.6 sol이 출시되자마자 개발을 시작했다. Anthropic과 OpenAI의 기싸움 사이에서 크레딧이 초기화될 때마다(땡스투 티보!) 다시 투입하면서 작업을 이어갔다. GPT와 Codex는 실제 코드 구현을 중심으로 사용했고, Claude는 기획 검토, 레퍼런스 분석, 카피 작성과 바이브 코딩용 프롬프트 설계를 맡았다.
작업 단계
개발 범위 및 실행 구조 설정
Claude, ChatGPT초기 개발 요청의 범위와 모순을 검토하고 단계별로 실행할 수 있는 웹사이트 개발 구조를 확정했다.
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 렌더링)
시각 방향 및 정보 구조 설계
Figma, ChatGPT, Claude사이트의 시각 방향과 워크플로우·활동·프로젝트·크루의 정보 구조를 확정했다.
흠 전체적인 구조는 좋은데 지금 약간 모든게 너무 큼지막한 느낌이고 선으로 나뉘는 방식이 좀 ux적으로 별로인거 같아
일단 메인 배경 색을 화이트로 바꿔주고 양쪽에 이렇게 여백이 있는 게 가독성이 더 좋은 거 같아 선으로 나뉘는게 아니라 웬만하면 면으로 깔끔하게 나뉘는 것도?
대신 우리는 r값이 너무 크지 않은 사각형 면들 위주로 가고 그림자 같은 건 넣지말자!
모든 캐러셀들도 (워크플로우, 크루원 등) 한줄당 2개씩만 있어서 크기가 너무 큰거 같아아카이브 콘텐츠 체계 구축
ChatGPT, Claude콘텐츠 유형별 상세 템플릿과 디자인 분야·활용 목적의 분류 체계를 설계했다.
워크플로우 아카이브의 필터 드롭다운 두 개를 아래 내용으로 교체해주세요.
두 필터는 독립적으로 작동하며(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 — 반복 작업 자동화, 파일 정리, 프로세스 파이프라인 연결
...워크플로우 상세 구조 개편
Claude, ChatGPT입력 부담을 줄이고 실제 작업 단계와 프롬프트가 중심이 되는 상세 페이지를 설계했다.
현재 상세 페이지를 아래 구조로 개편해주세요. 목표: ① 필수 입력 최소화
(선택 필드는 비어 있으면 렌더링하지 않음) ② 중복 섹션·과도한 번호 제거
새 구조: 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개(스텝명·툴·프롬프트). 나머지 전부 조건부 렌더링.
디자인 시스템 감사 및 통합
Claude, ChatGPT, Codex배포 화면과 코드를 교차 검토하고 사이트 전체를 하나의 디자인 시스템으로 통합했다.
너는 지금부터 cre8 사이트(wedocre8.com)의 리드 프로덕트 디자이너 겸 디자인 엔지니어다.
이 사이트는 "AI 디자인 워크플로우 아카이브"이며, 이번 작업의 목표는
페이지마다 제각각인 모든 UX/UI 요소를 하나의 디자인 시스템으로 강제 통일하고,
감사에서 발견된 구조적 결함을 수정하는 것이다.
반드시 단계별로 진행하고, 각 단계가 끝나면 보고 후 내 승인을 받아라.
승인 없이 다음 단계로 넘어가지 마라.
STEP 0. 백업
STEP 1. 전체 감사
STEP 2. 파운데이션 토큰 정의
STEP 3. 컴포넌트 시스템 정의
STEP 4. 정보 위계 표준화
STEP 5. 라벨 체계 통일
STEP 6. 메타데이터 및 구조 결함 수정
STEP 7. 전면 치환 및 중복 제거
STEP 8. 최종 검증 보고
절대 규칙
콘텐츠는 지시된 것 외에 수정하지 마라.
새로운 디자인을 발명하지 마라.
각 단계 완료 후 반드시 멈추고 보고하라.
판단이 애매한 지점은 임의로 결정하지 말고 선택지를 제시하라.
운영 흐름 안정화
Codex로그인, 이미지 업로드, 콘텐츠 작성·발행과 관리 화면에서 발생한 오류를 수정했다.
자 아까 새 활동 작성하는 파트에서도 오류 뜨고 저장 안됐거든? 대시보드의 모든 항목에 대해서 발행시의 문제가 있는지 강하게 검토하고 메인 화면 및 메뉴들에까지 아카이빙 잘 되는지 마지막까지 제대로 확인해. 오류 하나도 없는지 잘 보고
그냥 대시보드에서 일반 크루원이 발행 누르면 바로 발행되고 수정 삭제는 발행한 본인 및 운영진만 가능하게 바꾸자 너무 복잡하다
바꾸고 배포하고 실제로 실행되는지까지 검수 완료해줘
배포 검증 및 최종 보완
Claude, Codex데이터 마이그레이션과 배포 위험을 검토하고 메타데이터·반응형·관리 화면의 마감 문제를 수정했다.
배포 전 확인: 20260716_taxonomy_generation.sql이 기존 generation 컬럼을
제거하거나 변경하는가? 그렇다면 (a) 구 컬럼을 유지한 채 신규 컬럼만 추가하고
구 컬럼 제거는 배포 후 별도 마이그레이션으로 분리하거나,
(b) SQL 적용과 배포를 최대한 붙여서 진행하는 절차를 제시하라.
전환 중 구버전 코드가 깨지지 않는 방식이 우선이다.회고
성과와 한계
초기 웹사이트 디자인 기획을 실제 운영 가능한 AI 디자인 워크플로우 아카이브 사이트로 확장했다. 공개 아카이브, 크루 인증, 콘텐츠 작성·발행, 권한 관리, 이미지 저장, 휴지통, 데이터베이스와 배포 환경까지 하나의 서비스로 연결했다. 디자인 토큰과 공통 컴포넌트를 도입해 공개 페이지부터 대시보드와 에디터까지 시각 체계를 통합한 것도 주요 성과다. 무엇보다 개발을 1나도 모르는 비컴공 미대생인 제가 실제로 작동하는 웹사이트를 완성할 수 있었다는 점이 가장 기쁘고 놀라웠다. AI와 함께라면 기획과 디자인을 넘어 서비스 구현과 운영까지 직접 해볼 수 있다는.. 다만 별도의 staging 환경과 안정적인 테스트 계정이 부족해 일부 인증·발행·업로드 문제를 실제 배포 환경에서 확인해야 했다. 외부 서비스 설정이 필요한 기능은 자동 검증에 한계가 있었고, 운영 중 발생하는 문제를 그때그때 수정해야 했다.
시행착오와 개선점
인증 방식을 매직 링크, OTP, 이메일·비밀번호 방식으로 여러 차례 변경하면서 초대 링크 만료와 비밀번호 설정 오류가 몇 번이나 반복됐다. 발행 과정도 검수 상태와 권한 구조가 복잡해지면서 저장 실패가 발생해, 최종적으로 크루 직접 발행과 작성자·운영진 중심의 수정 권한으로 단순화하게 되었다. 이미지 업로드 응답 오류, 본문 줄바꿈 누락, 카테고리 데이터 불일치와 반복적인 여백 수정도 발생했다. 이후 Superpowers를 활용해 설계 문서, 구현 계획, 문제별 수정, 테스트와 검증을 분리하면서 작업이 어느정도 정리됐다. 앞으로는 인증·권한·데이터 구조를 구현 전에 확정하고, Preview 배포와 별도 테스트 DB에서 권한별 E2E 검증을 마친 뒤 운영 환경에 반영하는 방식이 적합할 것 같다는 생각..
적합한 활용 맥락
디자이너가 서비스 방향과 화면 피드백을 제시하고 AI가 설계 정리, 코드 구현, 오류 추적과 배포 검증을 담당하는 협업에 적합하다. 반면 별도의 테스트 환경 없이 인증, 개인정보, 결제처럼 실패 위험이 큰 기능을 바로 운영 환경에 적용하는 작업에는 추가적인 검증과 전문적인 보안 검토가 필요할 것 같다.