[내일 배움 캠프] 50일차

Framer 기초 학습 및 카드 UI 구성 실습

오늘은 Framer의 기초 개념과 활용 방식에 대한 내용을 학습하고, 이를 바탕으로 직접 여러 형태의 카드 UI를 구성해보며 복습했다.
단순히 툴의 기능을 익히는 데 그치지 않고, 실제 화면을 손으로 따라 그려보면서 레이아웃을 구조적으로 설계하는 방식을 이해하는 데 집중했다.

이번 학습을 통해 먼저 랜딩 페이지의 목적과 필요성을 정리했다.
랜딩 페이지는 사용자가 서비스와 처음 만나는 접점으로, 핵심 정보를 효과적으로 전달하고 행동을 유도하는 역할을 한다. 이를 통해 화면 설계에서 중요한 것은 단순한 시각적 완성도가 아니라, 사용자가 정보를 빠르게 이해하고 자연스럽게 다음 행동으로 이어질 수 있도록 흐름을 만드는 것이라는 점을 다시 확인할 수 있었다.

이와 함께 Framer의 주요 활용 방식도 함께 이해했다.
Framer는 정적인 화면 설계에 머무르지 않고, 실제 웹과 유사한 형태로 화면을 구성하고 상호작용을 빠르게 구현할 수 있다는 점에서 강점이 있는 도구다. 특히 화면을 하나의 결과물처럼 제작해볼 수 있다는 점에서, 아이디어를 보다 실제 서비스에 가깝게 시각화하는 데 효과적이라는 점을 배웠다.

또한 Framer의 기본 인터페이스와 작업 구조를 익히며, 기존에 사용하던 Figma와의 차이도 비교해보았다.
Figma가 화면 설계와 협업 중심의 도구라면, Framer는 그보다 한 단계 더 나아가 실제 웹 구조와 동작 흐름을 고려하며 작업하게 만드는 도구에 가깝다고 느꼈다. 같은 화면을 만들더라도 단순히 보기 좋게 배치하는 것보다, 요소 간 관계와 정렬, 간격, 흐름을 더욱 입체적으로 다루게 된다는 점이 인상적이었다.

실습에서는 프레임, 스택, 위치, 분산 정렬 개념을 중심으로 학습을 진행했다.
특히 스택 기능은 여러 요소를 단순히 쌓는 기능이 아니라, 간격과 정렬 규칙을 일관되게 유지하며 반복되는 UI를 효율적으로 구성할 수 있게 해주는 핵심 기능이라는 점을 체감했다. 직접 카드 UI를 여러 형태로 그려보면서 이미지 중심 카드, 텍스트 중심 카드, 가격과 버튼이 포함된 카드 등 서로 다른 구조를 비교해볼 수 있었고, 그 과정에서 같은 정보라도 배치 방식에 따라 가독성과 전달력이 크게 달라진다는 점을 확인했다.

오늘 학습한 범위는 다음과 같다.

학습 내용

•랜딩 페이지의 목적과 필요성 이해

•Framer의 주요 활용 방식 이해

•Framer 인터페이스의 기본 구조 이해

•Framer와 Figma의 차이 비교

실습 항목

•프레임

•스택 속성

•위치 설정

•분산 정렬

•기본 요소 확인

•스택 속성 실습

•위치 설정 실습

•분산 정렬 실습

•버튼 구성

•카드 UI 5가지 예제 제작

이번 학습의 가장 큰 의미는, 화면을 단순히 꾸미는 것이 아니라 구조를 설계하는 관점으로 바라보기 시작했다는 점이다.
직접 여러 유형의 카드를 반복해서 만들어보며, 간격, 정렬, 위계, 정보 묶음 방식이 화면의 완성도를 결정하는 핵심 요소라는 것을 다시 체감했다. 아직은 기능을 익혀가는 단계이지만, 반복 실습을 통해 Framer가 왜 웹 기반 프로토타이핑과 페이지 제작에 효과적인 도구인지 점점 더 선명하게 이해할 수 있었다.

한 줄로 정리하면, 오늘은 Framer를 통해 화면을 ‘그리는 것’에서 나아가, 정보를 ‘구성하고 설계하는 방식’을 익힌 시간이었다.