Sign In

업무 기록 — Slashpage What's new

담당: Frida
범위: Slashpage What's new 발행 및 관련 마케팅 자산 제작 전반

캠페인 1: 구글 웹폰트 (2026-05-20 ~ 2026-05-26)

1. 작업 개요

Slashpage에서 사이트 폰트 변경 시 1,939개 구글 웹폰트를 사용할 수 있게 된 신기능에 대한 What's new 발행과, 이를 홍보할 인스타그램 캐러셀 카드뉴스 제작.

2. 산출물 목록

📝 텍스트 자산

•
whatsnew-post-google-fonts.md — What's new 본문 (한글/영어 버전)
•
whatsnew-guidelines.md — 가이드라인 대폭 업데이트 (제목 규칙, 정확성 원칙, 시각 자료 배치, 배포 정보 가이드 추가)

🎨 시각 자산 (HTML 템플릿, 다운로드 가능)

•
font-pairings-specimen.html — 페어링 명세서 (1080×1080, 5컨셉×2페어링)
•
font-pairings-carousel.html — 인스타 캐러셀 (1080×1350, 12장 = 표지+페어링 10+클로징)

🧠 메모리 업데이트

•
4개의 피드백 메모리 추가 (제목 스타일, 사용법 나열 금지, 시각 자료 배치, 정확성 원칙)

3. 진행 과정 요약

1단계: What's new 본문 작성 (5/20)

•
제목: "이제 구글 폰트로 사이트 분위기를 바꿔보세요!" / "Change your site's vibe with Google Fonts!"
•
본문 구조: 도입부 → 활용 예시 → Tip → CTA
•
영상/이미지 배치 결정:
◦
도입부: 같은 페이지에서 폰트가 계속 바뀌는 영상
◦
Tip 아래: 미리보기 아이콘 강조 캡처
•
가이드라인 파일에 향후 자동 반영되도록 업데이트

2단계: 폰트 변경 데모 영상용 콘텐츠 (5/21)

•
가상 뉴스레터 페이지 "Sundays." 제작 (실제 촬영용 모델)
◦
헤드라인: "The Sunday newsletter on creativity & work"
◦
메뉴: Archive · About · Subscribe (뉴스레터 시그널)
◦
섹션: Recent Issues
•
트렌디한 10가지 폰트 추천 + 분위기 대비 순서 배열
•
시청자가 매 컷마다 무드 변화를 체감하도록 카테고리 대비로 구성

3단계: 폰트 페어링 콘텐츠 큐레이션 (5/21~22)

•
영미권 뉴스레터·블로그 운영자 대상 5개 컨셉 × 2개 페어링 = 10개 페어링 확정:
#
컨셉
페어링 (Heading · Accent · Body)
01
Editorial & Literary
Fraunces · Instrument Serif · Source Serif 4
02
High Editorial
Bodoni Moda · Italiana · EB Garamond
03
Modern Minimalist
Outfit · Manrope · DM Sans
04
Builder (Dev)
Space Grotesk · JetBrains Mono · Geist
05
Diary
Instrument Serif · Homemade Apple · Newsreader
06
Romantic
Cormorant Garamond · Caveat · Lora
07
Magazine
Anton · Archivo Black · Lora
08
Confident
Bricolage Grotesque · Unbounded · Inter
09
Creator
Syne · Major Mono · Plus Jakarta Sans
10
Retro
Shrikhand · Bungee · Karla
•
2024-2026 트렌드 검증 후 Bodoni Moda(럭셔리 에디토리얼), Geist(Vercel 발 테크) 교체

4단계: 폰트 페어링 specimen 이미지 HTML (5/22~24)

•
font-pairings-specimen.html 제작
•
5가지 컨셉별 1:1 정사각형 specimen, 다운로드 가능 (html2canvas 활용)
•
디자인 반복:
1.
초기: 다크 사이드바 + 흰 본문 specimen (Canva 스타일)
2.
키치 + 클린 (파스텔 배경 + 괄호 이탤릭 모티프)
3.
최종: 풀-블리드 사진 + 다크 오버레이 + 흰 타이포 (인스타용)

5단계: 인스타그램 캐러셀 카드뉴스 제작 (5/24~26)

•
font-pairings-carousel.html 제작 — 1080×1350 (4:5 포트레이트) 12장
•
표지: Instrument Serif italic "Font" (460px) + Fraunces bold "Pairings" (260px), 실크 패브릭 배경
•
페어링 슬라이드 10장 공통 구조:
◦
상단: "For newsletters & blogs"
◦
헤딩 샘플 문장 (예: "The slow art of paying attention")
◦
액센트 폰트 텍스트 (예: "— a quiet revolution")
◦
Body 폰트 무드 카피 (2-3줄)
◦
알약 페어링 라벨 + 폰트 크레딧 3개
•
클로징 슬라이드: "Save & share / for later" + "FOLLOW FOR WEEKLY TIPS" CTA
•
모든 슬라이드 PNG 다운로드 버튼 + 일괄 다운로드 기능 포함

6단계: 인스타 캡션 가이드 (5/26)

•
3가지 옵션 작성:
◦
A. 직접·전술적 (짧고 명확)
◦
B. 공감·대화체 (중간 길이, 최우선 추천)
◦
C. 질문 후킹 (참여 유도)
•
해시태그 전략: 작은 계정 도달 최적화 — 중간 볼륨 + 저용량 niche 조합

4. 주요 의사결정

항목
결정
근거
What's new 제목 패턴
"이제 ~해보세요!" + 느낌표
기존 Slashpage 왓츠뉴 톤 분석 결과 (8개 사례)
본문 섹션 구조
"새로워진 점" 같은 기능 나열 X / 사용 사례 위주 O
사용법은 헬프 문서에서 다룸. 왓츠뉴는 "흥미·시도 욕구" 유발이 역할
페어링 큐레이션 앵글
사이트 타입별 × 헤딩+바디+액센트 페어링
영미권 디자인 콘텐츠 인기 패턴
캐러셀 디자인 컨셉
풀-블리드 사진 + 다크 오버레이 + 흰 타이포
작은 계정 도달 위한 시각 임팩트
클로징 슬라이드 카피
"Save & share for later" + Follow CTA
알고리즘에서 가장 강한 두 행동 직접 유도
폰트 페어링 폰트 트렌드
Bodoni Moda, Geist 등 2024-2026 트렌드 반영
DM Serif Display, IBM Plex Sans는 다소 식상

5. 메모리 업데이트 내역

향후 동일 작업 시 자동 반영되도록 저장:
1.
feedback_whatsnew_no_howto_list — 왓츠뉴에 "새로워진 점" 같은 사용방법 나열 섹션 금지
2.
feedback_whatsnew_title_style — 짧은 한 문장 + 느낌표, 친근한 구어체, "이제 할 수 있어요!" / "해보세요!" 패턴
3.
feedback_whatsnew_visual_placement — 변화·결과는 영상, 특정 UI 짚는 건 강조 캡처
4.
feedback_no_unverified_claims_in_copy (기존) — 근거 없는 통계·다른 서비스 깎아내리기·옵트인 오독 금지

6. 다음 단계 (To-Do)

폰트 변경 영상 실제 촬영 — "Sundays." 페이지 활용, 10개 폰트 순환
인스타 캐러셀 PNG 12장 export 후 게시
What's new 포스트 발행 + 배포 정보 작성 (띠배너, 팝업, 메타 — 가이드 §7 기준)
캐러셀 페어링 슬라이드 배경 사진 컨셉별 교체 (현재 picsum 플레이스홀더)
@slashpage 인스타 핸들 실제 계정명으로 확정 (현재 placeholder)
인스타 캡션 옵션 B 기반으로 최종 편집

7. 파일 경로 정리

/Users/fridalee/claude-work/whatsnew/
├── whatsnew-guidelines.md          # 작성 가이드 (업데이트됨)
├── whatsnew-post-google-fonts.md   # What's new 본문 (한/영)
├── font-pairings-specimen.html     # 페어링 명세서 (1080×1080)
├── font-pairings-carousel.html     # 인스타 캐러셀 (1080×1350, 12장)
└── 업무_기록.md                     # 본 문서
메모리:
/Users/fridalee/.claude/projects/-Users-fridalee-claude-work/memory/
├── MEMORY.md
├── feedback_no_unverified_claims_in_copy.md
├── feedback_whatsnew_no_howto_list.md
├── feedback_whatsnew_title_style.md
└── feedback_whatsnew_visual_placement.md

캠페인 2: PC·모바일 동시 편집 (2026-05-26 ~ )

1. 작업 개요

Slashpage 편집 모드 좌측 상단에 추가된 모바일 아이콘 토글을 눌러, PC 편집 화면 옆에 모바일 편집 화면을 함께 띄울 수 있게 된 기능. 한쪽에서 수정하면 다른 쪽에도 즉시 반영되는 양방향 실시간 동기화 동작. 이를 알리는 한·영 왓츠뉴 본문 + 배포 정보 작성.

2. 산출물 목록

•
whatsnew-post-mobile-preview-edit.md — 한·영 왓츠뉴 본문 + 배포 정보 (띠배너 / 팝업 / URL 슬러그 / 메타)

3. 진행 과정 요약

1단계: 기능 정확성 확인

•
첨부 캡처 2장(before/after) 검토. 빨간 화살표가 가리키는 상단 아이콘 영역에 데스크톱·모바일 두 아이콘이 나란히 보임 → "토글로 모바일 view 추가"인지 "PC/모바일 전환"인지 모호.
•
유저 설명 기준으로 확정: 모바일 아이콘 클릭 시 모바일 편집 화면이 옆에 추가되며, 양쪽 모두 편집 가능하고 변경 사항은 양방향 동기화.

2단계: 본문 작성

•
제목: "이제 PC와 모바일을 한 화면에서 같이 편집할 수 있어요!" / "Edit desktop and mobile side by side!"
•
도입부: "PC에서 잘 보이게 했는데 모바일에서 어색하더라"라는 사용자가 실제 겪는 상황을 짚되, 이전 상태를 깎아내리지 않는 방향으로 (feedback_no_negative_framing_of_prior_state 적용).
•
본문 구조: 도입부 → 활용 예시 3가지(블로그·뉴스레터 / 랜딩페이지 / 모바일 전용 다듬기) → Tip → CTA. "주요 기능 / How it works" 같은 나열 섹션 배제 (feedback_whatsnew_no_howto_list).
•
영상·이미지 배치:
◦
도입부 직후: 양쪽 동시 편집되는 영상 (변화가 메시지)
◦
Tip 아래: 모바일 아이콘 강조 캡처 (특정 UI 위치 짚기, 유저 첨부 빨간 화살표 캡처 재활용)

3단계: 배포 정보 작성

•
띠배너: 정보 전달 톤 ("이제 PC와 모바일 화면을 한 번에 띄워두고 편집할 수 있어요!")
•
팝업: 도입부 핵심 후크를 직접 노출 ("PC와 모바일, 이제 한 화면에서 같이 편집해보세요!")
•
URL 슬러그: pc-mobile-split-view-editor / desktop-mobile-split-view-editor (SEO 키워드 + 구체 식별자)
•
메타 정보: "PC·모바일 동시 편집" / "Edit desktop and mobile side by side" 키워드 전면 배치

4. 주요 의사결정

항목
결정
근거
기능 정의 해석
"토글로 모바일 편집 view 추가 + 양방향 동기화"
유저 직접 설명 우선
도입부 후킹 포인트
"화면 오가지 않아도 됨" + "양방향 즉시 반영"
가장 즉각적인 베네핏이자 도입부에 자연스럽게 녹일 수 있는 포인트
활용 예시 선정
히어로/커버 이미지 배치 → 카드·그리드 레이아웃 → 큰 헤드라인 손보기
PC vs 모바일 차이가 가장 시각적으로 크고 즉각적으로 체감되는 영역 순. 초안의 "블로그·뉴스레터 줄바꿈" 사례는 공감도 낮아 제외, "모바일 전용 다듬기"는 양방향 sync 동작과 모순 가능성 있어 제외
영상 vs 캡처
도입부 = 영상, Tip = 강조 캡처
feedback_whatsnew_visual_placement 원칙 적용

5. 본문 수정 이력 (2026-05-27)

•
활용 예시 섹션 재구성 (1차): 초안 "블로그·뉴스레터 줄바꿈 / 랜딩페이지 / 모바일 전용 다듬기" → "히어로 이미지 / 카드 그리드 / 큰 헤드라인" 순으로 교체. 사유: PC↔모바일 차이가 가장 시각적으로 크고 즉각 체감되는 영역 우선. "모바일 전용 다듬기"는 양방향 sync 기능 동작과 모순 가능성 있어 제외.
•
활용 예시 섹션 간소화 (2차): 각 항목의 부연 설명 제거, "~하고 싶을 때" 한 줄 패턴으로 통일.
•
유저 최종 편집 (3차): 섹션 헤딩을 "이런 부분은 모바일 미리보기로 꼭 미리 확인하세요!"로 바꾸고, 항목을 더 짧게 ("커버 이미지가 잘리지 않고 잘 보이는지" 등). 본문 톤이 "확인"에 무게중심 이동.
•
제목 변경: "이제 PC와 모바일을 한 화면에서 같이 편집할 수 있어요!" → "이제 편집할 때 모바일 화면도 같이 확인해 보세요!" (편집 강조 → 확인 강조)

6. 영상 촬영 계획 (2026-05-27 정리)

컨셉

•
길이: 15~25초, 내레이션 없이 UI·사이트 모션만으로 메시지 전달
•
흐름: PC 단독 → 모바일 아이콘 클릭 → 모바일 view 슬라이드인 → 히어로 이미지 위치 조정(PC↔mobile 동기) → 4열 그리드 → 1열 스택 대비 → 모바일에서 헤드라인 크기 조정(mobile↔PC 동기) → 정돈된 최종 상태

샘플 사이트 컨셉

•
타입: 크리에이터 1인 랜딩페이지 (포토그래퍼/비주얼 크리에이터 추천)
•
왜: 세 use case(커버·그리드·헤드라인) 모두 한 페이지에 자연스럽게 담을 수 있고, 구글 폰트 캠페인의 "Sundays." 뉴스레터 페이지와 시각적으로 겹치지 않음
•
페이지 구성:
◦
Hero: 풀-블리드 인물 사진(얼굴 한쪽 치우친 구도) + 오버레이 큰 헤드라인 → 이미지 잘림 + 헤드라인 줄바꿈 동시 시연 가능
◦
Intro: 한 줄 소개 + 짧은 본문
◦
Featured Work / Latest Posts: 4열 카드 그리드 (이미지+제목+날짜) → 4→1 스택 대비
◦
CTA: Subscribe / Read more (옵션)
•
사이트 이름 후보: "Noor Lane"(라이프스타일), "Field Notes"(여행 사진), "Studio Halcyon"(일러스트·아트 디렉터)

필요 에셋

•
인물·풍경 사진 1장 (히어로용, 한쪽에 포커스 쏠린 구도)
•
갤러리용 이미지 4장 (정사각형, 톤 통일)
•
크리에이터 이름 + 한 줄 태그라인
•
헤드라인 카피 (15~20자, 모바일에서 줄바꿈 일어날 길이)

7. 다음 단계 (To-Do)

샘플 사이트 컨셉 확정 — 후보 3개 중 1개 선택 + 톤·컬러 무드보드
에셋 수집 — 히어로 사진, 갤러리 이미지 4장, 헤드라인 카피 확정
Slashpage에 샘플 사이트 실제 빌드
양쪽 동시 편집 영상 촬영 — 15~25초, 위 스토리보드 흐름대로
모바일 아이콘 강조 캡처 — 유저 첨부 빨간 화살표 캡처 그대로 사용 가능
What's new 포스트 발행 + 배포 자산 게재

캠페인 3: 채널 다중 임시저장 (Multiple drafts per channel) (2026-05-27 ~ )

1. 작업 개요

채널당 임시저장 글이 1개 → 여러 개 동시 보관·작업 가능하도록 확장된 기능. 부가로 작성창 우측에 Drafts 버튼이 추가돼 Manage posts 모달(Drafts / Scheduled / Completed 탭)에서 한 화면에 모아볼 수 있게 됨. Saving... 표시도 작성창 우측 상단에 새로 추가(자동 저장 동작 자체는 기존부터 있었음). 이를 알리는 한·영 왓츠뉴 본문 + 배포 정보 작성.

2. 산출물 목록

•
whatsnew-post-multiple-drafts-per-channel.md — 한·영 왓츠뉴 본문 + 배포 정보 (띠배너 / 팝업 / URL 슬러그 / 메타)

3. 진행 과정 요약

1단계: 기능 정확성 확인 (작성 전)

유저 첨부 캡처 3장(New 버튼 드롭다운 / Manage posts 모달 / Saving 표시)에서 "무엇이 새 기능이고, 무엇이 기존 동작이며, 무엇이 표시만 새로 추가된 것"인지 모호함 → 작성 전 3가지 확인:
1.
이전 상태: 채널당 임시저장 1개만 가능했고, 이번에 여러 개 동시 보관·작업으로 확장 (← 가장 핵심 변화)
2.
자동 저장: 동작 자체는 기존부터 있었음. Saving... 시각 표시만 새로 추가됨
3.
Manage posts 모달: 모달 전체가 이번에 신규
→ feedback_whatsnew_no_howto_list·feedback_no_negative_framing_of_prior_state 둘 다 적용 대상. "예전엔 1개만 됐어요" 식 결핍 프레이밍 회피, "이제 여러 개 가능" 확장 프레이밍.

2단계: 1차 초안

•
제목: "이제 한 채널에서 여러 글을 동시에 작업할 수 있어요!" / "Keep multiple drafts going in one channel!"
•
도입부 후킹: "쓰다가 다른 아이디어가 떠올랐을 때 새 글을 열어 메모 → 원래 글로 복귀" 시나리오로 시작, 새 글 버튼 드롭다운에서 Drafts 바로 보이는 점 흥미 포인트로 노출
•
활용 예시 4가지: 다음 호 미리 잡아두기 / 떠오른 아이디어 메모 / 팀원 작업 현황 보기 / 한 곳에서 상태별 둘러보기
•
Tip: Saving... 표시 위치 안내
•
영상·이미지: 도입부=영상, 활용 예시 아래=Manage posts 모달 캡처, Tip 아래=Saving 강조 캡처

3단계: 유저 피드백 반영 (2026-05-27)

유저로부터 3건 수정 요청:
1.
첫 문장 프레이밍 전환 — "쓰다가 갑자기 떠오른 아이디어" 시나리오는 부수적. 핵심은 "애초에 주제별로 드래프트를 여러 개 만들어놓고, 그날 쓰고 싶은 글을 골라 이어 쓰기" 프레임. → 도입부 첫 문장 재작성.
2.
둘째 문단 순서 재정렬 — 사용자가 아직 드래프트가 여러 개도 아닌 상태에서 "여러 개 보는 법"부터 알려주는 건 순서 역전. 먼저 "작성창 열면 바로 임시저장 시작 + 창 닫아도 OK"라는 안정성을 알리고, 그다음 "New 버튼에서 Drafts 목록 확인 가능"으로 연결.
3.
Tip 교체 — Saving... 표시 안내 대신, 작성창 우측 상단 Drafts 버튼으로 임시저장·예약 발행·완료 글까지 한 화면에 모아볼 수 있다는 안내로 변경.
부가 조정:
•
활용 예시에서 "한 곳에서 상태별 둘러보기" 항목 제거 (새 Tip과 메시지 중복). "떠오른 아이디어 메모" 항목은 새 프레임에 맞춰 "여러 주제 동시 진행" 케이스로 교체.
•
Manage posts 모달 캡처를 활용 예시 아래 → Tip 아래로 이동 (새 Tip 메시지를 직접 증명하는 자료로 정합 맞춤).
•
배포 정보(팝업 설명·메타 description)도 새 프레임에 맞춰 손봄.

4단계: 유저 직접 편집 (lint 통과 후)

•
영상 설명에 "drafts 여러개 있는 모습 클로즈업해서 훑어주고"가 추가됨 → 영상의 핵심 메시지를 "여러 개가 존재한다"는 사실 자체를 강조하도록 보강.

4. 주요 의사결정

항목
결정
근거
핵심 메시지 프레이밍
"주제별 드래프트를 미리 만들어두고 그날 쓰고 싶은 글 골라 쓰기"
유저 피드백 반영 — 부수적 시나리오(아이디어 메모)보다 의도적·계획적 사용 패턴을 메인에
정보 전달 순서
(1) 임시저장 안정성 → (2) Drafts 목록 접근법
사용자가 드래프트 1개도 없는 상태에서 "목록 보는 법"부터 알려주면 부자연스러움
Tip 주제 선택
Saving... 표시 → Drafts 버튼 → Manage posts 모달
유저 판단: 모달을 통한 통합 관리가 Saving... 단순 표시보다 안내 가치 더 큼
시각 자료 배치
도입부=영상, Tip 아래=Drafts 버튼 강조 + Manage posts 모달 캡처
feedback_whatsnew_visual_placement — 메시지를 직접 증명하는 자료 매칭
결핍 프레이밍 회피
"1개만 가능했다" 표현 일절 사용 안 함
feedback_no_negative_framing_of_prior_state

5. 다음 단계 (To-Do)

데모 영상 촬영 — New 버튼 클릭 → Drafts 목록 펼침(여러 개 있는 모습 클로즈업) → 한 글 클릭해 수정창 진입 (15~20초)
이미지 자료 준비 — 작성창 우측 상단 Drafts 버튼 강조 캡처 + Manage posts 모달 캡처
What's new 포스트 발행 + 배포 자산(띠배너·팝업·메타) 게재
Made with Slashpage