팀 아티클 카타
- 제목 : 비개발자의 AI 협업 도전기 — 생산성 측정하려다 서버까지 띄운 9일
- 작성자(저자) : 황순호 (naver tech PMO)
- 이 아티클의 주요 메시지 : AI를 잘 활용하는 조직은 성능 좋은 AI 도구를 선별하는 데 그치지 않고, AI가 역량을 제대로 발휘할 수 있는 밑바탕 환경을 먼저 탄탄하게 갖춘 조직이다.
- 핵심 키워드 :
사내 가이드와 ai의 콜라보 ...
읽으면서 가장 흥미로웠던 부분 :
결국 무엇을 해야할지, 어떤 걸 만들어내고 싶은지에 대한 명확한 고민과 목표에서부터 출발해야한다는 것 … 이렇게까지 뚜렷하게 목표가 있다면 중간에 거치는 문제 상황이나 병목도 ‘문제’임을 인지하고 해결해나갈 수 있다는 점이 가장 크게 와닿았다. = 기획의 본질
데이터로 확인하고 싶어 > 수치를 뽑았는데 이 수치가 뭘 의미하지? > 지표가 좀 부족한데 다른 지표를 뽑으려면 서버를 만들어야겠는데 > 데이터를 모으는 스케줄러도 … > 스토리지도 …
마치 아반떼를 사려다 벤츠를 사버린 썰이 떠오름 그냥 …..
아무튼 명확한 목표를 바탕으로, 고민의 분기점마다 그게 분기점임을 알아채고 해결하기 위해 ai와 사내 가이드를 뜯어보며 구체적으로 활용하는 태도. 그게 이 글에서 가장 배울 점인 것 같다.
이전에는 알지 못했거나 새롭게 배운 내용 :
사내 인프라의 중요성 … (네이버 ..)
”새로운 아이디어의 실현은 도구의 발전에서 비롯되지만, 그것이 지속 가능하게 유지하는 힘은 안정적인 인프라에서 나옵니다. 그리고 비개발자조차 그 인프라에 접근해 활용할 수 있도록 길을 열어 주는 것은 결국 잘 작성된 가이드 문서”
비개발자가 AI와 협업해 가치 있는 무언가를 만들어 내는 진정한 전제 조건은 결국 '친절하고 정확한 가이드 문서'입니다. AI는 사용자가 그 가이드를 조금 더 쉽게 소화하고 자기 상황에 적용할 수 있도록 돕는 훌륭한 조력자일 뿐입니다.
오류가 없다고 안심하지 말자. 내가 시킨 것을 내가 해석할 능력도 없으면 당연히 오류도 못 잡아낸다. 내가 무엇을 하고 싶어서 ai를 어떻게 쓰고 있는지에 대한 명확한 이해가 선행되어야하고, 반드시 정합성 검증을 꼭꼭 ….
이 아티클을 한 문장으로 요약하면?
가이드 문서가 탄탄하게 있는 좋은 회사를 들어가면 나도 서버를 구축하는 비개발자 출신 PM이 될 수 있다니깐!
팀 논의 요약
Jira는 생산성 측정 도구가 아니다.
업무 진행 상황을 확인할 수 있으니 생산성도 자연스럽게 파악될 것이라 생각했지만, 팀 속도·병목 지점·분기별 개선 여부 같은 요소는 Jira만으로는 명확히 측정하기 어렵다. 생산성은 별도의 지표 설계와 데이터 해석이 필요한 영역이며, 감이 아닌 데이터로 팀을 이해하고 소통하려는 PM의 역할이 인상적이었다는 공감대가 형성됐다.
AI 활용의 진짜 핵심은 도구가 아니라 맥락과 목표의 명확함이다.
초반에는 "이거 어떻게 해?"식의 단순 질문에서 출발했지만, 상황과 맥락을 구체적으로 전달할수록 AI와의 대화 자체가 요구사항 정의 세션이 된다는 경험에 팀원들이 공감했다. 또한 잘 작성된 사내 가이드 문서가 AI에게 이정표 역할을 한다는 점, 그리고 토큰 낭비를 줄이기 위해 "이 작업을 AI가 반드시 해야 하는가"를 먼저 따져보는 태도도 함께 논의됐다.
AI 결과물에 대한 정합성 검증이 필요하다.
AI가 확신에 차서 내놓은 코드나 결과가 오히려 가장 많은 시간을 낭비하게 만들었다는 저자의 경험처럼, 내가 시킨 것을 내가 해석할 능력이 없으면 오류도 잡아낼 수 없다는 점을 팀 모두가 중요하게 받아들였다.
AI 시대에도 기획의 본질은 변하지 않는다.
무엇을 만들고 싶은지, 왜 만들어야 하는지에 대한 명확한 고민 없이는 AI도 제 역할을 하지 못한다.
오히려 목표가 뚜렷할수록 중간에 마주치는 문제들을 '문제'로 인식하고 해결해나갈 수 있다는 점에서
데이터를 뽑았더니 의미를 모르겠고, 지표가 부족하니 서버를 만들어야 하고, 스케줄러도 스토리지도 필요해진 필자의 여정이 그것을 잘 보여준다.
데이터로 팀을 이해하려는 태도가 PM에게 중요하다.
좋은 사내 인프라와 가이드 문서가 비개발자도 실질적인 무언가를 만들어낼 수 있게 해주는 토대가 된다는 점도 배웠다.
결국 AI는 훌륭한 조력자이지만, 그것을 제대로 활용하는 힘은 도구가 아니라 사람의 사고와 준비에서 나온다는 것이 오늘의 가장 큰 인사이트였다.
오늘의 집 JD 분석
https://velog.io/@minimalhwi_st/오늘의집-Product-Owner-Search-Recommendation-JD-분석
오늘의 집 채용 공고와 2026 전략 소개, 온보딩 프로그램 소개 아티클들을 클로드에 때려넣고 프롬프트를 입력해서 jd 분석을 수행했다.
내일부터는 우리 조 승호님께서 생성해주신 프롬프트를 적용 / 재조립해서도 해 볼 예정 ! 프롬프트 잘 쓰는 능력 삼키고 싶다. 뭔가 나는 결과물은 그럴 듯하게 나오긴 하는데 토큰을 많이 잡아먹는 프롬프팅을 하는 듯 .... 조금 더 간결하고 명확하게 지시하는 연습 해보기.
서비스 기획 심화 framer ..
챕터 1 — Framer 기초
1-1 Framer란?
코드 없이 웹사이트를 디자인·퍼블리시·분석할 수 있는 올인원 노코드 툴. Figma와 유사한 UI로 진입 장벽이 낮고, 반응형·SEO·도메인 연결·CMS까지 지원. Webflow보다 쉽고, Figma와 달리 실제 배포까지 가능.
1-2 인터페이스
4개 영역으로 구성
- 상단 Toolbar(삽입/CMS/퍼블리시)
- 좌측 Sidebar(Pages·Layers·Assets)
- 우측 Sidebar(선택 요소 속성)
- Canvas(무한 작업 공간)
프로젝트 계층은 Workspace → Project → Page → Canvas → Breakpoint.
1-3 새 프로젝트
새 프로젝트 생성 시 Home 페이지 자동 생성. 페이지 추가·폴더 구조·SEO 메타데이터 설정 가능. Breakpoint는 Desktop(1200px), Tablet(768px), Mobile(375px) 기본 제공. Breakpoint 바깥에 놓인 요소는 퍼블리시해도 보이지 않음.
1-4 Frame 중심 사고방식
모든 UI 요소가 Frame.
그룹핑·레이아웃·스타일링 역할을 함께 수행. "Frame 안에 Frame" 구조(Nesting)가 실무 레이아웃의 핵심. 단축키: F Frame 생성, Esc 부모로 이동, Cmd+Enter 자식 래핑.
1-5 스택(Stack)
Figma Auto Layout, CSS Flexbox와 유사. 자식 요소를 Row/Column 방향으로 자동 정렬.
주요 속성
- Direction
- Gap
- Padding
- Distribute(Main Axis)
- Align(Cross Axis)
- Wrap
Fit Content(콘텐츠 크기에 맞춤) vs Fill Container(부모 채움).
1-6 그리드(Grid)
행+열을 모두 제어하는 2차원 레이아웃. 갤러리·카드 리스트·대시보드에 적합. Stack은 단방향, Grid는 2차원이라는 차이를 기억. Span으로 여러 셀을 병합 가능.
1-7 타이포그래피
T 키로 텍스트 삽입, 클릭=오토 크기, 드래그=고정 크기. Variable Font(Weight, Slant, Width 등 세부 조절 가능). 텍스트 스타일을 Assets 패널에서 관리하면 전체 일괄 변경 가능.
1-8 링크와 내비게이션
모든 요소에 링크 설정 가능(L 키)
대상 유형: 내부 페이지, 섹션 스크롤(#), 외부 URL, CMS slug.
링크 스타일은 Default·Hover·Current 3가지 상태 설정.
섹션 이동 시 Scroll Section + Offset Y + Smooth Scroll 조합 활용.
1-9 콘텐츠 삽입과 Insert 패널
이미지는 드래그앤드롭 또는 Fill 설정으로 삽입. Focal Point로 이미지 중심점 고정. 비디오는 MP4 직접 업로드 또는 YouTube/Vimeo 임베드.
Insert 패널(I)에서 Sections·Navigation·CMS·Forms·Icons 등 다양한 컴포넌트 즉시 삽입.
챕터 2 — 디자인 시스템과 반응형
2-1 스타일 시스템
컬러 스타일(Color Styles)과 텍스트 스타일(Text Styles)을 Assets 패널에서 중앙 관리. 스타일 수정 시 적용된 모든 요소에 자동 반영.
네이밍 팁: surface/0, content/100, heading/1 처럼 /를 쓰면 자동 폴더 생성.
2-2 컴포넌트
우클릭 → Create Component 또는 ⌥+⌘+K.
Variant로 Default·Hover·Pressed 등 여러 상태를 한 컴포넌트에 통합.
Variable로 인스턴스마다 텍스트·색상·가시성을 개별 지정. 컴포넌트 안에 컴포넌트 중첩도 가능.
2-3 레이아웃 템플릿
Nav·Footer처럼 모든 페이지에 반복되는 요소를 Layout Template으로 관리.
우클릭 → Create Layout Template. Placeholder에 각 페이지 콘텐츠가 채워지는 구조.
Variables로 페이지별 패딩·Nav 스타일을 개별 제어 가능.
2-4 반응형 개념
반응형 웹을 만드는 두 가지 핵심 도구: Fluid Layout(요소 크기가 부모 비율에 따라 유동적으로 변함) + Breakpoints(특정 너비 기준으로 레이아웃 재정의). 모바일 퍼스트 원칙 권장.
2-5 Fluid Layout 실습
Absolute Position → Stack으로 전환이 Fluid Layout의 출발점. 정렬 옵션 Space Between은 내비게이션 바·탭 메뉴에 자주 사용.
속성 요약: Fill(공간 채움), Fit(콘텐츠 맞춤), Fixed(고정 크기), Max Width(최대 너비 제한).
Section → Container → Content 3단 구조가 실무 표준.
2-6 Breakpoint 최적화
Breakpoint 추가: 상단 바 [+] 버튼으로 Tablet(810px), Phone(390px) 추가. 각 Breakpoint에서 Grid 열 수, padding, visibility 등 Override 가능(파란색으로 표시). 텍스트 스타일 자체에도 Breakpoint 추가 가능(Large/Medium/Small). 확인은 Cmd+P Preview 모드에서 뷰포트 핸들 드래그로 실시간 확인.
챕터 3 - CMS
3-1 CMS란?
콘텐츠 관리 시스템(Content Management System). 반복 콘텐츠를 한 번 입력하면 여러 곳에 자동 반영된다.
핵심 구조: Collection(폴더) → Item(서류) → Field(항목)
3-2 컬렉션 생성
이름은 명확하게: articles, team, products
기본 필드: title(텍스트), slug(URL용 필수 키)
주요 필드 타입: Plain Text, Formatted Text, Date, Image, Toggle, Option, Reference, Multi-Reference
3-3 CMS 연결하기
Insert → CMS → Collection List 삽입
카드 안 요소에 Set Variable로 필드 연결
텍스트 → Content 속성
이미지 → Fill 속성
카드 하나만 디자인하면 나머지에 자동 적용
3-4 필터링 / 정렬
3-5 상세 페이지 (Dynamic Routing)
Pages → + New CMS Page → Detail Page 선택
slug 필드 기반으로 URL 자동 생성
텍스트·이미지·버튼에 Variable 연결해 콘텐츠 자동 매핑
필드가 비어있을 때 요소 숨기기: Visible → Set Variable → Is Set
3-6 조건부 렌더링
CMS 필드 값에 따라 UI를 다르게 표시:
링크 있을 때만 버튼 표시 → Visible → link → Is Set
카테고리별 스타일 → 컴포넌트 Variant에 category 필드 연결
추천 글 뱃지 → featured = Yes일 때만 뱃지 노출
3-7 컬렉션 관계 & 필터 UI
Relation 필드: 다른 컬렉션 참조 (예: Articles → Authors)
상세 페이지에서 author.name, author.image 등 서브필드 접근 가능
필터 UI: 카테고리 버튼(Variant) 클릭 시 Set Variable로 리스트 필터 갱신
1강 / 2강 실습과
3강 실습 ㅎ.ㅎ
어렵지 않게 잘 따라갔다 ! 강의 싹 정리해놓고 틈틈이 안 써본 기능들 써보면서 능숙해져봐야지이
