Framer로 숙박 사이트 만들기 실습
- 1. 프레이머(Framer) 강의 수강 현재 글
- 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 완료
- 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 완료
- 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
- 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 완료
- 6. 튜터 서면 피드백 완료
- 7. 버그픽스 준비중
Framer라는 노코드 툴을 통해 코드 없이도 실제 서비스 수준의 웹사이트를 만들 수 있다는 것을 배웠다. Framer는 디자인, 퍼블리싱, 분석까지 하나의 툴 안에서 가능한 올인원 도구이며, 낮은 학습 곡선과 빠른 프로토타이핑이 가능하다는 점에서 MVP 제작에 특히 적합하다. 다른 노코드 툴들과 비교했을 때 인터랙션 구현과 CMS 연동에서 강점이 있다는 것도 알게 되었다.
전반적으로 피그마와 html, css, 제플린을 한데 합쳐놓은 듯한 느낌의 툴이었다. 그런데 프레이머를 제대로 이해하려면 html과 css에 대한 이해가 선행되어야 할 것 같은데 (그렇지 않으면 구조가 개판...이 될지도) 괜찮나? 싶었다. 물론 노코드 개발 툴인만큼 개발에 대한 지식 없이도 어느정도 구조를 맞출 수 있게 설계된 느낌이긴 했다. 다만 프레이머 좀 배우고 나서 프레이머를 만질 줄 아니까 개발을 할 줄 안다고 착각하게 될까 봐 스스로 좀 걱정된달까.
챕터 1에선 Framer의 전체 인터페이스 구조를 배웠는데, Workspace → Project → Page → Canvas → Breakpoint로 이어지는 계층 구조가 좀 생소했다. 브레이크포인트는 뭐랄까 좀 개발적인 느낌의 명칭이라...
반응형 웹을 만들기 위해서는 최소 하나 이상의 Breakpoint가 필요하고, 모든 디자인 요소는 반드시 Breakpoint 프레임 안에 있어야 실제 웹사이트에 노출된다고 함.
Canvas와 Frame의 차이를 구분하며 구조적으로 UI를 사고하는 방식도 나왔다. Frame은 레이아웃의 기본 단위이고, 네스팅 구조를 통해 복잡한 UI를 효율적으로 관리할 수 있다고 한다.
레이아웃 구성에서 Stack의 역할도 배웠다. Stack을 사용하면 자식 요소들이 자동으로 정렬되며, Absolute와 Relative Position 여부에 따라 언제 Stack을 써야 하는지 달라진다. (상당히 CSS적 포인트) 또한 Fit Content와 Fill Container 개념을 통해 반응형 UI 동작 방식을 가르쳐주셨는데, 피그마에 있는 fit/fill 속성이 '기능적으로' 왜 있는지를 설명해주는 교두보 역할?을 하는 게 어쩌면 프레이머일수도 있겠다는 생각이.
보다 복잡한 레이아웃을 위해 Grid 시스템을 사용하는 방법도 있는데, 이건 반드시 잘 익혀놔야 할 듯. 피그마의 오토 레이아웃과 비슷하지만 사실 XD의 그리드 기능과 더 잘 이어지는 것 같기도 했다. 그리고 단순한 나열은 Stack, 복합적인 배치는 Grid가 적합.
타이포그래피 파트에서는 텍스트가 디자인 시스템의 핵심 요소라는 점을 다시 한 번 상기했다. 한때 타이포그래피에 빠졌던 때가 있었지... Variable Font와 OpenType 기능을 활용해 웹에 최적화된 텍스트 스타일을 구성하는 방법을 배웠다. 이건 뭐 티스토리 스킨 건드릴 때도 쓰는 것이니 뭐. 가독성과 시각적 위계를 고려한 텍스트 설계의 중요성도 함께 이해했다. 사실 이 부분은 '미학적 디자인'을 경계해야 하는 이유와 함께 설명되었으면 더 좋았을 것 같다.
Framer에서는 텍스트, 프레임, 버튼 등 모든 요소에 링크를 설정할 수 있다는 점을 배웠다. 페이지 이동, 섹션 스크롤, 외부 링크 연결이 가능하며, Scroll Section 기능을 활용하면 부드러운 페이지 내 이동을 구현할 수 있다. -> 사실상 CSS의 아이디 얘기인데, 강의에서 이걸 다 얘기할 순 없으니... 그리고 외부 링크에는 반드시 https://를 포함해야 하고, 링크 충돌을 방지하기 위해 구조를 잘 확인해야 한다고 한다.