이번 주에 만든 화면을 열어 보고, 오픈까지 남은 것을 확인합니다. 그다음 종이 한 장으로 화면을 만들어 인터넷에 올려 봅니다.
오프라인 2026. 09. 04.(금) 14:00 - 17:00 · Artetlab
02
CHAPTER 02
스펙에서 화면까지, 한 바퀴
이번 주 화면 · 남은 것 · 서버 · 스펙 · 개발 순서 · 실습
오늘의 도착점
끝나면 이 여섯 가지를 가져가십니다
01
이번 주에 생긴 홈페이지 화면을 직접 열어 본다
2.1
02
오픈까지 남은 것과, 오늘 정해 주실 것을 안다
2.2
03
화면 문제와 서버 문제를 구분할 수 있다
2.3
04
스펙 문서가 어떻게 생겼고 무엇을 막는지 안다
2.4
05
개발이 어떤 순서로 진행되는지 안다
2.5
06
스펙 한 장으로 화면을 만들어 인터넷에 올린다
2.6
오늘의 한 문장
화면은 우리가 먼저 적어 둔 문장만큼만 만들어집니다
오늘 코드는 한 줄도 읽지 않습니다. 기획자와 디자이너가 다음에 같은 일을 시킬 때 쓸 수 있는 것만 다룹니다.
2.1 이번 주
손님이 보는 홈페이지가 지금 열립니다
홈페이지 https://pixdine-fo.pages.dev
백오피스 https://pixdine-fo.pages.dev/admin/login/
9월 7일 오전 10시 → www.pixdine-m.com 으로 이동
지난주까지 완성돼 있던 것은 직원이 쓰는 화면뿐이었습니다. 지금 휴대폰으로 위 주소를 열어 보십시오.
2.1 이번 주
사흘 동안 여덟 건이 올라갔습니다
날짜
들어간 것
번호
9/1
8월 31일 회신 내용을 문서에 반영
#31
9/1
홈페이지가 데이터를 못 읽던 문제 해결
#32
9/2
홈페이지 기본 틀 신설 (페이지 6장)
#33
9/2
백오피스를 /admin 주소로 이전
#35
9/2
대외비 프로젝트 상세 화면
#37
9/3
About 페이지 · GNB 재구현 · 개인정보처리방침 · 404
#51 #52 #53
노란 줄이 이번 주의 교훈입니다. 데이터는 멀쩡했는데 로그인하지 않은 손님에게 읽기를 허용하는 설정이 빠져 있었습니다. 백오피스는 로그인하고 쓰니까 여덟 달 동안 아무도 몰랐습니다.
클릭해서 크게 보기
2.2 남은 것
화면을 만들어야 필요한 칸이 드러납니다
Work 상세 시안에는 맨 위에 큰 대표 이미지가 깔립니다. 그런데 그 이미지를 저장할 자리가 데이터 어디에도 없었습니다. 백오피스에 올리는 칸도 없었습니다. 백오피스가 안 끝난 것은 밀려서가 아니라 이것 때문입니다.
2.2 남은 것
화면에서 오픈을 막는 것은 두 줄입니다
남은 화면
지금 상태
오픈을 막나
Main 히어로 한 장
아직 시작 전. 문구 두 줄과 버튼 두 개로 스크롤 없는 한 화면
막습니다
검색 노출·파비콘
파비콘 27종은 받았고, 애널리틱스 아이디를 못 받았습니다
막습니다
Contact 네이버 지도
오늘 회신으로 오픈 뒤 작업으로 정해졌습니다
아닙니다
모바일 메뉴 키보드 조작
오픈 뒤
아닙니다
Main 배경 그래픽은 최종안이 없어 오픈 뒤에 넣습니다. 배경 없이도 히어로 한 화면은 섭니다.
2.2 남은 것
데이터 쪽은 다섯 줄이 남았습니다
남은 것
지금 상태
상세 페이지 주소 97건
오늘 11시 19분 회신으로 확정. 이 값을 넣으면 됩니다
공개 썸네일 40건 붙이기
받은 40장을 변환해 올립니다
상단 대표 이미지 칸
칸은 만들었고 게시 필수에서 빼는 수정만 남았습니다
프로젝트 97건 입력
여기에 상세 본문 89건 쓰는 일이 들어갑니다
RFP 프로젝트명 자동 생성
규칙은 9월 1일 확정. 오픈 전 반영하겠다고 회신한 건
화면에는 안 보이지만 이게 안 되면 화면이 빈칸으로 나옵니다.
가장 큰 덩어리
상세 페이지에 들어갈 글이 아직 없습니다
받은 자료에는 프로젝트명·고객사·기간·이미지가 있고, 글이 들어가는 자리는 여섯 곳입니다. 기존 홈페이지 본문 77건을 오늘 아침에 받아 뒀지만 칸 모양이 달라 다시 쓰는 일이 됩니다. 오늘 12시 13분 회신으로 정해졌습니다. 저희가 초안을 쓰고 픽스다인이 검토하십니다.
2.2 오늘 낮에 온 회신
답이 오면 일이 줄기만 하지 않습니다
여쭌 것
회신
우리 일은
상세 본문을 누가 쓸지
아르테랩 초안, 픽스다인 검토
89건 착수
영상 2건
오픈 뒤 직접 등록
영상 올리는 칸을 새로 만듭니다
상단 대표 이미지
기존 이미지를 쓰고 규격 안 맞으면 확대
어느 것을 쓸지 확인받습니다
네이버 지도
오픈 뒤
자리만 숨겨 둡니다
개인정보 보호책임자
경영지원팀 채준영 대리
방침에 넣습니다
대외비 8건 분류
산업군을 두 개씩 주심
되물어야 합니다
정렬 방식
최신순·과거순·기간순 셋
정렬을 하나 더 만듭니다
노란 두 줄을 보십시오. "오픈 뒤 직접 등록하겠다"는 답 한 줄이 백오피스에 없던 기능 하나를 만드는 일로 이어졌습니다. 회신 한 줄이 개발 한 덩어리를 만들거나 없앱니다.
2.2 오늘 이 자리에서
다섯 가지만 정하고 가겠습니다
부탁드릴 것
없으면 오픈 때 어떻게 되나
대외비 8건 산업군을 하나로 고를지, 둘 다 담을지
저희가 임의로 하나 골라 넣습니다
오늘 보내 주신 썸네일 zip 두 개 (13MB씩)
메일로 안 열립니다. 그 썸네일들이 안 붙습니다
상단 대표 이미지를 어느 것으로 쓸지
회색 칸에 픽스다인 마크가 뜹니다
구글 애널리틱스 측정 아이디
방문자 통계가 오픈일부터 안 쌓입니다
어워드 마크 사용 허락 (9/6까지)
마크를 빼고 글자로 오픈합니다
오른쪽 칸을 보십시오. 답이 없어도 오픈은 됩니다. 다만 그때는 오른쪽에 적힌 모습으로 열립니다.
클릭해서 크게 보기
2.3 서버
홈페이지는 서버를 거의 안 거칩니다
손님이 Work 목록을 보고 상세를 열 때, 그 내용은 데이터 창고에서 바로 옵니다. 서버가 잠들어 있어도 홈페이지는 멀쩡히 열립니다. 서버를 거치는 것은 관리자 화면 전부와, 손님이 무언가를 제출할 때뿐입니다.
2.3 서버
서버는 관리자 화면의 엔진입니다
서버가 하는 일
서버가 하지 않는 일
관리자 화면의 모든 동작 (등록·수정·삭제·지원자·계정)
홈페이지 화면을 보여 주는 일
손님이 제출하는 것 받기 (입사 지원, 문의)
손님이 프로젝트를 읽는 일
파일을 올리고 내려받는 열쇠 발급
파일 자체를 나르는 일
RFP 파일을 읽어 초안 만들기 · 알림 메일 · 90일 파기
구분하는 법은 하나입니다. 화면 모양이 잘못됐으면 화면을 고치고, 등록·지원·메일이 이상하면 서버를 봅니다.
2.3 서버
실무에 바로 걸리는 두 가지
01 · 파일
파일은 서버를 지나가지 않습니다
이력서 10MB, 포트폴리오 30MB가 서버를 통과하면 버티지 못합니다. 그래서 서버는 열쇠만 주고 브라우저가 창고에 직접 올립니다.
02 · 첫 접속
안 쓰면 잠듭니다
아무도 안 쓰면 꺼져 있다가 요청이 오면 깨어납니다. 비용이 거의 안 드는 대신 하루 중 첫 접속이 몇 초 느립니다. 고장이 아닙니다.
그래서
메일을 미루지 않습니다
"응답 먼저 주고 메일은 나중에"로 만들면 응답 순간 서버가 잠들어 메일이 사라집니다. 그래서 보내고 나서 응답하되 5초를 넘기면 넘어갑니다.
이력서 주소를 복사해 남에게 보내도 조금 지나면 안 열리는 이유가 첫째 칸입니다. 열람 링크는 잠깐만 열립니다.
클릭해서 크게 보기
2.4 스펙
지금까지 나온 화면은 문서 세 층을 따라 나왔습니다
무엇을 만드나, 어떻게 생겼나, 어느 순서로 만드나. 셋이 각각 다른 문서에 있고 고치는 사람도 다릅니다. 감으로 만든 화면은 한 장도 없습니다.
2.4 스펙
층마다 답하는 질문이 다릅니다
층
문서 이름
답하는 질문
누가 주로 고치나
1층
기능개발리스트
무엇을 만드나
픽스다인과 아르테랩이 같이
2층
디자인 시스템 · 시안 대조 차이 목록
어떻게 생겼나
디자인 시안이 바뀔 때
3층
설계 문서와 작업 계획서
어느 파일을 어떤 순서로
개발이 시작될 때
메일에서 정해진 것은 결국 1층 표의 한 줄로 들어옵니다. 메일에서 정해진 것과 이 표가 다르면 오픈 때 화면이 다르게 나옵니다.
2.4 스펙 · 1층
만들 것 목록은 한 줄씩입니다
| FE-C5 | 대외비 카드 | 해시태그 노출로 프로젝트 성격 인지.
상세 진입 시 Hero·개요·프로젝트 골·UX/UI Strategy 노출.
디자인: 대외비 썸네일 별도(브랜드 컬러 + 로고 위주, 목업 최소화) | 확정 |
앞의 FE-C5가 항목 번호, 가운데가 내용, 맨 끝이 상태입니다. 오늘 이 자리에서 정하는 것들도 결국 이런 한 줄이 됩니다.
2.4 스펙 · 2층
시안과 화면의 차이를 67곳으로 셌습니다
화면
시안에 있는데 화면에 없음
시안과 다름
화면에 있는데 시안에 없음
공통 (GNB·푸터)
4
3
2
홈
3
2
2
Work 목록 · 상세
11
6
2
About · Career · Contact
16
8
0
방침·예외 · 검색 노출
5
2
1
합계
39
21
7
이 목록이 있으면 "About 아직 안 됐어요"가 아니라 "About은 일곱 곳이 남았고 그중 다섯은 원고만 넣으면 됩니다"라고 말할 수 있습니다. 이번 주 푸터·GNB·로고가 이 목록으로 한 번에 정리됐습니다.
2.4 스펙 · 3층
가장 쓸모 있는 칸은 비목표입니다
## 0. 목표 · 비목표
목표 - 빌드·연동이 실제로 동작하는 완결 스캐폴드:
라우팅 7종 + 2계층 토큰(다크 기본) + 폰트 + 반응형 Container + ...
비목표(후속 PR) - Figma 픽셀 단위 재현(디자인 패스),
실제 원고·이미지 적재, GA4·구조화 데이터의 실계정 연결
이 칸이 없으면 이런 일이 생깁니다. 화면을 보여 드렸는데 "이거 왜 시안이랑 다르죠", 만든 쪽은 "이번엔 틀만 세우는 거였는데요". 둘 다 맞는 말인데 서로 다른 것을 기대하고 있었던 것입니다.
2.4 실제로 있었던 일
같은 한 줄을 두 갈래로 읽었습니다
대외비 프로젝트는 상세 진입 시 축약 정보만
개발은 이렇게 읽었다
상세 페이지를 만들지 않는다
기능 목록에 항목이 아예 없음
백오피스에 입력칸도 없음
디자인은 이렇게 읽었다
상세 페이지는 있고 섹션을 줄인다
시안에 대외비 상세 화면이 그려져 있음
개요·골·UX 전략 세 섹션
오픈을 닷새 앞두고 발견했습니다. 한 사람의 실수가 아니라, 문장 하나가 두 갈래로 읽히는데 아무도 되묻지 않은 것이 문제였습니다.
그래서 오늘의 규칙
만들 것보다 안 만들 것을 적는 편이 갈림을 막습니다
"목업 화면과 수상 이력은 안 나옵니다" 한 줄만 있었으면 대외비 상세 화면이 통째로 빠지는 일은 없었습니다.
2.4 한 줄 쓰는 법
한 줄을 적고 다섯 개만 확인하십시오
확인할 것
걸리는 예
고친 예
형용사가 있는가
적절히 배치한다
3개 이하는 가로 한 줄, 4개 이상은 2열
안 나오는 것을 적었는가
축약 정보만
개요·골·UX는 나오고, 목업·수상은 안 나온다
숫자가 있는가
이미지는 크게
가로 2880px, 세로 1366px
누가 판정하는가
자연스럽게
김규현 주임 확인
언제까지, 없으면 어떻게
받는 대로
9/6까지. 없으면 글자로 대체
노란 줄이 제일 셉니다. 안 나오는 것을 적는 순간 문장이 한 갈래로 읽힙니다.
클릭해서 크게 보기
2.5 개발 순서
코드는 네 번째 칸에서야 나옵니다
문서가 있다고 개발이 저절로 그 문서를 따르지는 않습니다. 따르게 만드는 장치가 따로 있습니다. Claude Code에 붙여 쓰는 작업 규칙 묶음이고, 지금 열네 개가 들어 있습니다.
2.5 개발 순서
이번 프로젝트에서 계속 쓴 것은 다섯입니다
규칙
하는 일
캐묻기
만들기 전에 무엇을 만들 것인지 되묻는다. 답이 다 나오기 전에는 코드로 안 넘어간다
계획서 쓰기
설계가 정해지면 체크박스가 붙은 작업 계획서를 먼저 만든다
계획서 실행하기
계획서를 한 칸씩 실행하고, 칸이 끝날 때마다 검사한다
따로 떼서 작업하기
원본을 건드리지 않는 별도 작업방에서 만든다
끝났다고 말하기 전에 확인
증거를 실행해서 보이기 전에는 완료라고 말하지 않는다
마지막 줄이 실무에 그대로 걸립니다. "다 됐습니다"가 아니라 "이 명령을 돌렸더니 이 결과가 나왔습니다"까지가 완료입니다. 진행 상황을 드릴 때 캡처나 주소를 같이 드리는 이유입니다.
2.5 개발 순서
코드 한 줄 전에 나온 710줄짜리 문서
# FO 스캐폴드 구현 계획 (apps/fo)
## Global Constraints
- apps/bo/·server/·supabase/를 절대 수정하지 않는다.
- noindex 계열 절대 금지. 기준 도메인 https://www.pixdine-m.com
- 화면 코드는 Semantic 토큰만. 임의값 금지.
- 커밋은 사용자가 실행한다.
## Task 1: 앱 부트스트랩 (빌드되는 빈 Next 앱)
- [ ] Step 1: package.json
- [ ] Step 2: 설정 파일들
- [ ] Step 3: 최소 app
"절대 하지 마라"가 목록으로 적혀 있습니다. 앞에서 본 비목표 칸과 같은 성격입니다.
이 순서가 주는 것
계획서가 먼저 나오면, 만들어지기 전에 반대할 수 있습니다
만들어진 화면을 보고 "이게 아닌데요"라고 하면 되돌리는 데 며칠이 듭니다. 계획서를 보고 "Task 3이 우리가 말한 게 아닌데요"라고 하면 그 자리에서 한 줄 고치면 끝입니다.
클릭해서 크게 보기
2.6 실습 · 40분
종이 한 장에서 인터넷 주소까지
앞에서 본 것을 네 단계로 줄인 것입니다. 각 10분. 만들 것은 셋 중에 고르십시오. 채용 직무 소개 한 장 · 회사 소개 한 장 · 사내 공지 한 장.
2.6 실습 · 1단계
여기서 이번 화면이 결정됩니다
칸
적을 것
예시
① 목적
이 화면을 본 사람이 무엇을 하게 되나
이 직무가 자기에게 맞는지 3분 안에 판단한다
② 보는 사람
누가 보나 (한 종류만)
경력 3-7년차 UI/UX 디자이너
③ 반드시 있어야 하는 것
화면에 보일 것을 줄로 나눠서
직무 이름 / 주요 업무 5줄 / 자격 요건 4줄 / 지원 버튼
④ 이번에 안 만드는 것
넣지 않을 것
지원서 입력 폼, 사진, 지도
⑤ 판정
누가 보고 됐다고 하나, 언제까지
채용 담당자 확인, 오늘 안
뒤 세 단계는 이 종이를 따라갑니다. 노란 칸을 비워 두지 마십시오. 이 칸이 오늘 결과를 가장 크게 가릅니다.
2.6 실습 · 2단계
적어 둔 것을 그대로 붙여 넣습니다
아래 스펙대로 화면 한 장을 만들어줘.
목적: 지원자가 이 직무가 자기에게 맞는지 3분 안에 판단하게 한다
보는 사람: 경력 3-7년차 UI/UX 디자이너
화면에 반드시 있어야 하는 것:
- 직무 이름과 한 줄 소개
- 주요 업무 5줄 / 자격 요건 4줄
- 지원하기 버튼 (누르면 메일 주소가 뜬다)
이번에 안 만드는 것: 지원서 입력 폼, 사진, 지도
색과 글꼴: 검은 배경에 흰 글자. 픽스다인 홈페이지와 같은 느낌으로
시안이 나오면 고치고 싶은 것을 말로 던지십시오. "글자가 붙어 보여서 답답해"면 됩니다. 나온 시안이 종이와 다르면, 시안이 아니라 종이를 먼저 보십시오. 대개 종이에 안 적힌 것이 다르게 나옵니다.
2.6 실습 · 3-4단계
진짜 화면으로 만들고, 인터넷에 올립니다
3단계 · Claude Code에 넘길 때는 이 한 줄이면 됩니다
방금 만든 시안대로 화면 한 장을 실제 파일로 만들어줘.
파일 하나짜리 HTML로, 폴더 하나에 넣어서. 스마트폰에서도 안 깨지게.
01
브라우저에서 app.netlify.com/drop 을 연다
02
만들어진 폴더를 그 화면 위로 끌어다 놓는다
03
몇 초 뒤 주소가 나온다. 옆 사람 휴대폰으로 열어 본다
주의. 이 주소는 아는 사람이면 누구나 열 수 있습니다. 실제 지원자 정보, 대외비 프로젝트 이름, 계약 금액은 넣지 마십시오. 오늘은 지어낸 내용으로 하십시오.
2.6 시연
같은 화면을 두 번 만들어 봅니다
첫 번째 · 애매한 한 줄
"직무 소개 화면 하나 만들어줘. 필요한 내용 적당히 넣어서"
각자 머릿속에 그렸던 것과 다르게 나옵니다
다들 다른 것을 상상하고 계셨습니다
두 번째 · 스펙 다섯 칸
목적 · 보는 사람 · 있어야 할 것 · 안 만드는 것 · 판정
나온 화면이 적어 둔 것과 같습니다
고칠 것이 있으면 종이를 고칩니다
도구는 두 번 다 같은 것을 썼습니다.
오늘 하루의 결론
바뀐 것은 도구가 아니라 문장뿐입니다
2장 마무리
이만큼 채워졌으면 성공입니다
01
홈페이지 여섯 장을 직접 열어 봤다
02
대외비 8건 산업군을 하나로 할지 둘 다 담을지 정했다
03
썸네일 zip 두 개를 받을 방법을 잡았다
04
화면 문제와 서버 문제를 구분할 수 있다
05
한 줄을 적을 때 검사표 다섯 개를 확인했다
06
스펙 한 장으로 만든 화면을 옆 사람 휴대폰으로 열어 봤다
2장 마무리
외울 문장은 셋입니다
01
화면은 우리가 먼저 적어 둔 문장만큼만 만들어집니다
02
만들 것보다 안 만들 것을 적는 편이 갈림을 막습니다
03
계획서가 먼저 나오면, 만들어지기 전에 반대할 수 있습니다
오픈 뒤에 고쳐 달라고 하실 때는 네 줄이면 됩니다. 어느 화면 / 지금 어떻게 나오나 / 어떻게 나와야 하나 / 언제까지, 그때까지 답이 없으면 어떻게. 마지막 줄이 오늘 배운 것입니다.
9.7
다음 자리 · OPEN
9월 7일 월요일 오전 10시
새 홈페이지가 www.pixdine-m.com 으로 열립니다. 화면이 바뀐 것을 확인하신 뒤 최고 관리자 계정을 채준영 대리님 주소로 바꿉니다.
