[내일 배움 캠프] 52일차

TIL | 보이는 화면 뒤에 있는 구조까지 생각하게 된 하루

오늘은 Framer 3일차 세션 내용을 중심으로, 랜딩페이지를 단순히 예쁘게 만드는 것을 넘어서 실제로 작동하는 웹사이트로 완성해가는 과정을 배웠다. 세션에서는 이전 내용 복습부터 시작해 사용자 정보 받는 방법, 웹사이트 설정, 방문자 지표 확인, 그리고 나만의 포트폴리오 사이트 만들기까지 한 흐름으로 다뤘다. 단순히 화면을 만드는 툴을 배우는 느낌보다, 디자인부터 배포 이후 운영까지 연결해서 생각하는 시간에 더 가까웠다.

먼저 다시 짚은 건 반응형 디자인과 breakpoint였다. 하나의 화면을 만드는 데서 끝나는 게 아니라, 다양한 화면 크기에서도 자연스럽게 조정되도록 설계하는 것이 중요하다는 점을 다시 확인했다. 특히 breakpoint는 화면 너비가 바뀔 때 레이아웃이 전환되는 기준점이라는 걸 다시 정리하면서, 결국 좋은 UI는 한 장의 결과물이 아니라 여러 환경에서도 무너지지 않는 구조라는 걸 느꼈다. 또 랜딩페이지는 브랜드의 첫인상을 결정하고, 사용자가 아주 짧은 시간 안에 이탈할지 머물지를 판단하는 공간이라는 점도 인상 깊었다. 결국 랜딩페이지는 보기 좋은 화면이 아니라, 사용자를 설득하는 첫 문장 같은 역할을 한다는 걸 배웠다.

오늘은 웹사이트를 “운영 가능한 형태”로 만드는 데 필요한 설정도 같이 배웠다. Framer 안에서 폼을 Google Sheet 같은 외부 도구와 연결해 사용자 정보를 받을 수 있고, 제출 후에는 Redirect로 성공 페이지를 보여주거나 Tracking으로 제출 이벤트를 추적할 수 있다는 점이 특히 실무적으로 와닿았다. 그동안 폼은 그냥 입력창 정도로 생각했는데, 오늘은 그게 단순한 수집이 아니라 사용자와 서비스를 연결하는 접점이라는 설명이 인상 깊었다.

SEO 설정도 꽤 크게 남았다. Title, Description, OG Image, Favicon, Language, Domain 같은 요소가 단순한 부가 설정이 아니라, 사용자가 검색에서 내 사이트를 발견하고 신뢰하게 만드는 기본 장치라는 걸 배웠다. 예쁜 사이트를 만드는 것만으로는 부족하고, 찾을 수 있어야 비로소 의미가 생긴다는 말이 오늘 수업의 핵심처럼 느껴졌다. 웹사이트 설정에서 외부 도구 연결이나 커스텀 도메인까지 다루면서, 디자인 결과물을 진짜 서비스처럼 다루는 감각도 조금씩 생긴 것 같다.

또 하나 기억에 남는 건 Framer Analytics를 디자인 검증 도구로 바라보는 시선이었다. 방문자 수 자체보다, 모바일 방문자가 많은데 모바일 UI가 불편하지는 않은지, 방문자 대비 CTA 등록률이 낮다면 화면 설계나 메시지를 바꿔야 하는 건 아닌지처럼 숫자 뒤의 이유를 읽는 게 중요하다는 점이 인상적이었다. 결국 데이터는 결과표가 아니라, 디자인이 실제로 잘 작동하고 있는지 확인하는 피드백이라는 걸 조금 더 이해하게 됐다.

포트폴리오 사이트 만들기 파트에서는 CMS 개념이 가장 실용적으로 느껴졌다. 카드나 상세 페이지의 틀은 한 번만 만들고, 내용만 바꿔 여러 콘텐츠를 자동으로 생성하는 방식은 앞으로 포트폴리오를 정리할 때 정말 유용할 것 같다. 리스트와 상세 페이지가 연결되는 구조까지 보면서, 이제는 단일 화면을 만드는 것보다 콘텐츠가 쌓이고 관리되는 구조를 함께 생각해야 한다는 걸 배웠다. 마지막에는 Figma to Framer, HTML to Framer 같은 팁도 보면서, 작업 도구 사이를 더 유연하게 연결하는 방법까지 엿볼 수 있었다.

수업 외에는 디자인 레퍼런스도 함께 살펴봤다. 디자인어스의 토픽에서는 스크롤 시 타임딜 정보를 어떻게 노출할 것인가를 A/B 방식으로 비교하고 있었는데, 같은 정보라도 어디에 어떤 방식으로 보여주느냐에 따라 사용자가 받는 인상이 달라진다는 점이 흥미로웠다. 상단에만 노출하면 화면이 더 깔끔하고 콘텐츠 흐름을 해치지 않지만, 스크롤 중에도 고정해서 보여주면 긴박감은 더 강해질 수 있다. 결국 UI는 ‘무엇을 보여줄까’보다 ‘언제, 어디서, 얼마나 계속 보이게 할까’를 결정하는 일이라는 걸 다시 느꼈다.

국내 앱 사례를 찾아본 것도 의미 있었다. 올리브영은 앱 소개에서 빠른 수령 경험인 오늘드림을, 에이블리는 오늘출발을 강조하고 있었고, 패션 by Kakao는 SALE 탭의 타임특가를 전면에 내세우고 있었다. 숫자 카운트다운을 크게 보여주지 않더라도, 국내 서비스들은 이렇게 언어와 구조 자체로 ‘지금 사야 하는 이유’를 설계하고 있다는 점이 흥미로웠다. 오늘 레퍼런스를 보면서, 긴박감은 꼭 타이머 숫자로만 만드는 것이 아니라 배송, 특가, 실시간성 같은 메시지 설계로도 충분히 만들 수 있다는 걸 배웠다.

오늘은 화면을 만드는 법을 배운 날이기도 했지만, 그보다 더 크게는 디자인이 사용자 유입, 전환, 운영, 데이터까지 이어지는 구조 안에 있다는 것을 배운 하루였다. 예전에는 결과물 중심으로 봤다면, 오늘은 점점 “이 화면이 왜 필요한가”, “이 설정은 어떤 역할을 하는가”, “이 정보는 왜 여기 보여야 하는가”를 같이 생각하게 됐다. 조금씩이지만 정말 ‘만드는 사람의 시선’으로 넘어가고 있다는 느낌이 들어서 좋았다.