[내일 배움 캠프] 51일차
TIL | Framer로 랜딩페이지 구조를 이해하고, 반응형으로 생각하는 연습
오늘은 Framer 2일차 세션 내용을 바탕으로, 랜딩페이지를 구성하는 기본 구조와 반응형 디자인 개념을 익히고 직접 실습까지 진행했다. 수업에서는 이전에 배운 Frame, Stack, Width, Position 같은 기본 개념을 다시 정리한 뒤, 실제 웹사이트를 어떤 섹션 단위로 나누어 설계하는지와 화면 크기에 따라 레이아웃이 어떻게 달라져야 하는지를 배웠다.
특히 오늘은 단순히 화면을 예쁘게 만드는 것이 아니라, 웹페이지를 구조적으로 바라보는 시선을 익힌 게 가장 인상 깊었다. Header, Hero, About, Feature, Review, FAQ, CTA, Footer처럼 랜딩페이지를 역할별 섹션으로 나누어 생각해보니, 한 화면도 그냥 감으로 배치하는 것이 아니라 목적에 따라 설계해야 한다는 점이 더 분명하게 느껴졌다. 어떤 섹션은 사용자의 첫인상을 만들고, 어떤 섹션은 정보를 설명하고, 또 어떤 섹션은 행동을 유도한다는 흐름을 이해할 수 있었다.
Framer의 기본 속성도 다시 복습했다. Frame은 요소를 담는 기본 박스이고, Stack은 자동 정렬 시스템이며, Width는 Fixed, Fit, Fill에 따라 요소 크기와 반응 방식이 달라진다. 또 Position 속성에서는 Relative, Absolute, Fixed, Sticky의 차이를 다시 보면서, 레이아웃 안에서 요소가 흐름을 따를지, 자유롭게 배치될지, 혹은 화면에 고정될지를 구분하는 기준을 정리할 수 있었다. 이 개념들은 단순한 기능 설명이 아니라, 실제로 랜딩페이지를 만들 때 구조를 망가뜨리지 않고 배치하기 위한 기본 문법처럼 느껴졌다.
오늘 배운 핵심 중 하나는 역시 반응형 디자인이었다. 같은 콘텐츠라도 PC에서는 2~3열 구조와 큰 텍스트가 어울리고, 모바일에서는 1열 구조와 더 간결한 정보 배치가 필요하다는 점을 다시 확인했다. 그리고 Breakpoint는 단순히 화면 크기를 나누는 숫자가 아니라, 사용자가 더 보기 편한 구조로 바꾸기 위한 기준점이라는 점도 이해할 수 있었다. 수업 자료에서는 Framer에서 모바일 390, 태블릿/노트북 810, 데스크탑 1200을 기준으로 보는 흐름과, 브레이크포인트를 너무 많이 만들기보다 3단계 정도로 관리하는 것을 추천하고 있었다.
또 Wireframer 기능도 흥미로웠다. 텍스트 프롬프트로 웹사이트 와이어프레임을 자동 생성할 수 있다는 점이 인상적이었고, AI가 전체 구조를 빠르게 잡아주는 데에는 강하지만 컬러, 타이포그래피, 이미지 같은 디테일은 결국 디자이너의 몫이라는 점도 함께 배웠다. 즉, AI가 설계를 대신해주는 것이 아니라 초안을 빠르게 만들 수 있게 도와주는 도구라는 점에서 활용 가치가 크다고 느꼈다.
실습을 하면서 가장 크게 느낀 건, 캔버스에서 보이는 모습만 믿으면 안 된다는 점이었다. 수업에서도 반응형은 Preview 모드에서 확인해야 하고, 실제 브라우저 크기를 줄여보며 Breakpoint가 제대로 동작하는지 체크해야 한다고 강조했는데, 이 말이 왜 중요한지 실습하면서 더 체감됐다. 캔버스에서는 멀쩡해 보여도 실제 화면에서는 전혀 다르게 보일 수 있기 때문에, 앞으로는 작업 중간중간 반드시 Preview로 확인하는 습관을 들여야겠다고 느꼈다.
오늘은 실습 외에도 Framer 프로젝트를 정리하는 방법까지 함께 익혔다. 작업만 하는 것이 아니라 파일을 정리하고 관리하는 흐름까지 익히면서, 툴을 조금 더 실제 작업 환경처럼 다뤄본 느낌이 들었다. 작은 부분이지만 이런 관리 방식까지 알아두는 게 작업 효율에 꽤 중요하다는 생각이 들었다.
오늘 학습을 통해 느낀 건, Framer는 단순히 “쉽게 만드는 툴”이라기보다 구조를 이해한 사람이 더 잘 다룰 수 있는 툴이라는 점이다. 화면 하나를 만들더라도 섹션의 역할, 요소의 정렬 방식, 반응형 대응, 그리고 실제 미리보기 검증까지 함께 생각해야 한다는 걸 배웠다. 이제는 단순히 따라 만드는 단계에서 조금 더 나아가, 왜 이렇게 배치하는지와 어떤 기준으로 구조를 잡아야 하는지를 생각하면서 작업해보고 싶다.
