45일차[framer, 아티클카타]

오늘의 학습 기록: 아티클 카타 + Framer 챕터 5

오전엔 비판적 사고와 PM의 AI 활용에 대한 아티클을 함께 읽고 카타했고, 오후엔 Framer로 사이트를 실제 세상에 내보내는 마지막 단계 — 도메인, 요금제, SEO, 다크 모드까지 — 를 다뤘다. 따로 보면 무관해 보이지만, 두 주제가 묘하게 한 줄에서 만난다: "좋은 결과물은 좋은 질문과 좋은 디테일에서 나온다."

---

Part 1. 아티클 카타

📖 첫 번째 아티클: 비판적 사고와 조직 커뮤니케이션

핵심 논의

비판적으로 사고하고 의견을 내는 것이 회사에서 평판을 깎는 일이 되는 이유는 무엇일까? 결론은 의견 자체가 아니라 태도와 화법의 문제였다.

튜터님 피드백 정리

Q1. 비판적 사고로 반박했을 때 평판이 나빠지는 이유

• "A는 틀렸고 B가 맞다"는 직접 반박이 아니라, 상대 의견에 살을 붙이는 방식으로 전달해야 함
• 예시 화법: "A 방향을 이해하지만 검토해보니 이러한 리스크가 예상되는데, 어떻게 보완하면 좋을까요?"
• 회사는 싸우러 모인 곳이 아니라 일을 잘하기 위해 모인 곳

Q2. 수직적 조직에서 상사 의견이 곧 지시가 될 때

• 의사결정 전에는 충분한 근거 자료(보고서 등)로 설득 시도
• 이미 결정된 사안에 다시 말 붙이는 건 딴지처럼 느껴질 수 있음
• 결정 후엔 일단 실행하고 결과로 검증되는 과정이 필요

Q3. 내가 방어적으로 듣고 있는지 점검하는 법

• 상대가 왜 그런 의도로 말했는지 역으로 질문해보기
• 상대방의 관점·의도·배경을 다시 살펴보기
• "근데, 그게 아니라" 같은 반박성 언어 습관이 나오는지 객관적으로 체크
• 정답을 찾으려 하는지, 허점만 건드리려 하는지 자문하기

Q4. 신뢰 기반 수용 vs 무조건적 수용

구분 특징 결과

무조건적 수용	시킨 대로만 수행	실패 시 "시킨 대로 했는데"로 회피
신뢰 기반 수용	지시의 의도까지 파악, 액션 플랜 함께 고민	실패 시 공동 책임, 상대 논리를 내 논리로 재구성

---

📖 두 번째 아티클: AI를 잘 쓰는 기획자는 왜 질문부터 다를까?

우리 팀 공통 인사이트

• 질문의 방향이 기획의 방향을 결정한다. 더 좋은 답을 요구하기 전에, 내가 어떤 전제를 깔고 질문하는지부터 점검할 것.
• 정리형 질문은 변화형 질문을 밀어낸다. "무엇이 다른가" 보다 "무엇이 왜 뒤집히고 있는가" 를 먼저 볼 것.
• AI는 답변 엔진이 아니라 전제 점검 도구로 활용해야 함. "정리해줘" → "내가 놓친 전제를 먼저 짚어줘"
• 출처 확인은 링크가 아니라 제목과 날짜로. AI가 준 링크를 그대로 믿지 말고 직접 검증.
• 탐색 단계와 정리 단계를 분리해서 AI를 사용한다. 탐색은 넓게, 정리는 좁고 명확한 조건으로.
• 기획자의 경쟁력은 질문의 양이 아니라 질문의 각도에서 나온다. 어떤 질문을 하지 않고 있는지를 발견하는 사람이 좋은 기획자.

튜터님 피드백 정리

Q1. PM이 AI를 쓸 때 가장 중요한 원칙

"AI의 답변은 정답이 아니다."

비서·에이전트로 활용하되 맹신하지 말 것. AI가 제시한 내용이 우리 조직·프로젝트·프로덕트에 실제로 적용되는지 검토하는 과정이 반드시 필요함.

Q2. AI를 가장 유용하게 활용한 순간

파편화된 데이터에서 패턴 도출할 때 (앱스토어 리뷰, VOC 분석 등). 사람이 직접 분석하면 보고 싶은 것만 보는 편향이 생기지만, AI는 데이터 기반으로 빈도·비중 높은 페인포인트를 객관적으로 추출해줌.

Q3. AI 사용 시 주의할 점

AI는 질문자의 성향을 반영해 그 사람이 원하는 방향으로 답변을 유도하는 경향이 있음. 너무 매끄럽게 답할 때일수록 비판적으로 의심하고, RAG·출처 확인으로 검증할 것.

Q4. 신입 PM 시절 AI가 있었다면

개발자·디자이너와의 소통에 활용했을 것:

• "이 기능에 대해 백엔드/프론트엔드/디자이너가 가장 반박할 만한 포인트는?"
• "그 반박에 대응하려면 어떤 자료를 준비해야 하나?"

→ 협업 설득 자료를 준비하는 데 AI가 큰 힘이 됨.

추가 Q&A

Q. AI 더블체크 시간이 너무 길다, 어떻게 효율화할까?

• 초안을 AI에게 맡기지 말고, 본인이 초안을 작성한 뒤 보완점을 묻는 방식 권장
• 답변 시 출처·공식 자료를 함께 기재하도록 프롬프트에 명시
• "방금 답변에서 오류 가능성이 가장 높거나 사실관계가 모호한 부분을 짚어 다시 검증해달라" 추가 요청
• 결과적으로 시간이 단축되므로 더블체크 자체를 두려워할 필요는 없음

Q. 여러 AI를 써도 같은 프레임에 갇히는 게 아닐까?

여러 AI 활용은 사고 확장에 도움이 되는 게 맞음. 다만 더 중요한 건 AI 도구를 사용하는 사람의 중심(원칙·관점). 비슷한 답이 반복된다면 AI가 사용자의 성향을 학습해 맞춤 답변을 주고 있을 가능성이 큼.

"네 답변에 오류가 없는지 검증해봐" 라고 재요청하면 다른 결과가 나올 수 있음. 내 생각과 AI 답변의 갭을 분석하는 과정 자체가 중심을 세우는 훈련.

---

💬 기타 Q&A

Framer 과제가 실무에 도움이 될까?

조직마다 다르지만 작은 조직·소규모 프로젝트에서는 PM이 직접 랜딩 페이지를 구현하기도 함. 이 과제의 핵심은 반응형 UI 레이아웃 구조와 CMS 개념을 직접 경험으로 체화하는 것. 당장 안 쓰더라도 이력 소스가 됨.

현업에서 AI는 어디까지 활용되나?

사람·조직마다 천차만별. 보안상 외부 LLM 사용이 막혀 자체 LLM·RAG를 구축한 조직도 있음. 튜터의 스타트업 경험상 거의 모든 업무 검토·리뷰에 AI를 활용했고, 개발자도 Cursor·Claude Code로 뼈대를 잡는 식으로 사용. 최근 롯데 그룹은 전 임직원 1인 1 AI 에이전트 비전을 선포 — AI 활용이 곧 성과 지표가 되는 시대로 진입 중.

---

🧩 오늘의 카타가 남긴 한 줄

"AI에게 더 좋은 답을 요구하기 전에, 나는 어떤 전제를 깔고 질문하고 있는가?"

좋은 질문을 던지는 능력은 결국 비판적으로 듣는 능력과 짝을 이룬다. 첫 번째 아티클(비판적 사고)과 두 번째 아티클(AI 질문 설계)이 결국 같은 근육을 다루고 있었다.

---

Part 2. Framer 챕터 5 — 사이트를 세상에 내보내기

챕터 5는 그 사이트를 실제 세상에 내보내고 운영하는 법에 대한 이야기다. 도메인 연결, 요금제, SEO, 접근성, 다크 모드까지 — 디자인 작업이 끝난 뒤에 신경 써야 할 것들이 한꺼번에 들어 있다.

다섯 개 챕터를 관통하는 키워드를 먼저 적어두자면:

• 완성도: 파비콘, OG 이미지처럼 작아 보이지만 신뢰도를 좌우하는 디테일
• 유연성: 무료 도메인부터 커스텀 도메인까지, 상황에 맞춰 확장 가능한 구조
• 지속 가능성: SEO와 접근성을 처음부터 고려해야 나중에 손이 덜 간다

---

챕터 5-1. Site & Page Settings — 놓치기 쉬운 설정들

UTM 파라미터 유지 (Preserve URL Parameters)

마케팅 캠페인을 운영할 때 가장 중요한 건 "이 방문자가 어디서 왔는지" 추적하는 것. UTM은 URL 뒤에 붙이는 추적 코드다.

https://example.com?utm_source=instagram&utm_campaign=spring

Framer에서 Preserve URL Parameters 옵션을 켜두면, 사용자가 첫 진입 후 다른 페이지로 이동해도 UTM이 유지된다. 꺼져 있으면 페이지 이동 순간 파라미터가 날아가서 GA4 분석이 부정확해짐.

→ 마케팅 사이트라면 무조건 켜둬야 하는 옵션.

사이트 이미지 3종 세트

항목 용도 권장 사이즈

Favicon	브라우저 탭/북마크 아이콘	64×64
Social Preview (OG Image)	SNS·메신저 공유 시 썸네일	1200×630
Apple Touch Icon	iOS 홈 화면 저장 시 아이콘	180×180

세 개 다 별도 이미지 파일을 미리 준비해야 한다는 게 포인트. 특히 OG 이미지는 카카오톡·슬랙 공유했을 때 보이는 그 카드 — 있고 없고가 신뢰도 차이가 크다.

그 외 알아둘 옵션

• Edit 버튼 숨기기: 에디터에게 거슬리는 그 버튼은 일반 방문자에게는 원래 안 보이지만, 작업자 입장에서 끄고 싶다면 설정 가능
• 비밀번호 보호: 프리미엄 플랜 한정. 출시 전 클라이언트 검토용으로 유용
• 자동 로컬 전환 (Localization): 브라우저 언어 설정에 따라 en-US / ko-KR 등 적절한 페이지로 자동 이동. 글로벌 사이트 운영 시 고려
• 커스텀 코드 삽입: Head/Body의 시작·끝에 스크립트 추가 가능. GA4, Hotjar, 챗봇 등을 붙일 때 사용. 다만 기능 충돌 가능성 있어 신중하게.

---

챕터 5-2. 배포 & 도메인 연결

사이트 배포의 흐름

Site Settings → Domain 탭에서 모든 게 관리된다. 배포 시 자동으로 랜덤이름.framer.app 서브도메인이 생성되고, 사이트 제목 옆 URL을 클릭하면 실시간 배포 버전을 확인할 수 있다.

도메인 연결, 두 가지 선택지

1. 무료 Framer 도메인 (myname.framer.website 등)

• 무료 플랜에서도 사용 가능
• 포트폴리오·간단한 프로젝트엔 충분

2. 커스텀 도메인 (mybrand.com 등)

• 유료 플랜(Basic 이상) 필요
• 본격 비즈니스용

커스텀 도메인 연결 3단계

1단계. Framer에서 도메인 추가

• Site Settings → Domains → Add Domain
• 도메인 입력 후 DNS 설정 정보 받기

2단계. 도메인 등록처(가비아·고대디·카페24 등)에서 DNS 설정

A 레코드 (루트 도메인용):

Type Name Value

A	@	76.76.21.21
A	@	76.76.22.22

CNAME 레코드 (www 서브도메인용):

Type Name Value

CNAME

www

sites.framer.app

기존에 같은 레코드가 있다면 삭제 후 새로 등록. DNS 반영은 보통 수 분~수 시간, 길면 48시간까지 걸린다.

3단계. Framer에서 ✅ Connected 상태 확인

이 흐름은 Framer뿐 아니라 다른 노코드 툴(웹플로우, 슈퍼블 등)에서도 거의 동일하다. 한번 익혀두면 평생 써먹음.

---

챕터 5-3. Framer 요금제 — 어디까지 무료로 가능할까

무료 플랜의 범위

• 최대 1,000페이지
• CMS 컬렉션 10개
• 월 1,000명 방문자
• 월 100MB 대역폭
• 무료 SSL 인증서
• Framer 서브도메인 + "Made in Framer" 배지

→ 포트폴리오, Coming Soon 페이지, 가벼운 브랜드 랜딩 정도는 무료로 충분.

유료 플랜이 필요한 시점

• 커스텀 도메인 연결이 필요할 때
• 트래픽이 늘어나기 시작할 때
• CMS 컬렉션이 10개를 넘을 때
• 스테이징(검토 후 배포) 환경이 필요할 때
• 폼 제출 수, 버전 기록 관리가 중요해질 때

플랜별 핵심 비교 (월간 기준)

항목 Mini Basic Pro

페이지 수	Home + 404만	1,000	10,000
CMS 컬렉션	✖	2개	10개
대역폭	10GB	50GB	100GB
폼 제출 수	50	500	2,500
저장 공간	500MB	1GB	10GB
패스워드 보호	✖	✔	✔
리디렉션	✖	✖	최대 100개
스테이징	✖	✖	✔
버전 히스토리	3일	7일	30일

협업 요금의 함정

• 사이트 소유자 1명은 항상 무료
• 에디터 추가 시 인당 과금 (₩19,998/인 — Pro 기준)
• 워크스페이스 내 가장 높은 플랜 기준으로 책정됨 → A 사이트가 Pro, B 사이트가 Free여도 워크스페이스 전체가 Pro 기준으로 과금

이 부분은 팀 단위로 쓸 때 비용 산정하다가 놓치기 쉬운 포인트.

정리

• 소규모 프로젝트 = 무료로 충분
• 커머스, 마케팅, 팀 기반 사이트 = Pro 이상 권장
• 확장을 미리 예상하고 시점을 계획하기

---

챕터 5-4. SEO & 접근성 — 검색에 잘 잡히고, 누구나 쓸 수 있게

이 챕터가 개인적으로 가장 인사이트 컸다. SEO와 접근성은 따로 노는 개념이 아니라, 사실상 같은 작업을 하면 양쪽이 동시에 좋아진다는 점.

시맨틱 태그 — 구조에 의미 부여

• 텍스트: H1~H6, paragraph로 계층 구조
• 프레임: header, footer, nav, main, section 같은 시맨틱 태그 직접 지정 가능
• Text Style의 기본 태그 외에 개별 텍스트 레이어에도 별도 지정 가능

→ 검색 엔진은 이 구조를 보고 페이지의 위계를 이해한다. 스크린 리더도 마찬가지.

이미지·아이콘에 의미 부여

• Alt Text: 이미지 프레임 → Fill 속성 아래에서 입력. 시각장애인용 스크린 리더가 음성으로 읽어줌
• ARIA Label: 비시각적 그래픽이나 아이콘에 사용. 예: SNS 아이콘에 "Visit us on Instagram"

Tab Index — 키보드 사용자 배려

• 기본은 레이어 순서대로 Tab 이동
• 중요한 CTA 버튼은 Tab Index = 1로 설정해서 우선순위 부여 가능

Googlebot 설정

• SEO상 노출 원치 않는 프레임(광고 영역 등)은 Googlebot → Skip 설정으로 색인 제외 가능

Site & Page Settings

• Site Language: 검색 엔진과 스크린 리더에 언어 정보 제공
• Reduce Motion: 사용자가 모션 줄이기 선호 시 애니메이션 자동 제거
• Page Title: 60자 이내 권장
• Page Description: 160자 이내 권장
• 자연스러운 키워드 포함 — 키워드 스터핑 ✗

URL 구조

• 페이지명이 곧 URL 경로 (예: /about-us)
• 소문자 + 하이픈으로 단어 구분 (공백은 자동 하이픈 처리)
• 짧고 명확한 URL이 검색·UX 모두에 유리

검색 노출 제어

개별 페이지 설정에서 "Search Engines에서 숨기기" 옵션으로 특정 페이지를 색인에서 제외 가능. 어드민·내부용 페이지에 유용.

---

챕터 5-5. 라이트/다크 테마 적용

핵심 개념: 컬러 스타일이 테마를 책임진다

Framer의 컬러 스타일은 하나의 스타일로 라이트/다크 모드 양쪽을 모두 정의할 수 있게 설계되어 있다.

• 방문자 디바이스가 라이트 모드 → 라이트 테마 자동 로딩
• 다크 모드 → 다크 테마 자동 로딩
• 한 번 잘 세팅해두면 어디서든 자동 전환

설정 방법

기본적으로 컬러 스타일은 라이트 모드만 정의되어 있다. 다크 모드는 수동으로 지정해줘야 한다.

• 컬러 스타일 편집 시 라이트/다크 각각 색상 지정
• 같은 스타일을 쓰는 모든 레이어에 자동 반영
• Canvas 우측 하단에서 라이트/다크 토글하며 미리보기 가능

다이내믹 컬러 네이밍 팁

색상명은 용도 기반으로 짓는 게 좋다. 색 이름(red, blue)이 아니라 역할(background, surface, text)로.

• black 900: 검정
• black 000: 흰색
• background: 다크 모드에선 제트블랙
• background 1: 카드 배경 — 다크 모드에선 살짝 밝은 회색

이렇게 하면 다크 모드에서 색상이 뒤집혀도 의미가 깨지지 않는다.

스태틱 컬러 (Static Color)

테마와 무관하게 항상 같은 색을 유지하고 싶을 때 사용.

• 예: 브랜드 섹션은 항상 검정 배경 + 흰 텍스트
• 새 컬러 스타일 생성 시 다크 모드 값을 지정하지 않으면 자동으로 스태틱
• 네이밍 예시: Static/black900, Static/black000

다크 모드 설정 제거

이미 다크 모드 색상을 지정한 스타일을 다시 스태틱으로 바꾸고 싶다면: Assets 패널 → 해당 스타일 메뉴(···) → Clear Dark Style

요약 표

항목 요약

테마 연동 컬러	컬러 스타일 하나로 라이트/다크 자동 전환
다크 모드 설정	스타일 편집 시 직접 다크 모드 색상 지정
스태틱 컬러	항상 같은 색 유지, 라이트/다크 무관
적용 방식	Canvas에서 실시간 전환 미리보기 가능
초기화	Assets 패널에서 다크 스타일 제거 가능

 

---

오늘의 한 줄 기획자의 경쟁력은 질문의 양이 아니라 질문의 각도에서 나온다. 사이트 만들기든 AI 쓰기든, 결국 같은 자세에서 출발한다.