# 업무 기록 — 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 포스트 발행** + 배포 자산(띠배너·팝업·메타) 게재 For the site tree, see the [root Markdown](https://slashpage.com/my-domain.md).