framer

3 Posts

[내배캠] 서비스 기획 심화 | ③ CMS와 동적 콘텐츠 구성

notes
2026.07.02
CMS 개념 이해하기 01. CMS란? 콘텐츠 관리 시스템, Content Management System한 번 등록한 콘텐츠는 CMS 리스트, 카드, 상세 페이지 등 다양한 곳에서 반복해서 사용 가능어디서든 수정하면 모든 연결된 콘텐츠에 자동 반영디지털 파일 캐비닛: 컬렉션 = 폴더, 아이템 = 폴더 안의 서류, 필드 = 서류 안의 항목들 02. 반복 콘텐츠를 자동화하는 구조 Collection (컬렉션): 콘텐츠를 유형별로 묶는 폴더 (예: 블로그, 팀원, 제품 등)Field (필드): 각 콘텐츠가 가진 속성 (예: 제목, 이미지, 날짜 등)Item (아이템): 실제 콘텐츠 단위 (예: 블로그 글 1개)List / Detail Pages: 여러 아이템을 목록으로 보여주거나, 하나의 아이템을 상세하게 ..

[내배캠] 서비스 기획 심화 | ② 구조화된 UI 설계 & 반응형 웹 만들기

notes
2026.06.30
스타일 시스템 이해하기 01. 컬러 스타일 (Color Styles)? 반복되는 색상을 스타일로 정의하여 전체 사이트에서 한 번에 관리 02. 컬러 스타일 적용 색상 선택 후 Color Picker 하단의 Create Style 클릭이름은 surface/0, content/100 등 의미 기반 또는 숫자 기반으로 구성스타일을 수정하면 해당 스타일이 적용된 모든 요소에 자동 반영Assets 패널 → Styles에서 스타일 관리 (이름 변경, 폴더 정리, 삭제 가능)스타일에서 분리하고 싶을 땐 Color 값 수동 변경하거나 Fill 제거 03. 컬러 스타일 관리 Assets 패널 → Styles → Color이름 수정, 삭제, 폴더 정리 가능스타일이 적용된 레이어 찾기 (Find 사용)스타일에서 벗어나고 ..

[내배캠] 서비스 기획 심화 | ① Framer 입문

notes
2026.06.29
Framer란 무엇인가? 01. Framer란? 웹사이트를 디자인・퍼블리시・분석 가능한 올인원 노코드 웹 제작 도구 02. 노코드(No-Code)란? 코드를 몰라도 만들 수 있는 개발장점낮은 학습 곡선: 전문 프로그래밍 언어를 배우지 않아도, 직관적 UI로 짧은 시간 내 작업 결과를 볼 수 있음프로토타이핑 속도 상승: 아이디어나 기획안을 즉시 시각비용 절감: 초기 개발 비용을 줄이는 동시에, 유연한 반복 수정(Iteration)이 용이 03. 타 노코드 툴과 비교한 Framer의 강점 Figma와 유사한 UI로 낮은 진입 장벽개발 지식 없이 웹사이트에 필요한 다양한 컴포넌트 및 로직들 구현 가능몇 번의 클릭만으로 손쉽게 실시간 미리보기 및 퍼블리싱 (배포 가능) 인터페이스 살펴보기 01. Framer..