오늘의 구성 · 60분

실제 장별 시간 합계 60분 · 읽기·대기·직접 눌러 보는 시연 시간을 포함합니다.

설명은 끝났는데,
보여 줄 페이지가 없습니다

오늘 손에 남길 것

먼저 정할 원칙 3가지

Claude Code 준비

• Claude 데스크톱 앱 열기 → 로그인 → Code 화면
• 내 컴퓨터에서 작업하는 항목 → 압축 푼 실습 폴더 선택
• Claude Code 이용이 포함된 유료 요금제가 필요합니다
• 앱 버전에 따라 이름이 조금 다를 수 있습니다

허락 묻는 창이 뜨면

오늘 쓸 재료

ZIP을 먼저 내려받아 압축을 풀면 바로 작업 폴더로 쓸 수 있습니다.

일부러 남겨 둔 실무의 흔적

• 서비스명: 한결당일출고 / 한결 당일 출고 / 한결 당일출고
• 마감시간: 예전 메모 오후 4시 ↔ 승인 기준 오후 3시
• 문의번호 Q001~Q012: 같은 내용이 한 번씩 더 들어 있음
• 유입구분 6건·월주문건수 9건: 빈칸 그대로

STEP 1 · 폴더 자료 함께 읽기

이 폴더 자료 다 읽어 봐.
파일마다 무슨 내용인지, 서로 다른 말과 빈칸부터 적어줘.
승인 날짜가 있는 자료를 우선하고, 모르는 건 (확인 필요)로 남겨줘.
원본은 그대로 두고 결과라는 새 폴더에 진단 메모로 저장해줘.

진단 메모에서 확인할 것

중복·표기·빈칸은 다르게 다룹니다

STEP 2 · 문의 기록 정리하기

진단 메모 기준으로 문의 엑셀을 정리해줘.
번호와 내용이 같은 중복만 빼고, 같은 뜻의 표기는 맞춰줘. 빈칸은 채우지 마.
정리본·중복목록·보류목록을 새 엑셀에 나눠서 결과 폴더에 저장해줘.

정리 결과 · 행 수부터 맞춥니다

STEP 3 · 엑셀로 숫자 다시 계산하기

정리한 엑셀에 검산 칸을 따로 만들어줘.
질문별 건수·비율·합계와 상담예약 건수·비율을 계산해줘.
숫자를 써넣지 말고 눌러 보면 계산식이 보이게 해줘. 분모는 중복 뺀 문의 전체야.

숫자 재계산 · 40%는 어디서 왔나

여기까지 만든 것 · 진단

• 서로 다른 조건과 빈칸을 모은 진단 메모
• 정리본 300건 + 중복목록 12건 + 보류 항목 15개
• 질문 건수·비율과 예약 비율을 계산하는 검산 칸
• 다음 재료: 진단 메모 + 정리·검산 엑셀

페이지의 목표는 하나입니다

질문 비중은 설명 순서를 정하는 근거

STEP 4 · 한 페이지 순서 정하기

진단 메모랑 정리한 엑셀로 한 페이지 순서를 짜줘.
첫 화면, 대상, 서비스, 출고 흐름, 요금·조건, 자주 묻는 질문, 상담 안내 순서로.
각 부분에 뭘 보여줄지, 어느 자료를 쓸지 적고 페이지 설계라는 워드로 저장해줘.

설계 예시 · 위에서 아래로

쓰는 말마다 근거를 붙입니다

STEP 5 · 화면 문장과 그림 자리 확정

페이지 설계에 들어갈 짧은 문장과 그림 자리를 정해줘.
문장마다 근거 자료랑 쪽수를 적어줘. 그림은 가상 그림이라고 표시해줘.
내가 안 준 후기·성과·요금은 넣지 말고, 확인할 건 따로 남겨줘.

그림의 역할은 설명입니다

중간 점검 · 이것만 읽어도 이해되나

• 첫 화면에서 대상과 서비스가 바로 보인다
• 오후 3시 전 주문과 당일 출고의 뜻이 분명하다
• 월 15만 원은 기본료이며 출고요금은 별도다
• 실제 문의처 미정·세부 조건 확인이 설계에 남아 있다

여기까지 만든 것 · 설계

• 정리·검산 결과를 이어 받은 페이지 설계 워드
• 부분별 문장 + 근거 자료·쪽수
• 그림 3장의 자리와 가상 자료 표시
• 다음 재료: 확정한 페이지 설계 + 승인 기준 + 그림

한 페이지 파일은 이렇게 씁니다

STEP 6 · 설계대로 한 페이지 만들기

확정한 페이지 설계랑 승인 기준으로 웹 시안 만들어줘.
한결랜딩페이지.html로 결과 폴더에 저장해줘. 그림까지 파일 하나에 담아줘.
밝고 읽기 쉽게 해줘. 실제 접수는 넣지 말고 내부 검토 시안이라고 표시해줘.

첫 화면에서 바로 볼 4가지

• 한결 당일출고(가칭) · 2026년 12월 1일 시작
• 월 주문 300~3,000건의 쇼핑몰·작은 브랜드
• 오후 3시 전 주문 당일 출고 · 적용 조건은 상담 확인
• 기본료 월 15만 원 + 출고 1건당 요금 별도

화면 결과 예시 · 읽는 흐름

STEP 7 · 그림과 설명 맞추기

그림 3장을 설계한 자리에 맞춰줘.
센터·출고 흐름·재고 설명이 섞이지 않게 하고, 그림마다 짧은 설명을 붙여줘.
가상 그림이라는 표시도 남겨줘. 휴대폰에서도 잘리지 않게 해줘.

그림을 넣었다면 설명도 확인

실습 이미지 3장 · 실제 파일 확인

센터 안내

설명용 가상 그림

출고 흐름

설명용 가상 그림

재고 화면

설명용 가상 그림

STEP 8 · 버튼과 질문 눌러 보기

상담 내용 미리 보기 버튼은 아래 시안 안내로 가게 해줘.
자주 묻는 질문은 눌러서 펼치게 해줘.
입력하거나 보내는 기능은 넣지 마. 실제 접수 전이라는 표시를 계속 보여줘.

폴더에 생긴 파일 확인하기

• 결과 폴더에서 한결랜딩페이지.html 찾기
• 파일을 눌러 열기 → 제목·그림·요금 안내 확인
• 다른 폴더의 복사본도 열어 그림이 보이는지 확인
• 고친 뒤 새로 열어 마지막 수정이 들어갔는지 확인

참고본과 비교할 때

여기까지 만든 것 · 만들기

• 그림이 포함된 한결랜딩페이지.html
• 첫 화면·대상·서비스·흐름·요금·질문·상담 안내
• 눌러 움직이는 버튼과 펼쳐 보는 질문
• 다음 재료: 저장한 웹 시안 + 페이지 설계 + 승인 기준

검사는 세 갈래로 나눕니다

STEP 9 · 작은 화면까지 검사하기

저장한 페이지를 큰 화면이랑 휴대폰 폭으로 확인해줘.
글자·그림 겹침, 가로로 밀림, 버튼·질문이 안 되는 곳을 찾아줘.
확인한 것과 못 한 것을 나눠서 검토 메모로 남겨줘.

휴대폰에서 보기 · 파일과 기기는 다릅니다

마우스 없이도 움직여 봅니다

• Tab으로 버튼과 질문까지 차례로 이동한다
• 지금 어디에 있는지 테두리로 보인다
• Enter 또는 Space로 질문을 펼칠 수 있다
• 글자를 200%로 키워도 내용을 읽을 수 있다

숫자와 약속 · 마지막 대조

STEP 10 · 틀린 결과 바로잡기

검토에서 찾은 틀린 부분만 고쳐줘.
오후 4시는 3시로, 월 15만 원은 기본료와 출고요금 별도로 맞춰줘.
실제 접수 없는 시안 표시도 확인해줘. 고친 곳과 다시 확인한 결과를 메모로 남겨줘.

고친 결과는 한 군데만 보지 않습니다

고친 파일을 새로 열어 봅니다

• 수정한 파일을 저장했는지 확인한다
• 열려 있던 창 대신 파일을 새로 열어 본다
• 검토한 버전의 이름과 날짜를 메모한다
• 원본·검토 중·최종 검토본을 혼동하지 않는다

최종 점검 · 공개 전에 멈출 항목

• 서비스명·시간·시작일·기본료가 승인 기준과 같다
• 가로 밀림·글자 겹침을 확인했고 버튼·질문이 움직인다
• 가상 그림·시안·실제 접수 없음 표시가 보인다
• 실제 문의처·세부 조건·승인 담당 확인은 남겨 둔다

여기까지 만든 것 · 검증

• 큰 화면·좁은 화면·버튼·질문 확인 기록
• 승인 기준과 화면 내용을 대조한 결과
• 고친 파일과 수정 뒤 다시 확인한 메모
• 다음 재료: 검토본 + 검사 기록 + 남은 확인 목록

파일은 쓰임에 맞게 남깁니다

STEP 11 · 검토 보고 남기기

지금 검토본으로 팀장 보고를 짧게 만들어줘.
만든 파일, 확인한 것, 못 한 것, 공개 전에 결정할 일을 나눠줘.
검토 보고라는 워드와 PDF로 결과 폴더에 저장해줘. 끝나지 않은 걸 완료라고 쓰지 마.

무엇을 얼마나 아끼나 · 비용 예시

같은 시안 범위의 가정입니다. 실제 견적·투입시간으로 다시 비교하며 현금 절감액·매출로 단정하지 않습니다.

STEP 12 · 다음에도 할 순서 남기기

다음에도 같은 방식으로 고칠 수 있게 작업 순서 메모 남겨줘.
새 자료와 승인일 확인부터 정리·검산·페이지 수정·검토까지 적어줘.
원본은 남기고 결과는 날짜별 새 폴더에 저장하게 해줘. 공개 전에는 내 확인을 기다려줘.

자료가 바뀌면 이렇게 다시 씁니다

작업 순서 메모대로 새 자료부터 봐줘.
예전 조건과 다른 점을 먼저 알려주고, 확인한 뒤 새 검토본으로 저장해줘.

여러분 차례 · 한 페이지까지

여기까지 만든 것 · 보고·운영

• 내부 검토용 웹 시안과 정리·검산 엑셀
• 페이지 설계와 검토 보고 워드·PDF
• 다음에도 읽고 이어 할 작업 순서 메모
• 남은 일: 실제 문의처·세부 조건 확인과 공개 승인