카테고리 없음

AI 활용법 특강, Framer 입문

j-node 2026. 6. 29. 20:40

AI 활용법 특강

1. PM 업무와 AI 활용 원칙

  • 핵심 마인드셋: 판단과 책임은 PM(나)이 지고, 생산은 AI와 함께한다. AI는 생산 속도를 높일 뿐, 비즈니스 맥락 제공과 최종 검토는 사람의 몫이다.
  • 업무별 활용 범위:
    • AI 전임 가능: 이메일/슬랙 초안 작성, 인터뷰 녹취 요약, 회의록 정리, 리서치 자료 수집 등.
    • AI + PM 검토 필요: 유저 인터뷰 질문지 초안, 데이터 보고서 해석, PRD 초안 및 구조 잡기 등.
    • PM 직접 수행 (AI 불가): 유저 인터뷰 진행(공감/뉘앙스), 문제 정의, 비즈니스 우선순위 및 전략 결정, 팀원 1on1 및 갈등 조율, 이해관계자 설득.

2. 주요 AI 툴별 강점과 한계

  • ChatGPT: 범용성과 창의적 작업, 파일/수치 분석 및 코드 인터프리터에 강함. 단, 긴 문서 맥락 유지가 약하고 복잡한 지시 시 조건을 누락하는 경향이 있음.
  • Gemini: 멀티모달 및 구글 워크스페이스 연동에 강함. 다만 창의적 글쓰기나 복잡한 지시 처리, 한국어 비즈니스 뉘앙스 표현은 다소 어색할 수 있음.
  • Claude: 자연스러운 한국어 표현, 탁월한 긴 문서 맥락 유지(PRD 분석에 유리), 코딩에 강함. 기본 설정에서는 실시간 검색이나 이미지 생성 기능이 약하므로 타 툴과 병행 추천.
  • Perplexity: 출처 기반의 실시간 최신 정보 검색 및 경쟁사 동향 리서치에 특화. 긴 문서 작성이나 창의적 발산 작업에는 부적합.

3. AI-Native PM처럼 일하는 법

  • 정의: AI 도구를 따로 쓰지 않고 하나로 연결(중앙 허브화)하여 업무 흐름을 끊지 않고 일하는 방식.
  • 작동 프로세스: 업무 정의 $\rightarrow$ 단계 쪼개기(업무 분해) $\rightarrow$ 상황에 맞는 적합한 툴 실행.
  • 성공적인 프롬프트 3단계:
    1. 목표 프레이밍: 맥락 + 목적 + 원하는 포맷을 함께 제시.
    2. 경계 설정: 범위, 포맷, 금지 사항(예: "마케팅 용어 금지")을 명시.
    3. 이터레이션(반복): 첫 결과물을 시작점으로 삼아 빠진 점이나 뉘앙스를 지속해서 다듬기.
  • 흔한 실수: 과도하게 구조화된 정형 프롬프트 복붙 하기, 결과물 검토 없이 바로 제출하기, AI가 대화 중 내뱉은 잘못된 전제(가정) 방치하기.

4. 클로드(Claude) 집중 분석

  • 3가지 실행 모드:
    • Chat: 일반적인 챗봇 형태로 문서 요약, 이메일/PRD 초안 작성.
    • Cowork: 반복 업무 및 파일 처리 자동화. 내 컴퓨터 폴더에 접근하여 파일을 직접 생성/삭제 가능.
    • Code: 터미널 기반 코딩 에이전트. 데이터 정제 스크립트나 SQL 작성, 간단한 프로토타입 웹 제작.
  • 모델별 추천 조합:
    • Haiku: 빠르고 가벼움. 단순 반복 작업이나 가벼운 요약에 적합.
    • Sonnet: 성능과 속도의 균형이 좋아 일상 업무 및 PRD 작성에 가장 권장(저연차 PM 추천).
    • Opus: 고난도 작업, 깊은 분석, 복잡한 전략 문서 작성 시에만 선택적 사용.
  • MCP (Model Context Protocol): Anthropic이 만든 표준 규격으로 코딩 없이 자연어로 Jira, Confluence, Slack, Figma 등 수십 가지 외부 도구를 Claude Desktop에 연결해 흐름 끊김 없이 일할 수 있도록 지원.

5. 적용: Claude - Chat으로 웹앱 만들기

 

매일 반복하는 루틴을 체크할 웹앱을 html로 만들었다.

  • 문제1: 모바일에서 반응형으로 잘 보이지 않았음. → 수정하니까 잘 보임
  • 문제2: 모바일 chrome에서 완료한 일 opt-in으로 만들어도 PC chrome에서 수정 사항 반영 안 됨 그대로 opt-out 상태
  • 문제3: 기호?가 모바일에서 X로 깨짐.

 


Framer 입문

1. 자주 쓰는 필수 단축키

  • 기능 검색: Ctrl + K
  • 요소 추가 및 이동: I (Insert 패널), Space (팬/화면 이동), F (Frame 생성)
  • 레이아웃 팁:
    • Space + F: 자식이 아닌 독립적인 요소로 프레임 생성
    • Ctrl + Del: 부모 프레임만 깔끔하게 제거

2. 레이아웃의 핵심: Stack vs Grid

💡 Tip: Framer에서는 Absolute(절대 위치) 배정보다는 Stack(스택) 기반의 레이아웃을 디폴트로 사용하는 것이 좋음.

  • Stack (1차원 레이아웃): 한 방향으로만 움직이는 구조
    • 만드는 법: 자식 프레임들을 묶어서 우클릭 후 Add Stack을 하거나, 처음부터 Layout 메뉴에서 스택 생성
    • 스택을 적용하면 자식 요소들은 자동으로 Relative로 변경됨
    • Distribute 설정을 통해 정렬 및 여백(Gap, 분홍색 요소) 조절 가능
  • Grid (2차원 레이아웃): 양방향(가로/세로)으로 움직이는 구조 (Shortcut: G)
    • 부모 Frame - Grid Item - Grid Cell의 3가지 요소로 구성
    • 고급 설정에서 Columns 숫자를 Auto로 두는 경우는 거의 없음 (명확하게 수치 지정 권장)

3. 타이포그래피 (Typography)

  • 텍스트 툴 단축키 T를 누르고 드래그하거나 더블 클릭하여 텍스트 박스 생성 (★ 텍스트 자체도 하나의 프레임으로 인식됨)
  • 자주 사용하는 텍스트 스타일은 Preset으로 등록해서 재사용
  • 일괄 변경: 텍스트 프레임 클릭 후 Font → Select all elements with this font를 누르면 전체 폰트를 한 번에 전환 가능
  • 행간(Line) 단위인 em은 글자 사이즈의 배수를 의미함

4. 네비게이션 및 링크 구현

  • NavBar 구조: 프레임을 만들고 스택으로 변환 후, Distribute 값을 Space between으로 설정하여 양끝 정렬 + 내부에 Padding 부여
  • 스타일 분리: 링크에 스타일(New Style)을 추가하여 Default / Hover / Current 상태별 디자인 정의
  • 스크롤 이동 (Anchor Link): 이동시키고 싶은 패널에 Scroll Section을 지정하고, 링크 연결 시 Section: destination1 형태로 선정. (약간 위부터 보여주고 싶다면 Offset 옵션 조절)

5. 콘텐츠 삽입 (이미지 및 비디오)

  • 이미지 (Image):
    • 단순 Drag & Drop으로 넣으면 원본 사이즈로 삽입됨
    • 프레임의 Fill을 이미지로 채우는 방식을 주로 사용하며, Focal point로 중심 위치 조절 가능 (Resolution은 Auto 권장)
  • 비디오 (Video):
    • Layout - Video에서 URL 입력(추천) 또는 파일 직접 업로드
    • 유튜브 영상은 Insert - Media - YouTube 컴포넌트 활용

오늘 인사인트, 느낀 점

  • AI 특강
    • AI별 강점을 이해하고 각각 다른 목적으로 사용할 줄 알아야 한다.
    • MCP 연결을 적극적으로 활용한다면 개인 업무, PM 업무 중 상당수 자동화 가능.
    • Claude에서 Cowork- Scheduled vs. Code - Routine 차이??
    • 일상, 업무에서 루틴한 것부터 빨리 AI로 예약해보자.
 
AI 심화  Chat - Customize - Connectors 노션 연결함

 웹앱 만들어봄

Chat - Customzie - plugin

Cowork - Scheduled  vs. Code - Routine    

Perplexity: Manus와 비교
Chat - skill  과제 집중 일상, PM 준비 중 Routine, 기획 단계 Chat - Project로 최적화(~주말까지)
Framer Ch.1 수강 Ch.2 수강 Ch.3 수강 Ch.4 수강 Ch.5 수강
기타   특강 과제 발제 과제 제출 미니 프로젝트 발제