● Intro
지난 강의까지 다뤘던 Framer의 내용이 2025년 5월 21일자 업데이트로 다소 변경된 부분이 있다. 대게는 새로운 기능들이 추가된 점이라, 이를 간단히 요약해 보았다. 사실 이보다도 오늘부터는 실제로 나만의 웹페이지를 Framer을 통해 만들어보려 했다. 어떤 주제로 어떻게 구상하고 있는지 천천히 기록해 보겠다.
● Framer 2025 Spring Event 주요 기능 업데이트
https://youtu.be/UlmSVg2Q0Ws?si=bEirxRCx_D-nzsXr
▶ Advanced Analytics
: 클릭 트래킹, 전환 퍼널, A/B 테스트 기능이 내장되어, 사이트 내 사용자 행동 분석과 디자인 검증을 Framer 안에서 바로 할 수 있게 되었다. 별도의 외부 도구 없이도 실시간으로 데이터를 수집하고, A/B 테스트 결과를 바로 적용할 수 있다.
▶ Native Vector Editing
: 벡터 편집 기능이 대폭 강화되어, Framer 내에서 직접 로고, 아이콘, 일러스트레이션을 만들고 수정할 수 있다. 벡터 세트와 벡터 애니메이션(예: Stroke Effect)도 지원되어, 일관된 아이콘 세트 관리와 애니메이션 제작이 쉬워졌다.
▶ Wireframer (AI 기반 와이어프레이밍)
: AI 프롬프트를 활용해 빠르게 웹사이트 레이아웃과 와이어프레임을 생성할 수 있는 기능이 도입되었다. 구조 중심의 레이아웃을 신속하게 만들고, 바로 커스터마이즈 하여 실제 디자인 작업으로 이어갈 수 있다. 기존의 Insert - Section은 아쉽게도 삭제되었다.
▶ Workshop (AI 컴포넌트 생성)
: 대화형 AI를 통해 원하는 기능이나 효과를 설명만 하면, 코드 작성 없이 커스텀 컴포넌트를 자동으로 생성해 주는 기능이다. 생성된 컴포넌트는 속성 조정 등 추가 커스터마이즈가 가능하며, 복잡한 인터랙션이나 효과도 쉽게 구현할 수 있다.
● 나만의 웹페이지 만들기
: 앞서 배웠던 내용들을 실습하기 위해, 나만의 웹사이트를 하나 개설해보고자 한다. 주제를 고민한 끝에, 내가 좋아하는 음악들을 추천하는 웹사이트를 만들어보기로 결정했다. 다음은 웹사이트를 만들기 위해 정한 Rule들이다.
▶ Rules
- 단순 음악 추천이 아닌, [음악을 얽힌 나만의 이야기 + 어울리는 영화 + 언제 들으면 좋은지]를 포함한다.
- 복잡해 보이지 않을 것. 이는 UI와 UX에 전반에 적용된다.
- 링크, 스타일, 컴포넌트, 스택, CMS 등 배웠던 주요 개념들은 필히 스스로 작업해서 적용해 본다.
▶ 오늘 작업물
https://shy-tables-679123.framer.app/
한 줄 코멘트: 역시 심플하게 하는 게 가장 어렵다.. 어떤 폰트, 간격, 색상이 최적인지 고민을 거듭했다. 그래도 재밌게 만들어서 앞으로도 주기적으로 업데이트할 수 있게 하고 싶다.
'[내일배움캠프(PM2기_본캠프)] > 서비스기획 심화' 카테고리의 다른 글
| [캠프 Day 42] My Own Website(2) (2) | 2025.05.29 |
|---|---|
| [캠프 Day 40] 서비스 기획 심화 - 퍼블리시, 설정, 접근성(Framer) (0) | 2025.05.27 |
| [캠프 Day 40] 서비스기획 심화 - 사용자 분석 & 응답 수집 자동화 (0) | 2025.05.27 |
| [캠프 Day 39] 서비스기획 심화 - CMS와 동적 콘텐츠 구성(Framer) (0) | 2025.05.26 |
| [캠프 Day 39] 서비스 기획 심화 - 구조화된 UI 설계 & 반응형 웹 만들기(Framer) (0) | 2025.05.26 |