PM 도전기

1️⃣ 상황인텔리전스 = 토스 상단 배너유저에게 맞춤 금융정보 제공팀원들이 어드민(백오피스)에서 메시지를 등록·관리 → 프론트에 노출지표 충돌:비즈니스 지표 → 많이 노출·클릭되어야 함유저 만족도 → 광고처럼 느껴지면 불쾌감 ↑2️⃣ 문제 발견클릭률은 계속 상승 ✅하지만 문제 제보 증가 ❌"봤던 게 또 뜬다""낚시성 광고 같다"지표는 좋지만 경험은 나쁜 모순 발생 → 정성적 문제 가시화 필요3️⃣ 문제 구체화 과정내부 제보 정리주제별/시간순으로 패턴 분석 → 제품 변화와 연관성 체크설문조사 진행별점(1~5점) + 주관식 답변패턴 확인:5점 = “정보가 유용하다, 몰랐던 걸 알게 됐다”1점 = “광고 같다, 너무 자주 뜬다”정성 의견 → 정량화만족도 점수 + 이유 선택지(예: "대출이 떠서 싫다" / "자..

📊 데이터 드리븐 기획 정리1️⃣ 데이터 드리븐 기획이란?정의: 사용자 행동, 시장, 성과 데이터를 기반으로 의사결정을 내리고 제품을 기획하는 방식핵심: 감(직관)이 아닌 데이터 근거로 문제를 찾고 해결책을 기획구분감에 의존한 기획데이터 드리븐 기획방식직관에 의존 (ex. "이 색이면 클릭 늘 거야")데이터 검증 (ex. A/B 테스트로 클릭률 비교)결과근거 부족, 실패 위험 ↑객관적 근거 확보, 성공 확률 ↑2️⃣ 왜 중요한가?정확한 기획 가능데이터 기반 검증 → 실패 확률↓, 성공 확률↑예: 메뉴 숨김 → 깔끔해짐 기대 → 실제 데이터 보니 클릭률 -30% → 원복고객 니즈 정확히 파악클릭률, 체류 시간, 이탈률 등으로 실제 행동을 확인설문 = "원한다" / 실제 데이터 = 클릭률 낮음 → 기능 재..

1. 이미지 추가드래그 앤 드롭 → 원본 크기 기억(Intrinsic Size)하는 프레임 자동 생성프레임 생성 + Fill 이미지 설정 → 직접 그린 프레임에 이미지 채우기레이아웃 메뉴 → Image → 플레이스홀더 이미지 포함 프레임 생성플러그인(Unsplash 등) → 무료 이미지 바로 불러오기원본 크기 복원 → 이미지 우클릭 → Intrinsic Size포맷 지원Raster: JPG, PNG, WebP, GIF, AVIF, TIFFVector: SVG게시 시 자동 최적화 → AVIF 변환 + 해상도 맞춰 리사이징 (Resolution = Auto 권장)위치·품질 조정Fill 모드에서 잘리면 Focal Point로 주요 부분 고정Resolution은 Auto → 성능·퀄리티 자동 최적화2. 비디오 ..

📍 수업내용 - 링크 기능1️⃣ 내부 페이지로 이동 (Navigation 설정)텍스트 개체 선택 → 링크 스타일 설정Link → Style → New Style 클릭 후 NaviBar 이름 설정색상 설정Edit 클릭 → Default 컬러 & Hover 컬러 설정현재 페이지임을 표시하려면 Current 컬러도 설정같은 스타일 재사용다른 개체에도 동일하게 적용하려면Link → Style에서 만든 NaviBar 스타일 선택2️⃣ 같은 페이지 내 다른 섹션으로 이동 (스크롤 이동)버튼에 Link 설정해당 버튼 선택 → Link → Home 선택섹션 프레임에 이름 부여이동하고 싶은 구역(프레임) 선택 → Scroll Section에서Name에 예: Destination-1 입력버튼에 Scroll Link 설정..

📌 추가 수업 메모텍스트 박스 = 프레임 → Stack, Grid에 모두 배치 가능프로젝트 공유 규칙: 프로젝트 간 요소는 공유되지 않지만, 추가한 폰트는 예외로 공유됨Font Weight 조절:일부 폰트는 Font-Weight 값 변경 불가→ Variable Font 모드에서 Weight 속성으로 조절일괄 폰트 변경:Font > Select all element with this font → 해당 폰트가 적용된 프레임 전체 선택→ 다른 폰트로 변경 가능Font Size 모드:Px: 고정 크기 (일반적)Fit: 텍스트 박스 크기에 맞춰 폰트 크기도 자동 변경Line Height 예시:폰트 크기: 25px줄 높이(Line Height): 50px → 한 줄이 차지하는 전체 높이는 50px가 됨1. 텍스트..

1. Grid란?Grid = 행(Row) + 열(Column) 모두를 제어하는 2차원 레이아웃 시스템 비교 항목StackGrid방향 제어단일 방향 (가로 or 세로)가로 + 세로 동시 제어대표 활용텍스트+버튼 배치, 단순 레이아웃갤러리, 카드 리스트, 대시보드 대표 사용 예시갤러리 레이아웃카드형 리스트기능 소개(Feature Bento) 섹션대시보드 화면2. Grid 만들기Frame → Layout → Grid 적용툴바 → Layout → Grid 도구 드래그단축키 Shift + G💡 Grid 생성 시 특징내부에 보이지 않는 셀(Cell) 구조 생성자식 요소(Grid Item)가 각 셀에 자동 배치됨3. Grid 구조Grid Frame (부모) ├── Grid Cells (자동 생성) │ └── G..

1. Stack이란?프레임(Frame)에 특수한 레이아웃 속성을 부여하여 자식 요소를 세로/가로 방향으로 자동 정렬하는 기능Figma의 Auto Layout, CSS Flexbox와 유사마진 계산 없이 일관된 간격 유지 가능한 방향 정렬만 가능(양방향 불가)2. Stack과 Relative PositionAbsolute: 자유 배치, 다른 요소 흐름 영향 없음 (기본값)Relative: Stack/Grid 내부에서 흐름을 따라 배치 (Stack 기본)Fixed: 뷰포트 기준 고정 (스크롤 무시)Sticky: 뷰포트 상단 도달 시 Fixed로 전환Stack 내부 요소는 기본 Relative → 순서대로 정렬·간격 유지Absolute 요소도 넣을 수 있지만 Stack의 흐름에서 제외됨3. Stack 속성속성..