Framer로 숙박 사이트 만들기 실습
- 1. 프레이머(Framer) 강의 수강 완료
- 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 현재 글
- 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 완료
- 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
- 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 완료
- 6. 튜터 서면 피드백 완료
- 7. 버그픽스 준비중
일단 이만큼 했다.
https://sharp-walkthroughs-813358.framer.app/
디자인에 욕심 나서 별짓거릴 다함.
데이터 개수 모자라서 그리드 덜 차는 게 보기 싫어서 CMS 데이터를 28개나 만들어 버렸다.
팀플레이
프레이머 강의는 실습 없이 듣기만 하고 오늘이 첫 실습이라 처음에 헤맸는데, 팀원들과 같이하니 금방 적응할 수 있었다.
처음엔 CMS Collection을 가운데로 놓고 싶은데 킹 받게 자꾸 우측에 빈 공간이 생겨서
(실 구현이 목적인 툴이라 div 쌓듯 쌓는 것 같긴 했는데 그래도 html css로 가운데 정렬 가능하잖아!!!)
Grid를 하냐 Stack을 하냐 다 눌러 보다가 팀원 분들께 도움 요청.
미라님이 알려주신 대로 해봤는데 AI 생성된 결과가 달랐어서 그런지 뭔가 헤맸고...
못해먹겠다 꿍얼거리다가 열받아서 그냥 워크샵 지우고 수동으로 하나하나 만들었다.
하위 페이지별로 탭 선택상태를 다르게 설정하는 문제에서는 다같이 3시간 정도 헤맸는데, 내가 방법을 찾았다! 우하하.
일단 그렇게 제일 걸리던 부분을 넘어가니까 진도를 나갈 수 있었다.
팀원들 모두 돌아가면서 도와주고 거의 막바지까지 왔다 ㅋㅋㅋ
종호님이랑 미라님 때문에 진짜 웃다가 눈물 흘렸는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
(맥락을 먼저 설명하자면 종호님은 뭔갈 만드실 때 멀티플레이가 안되셔서 우리가 하는 말을 잘 못들으심)
처음엔 해연님이 뭔가를 해결하셔서 우리한테 전부 다 알려주시는데
나랑 미라님이 따라해서 해결을 봤다. 그래서 다음 스텝으로 넘어가려고 하니까
갑자기 종호님이 '뭐라고요?'하고 뒷북 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
여기서부터 웃겼는데
미라님이랑 해연님한테 저 탭 선택상태 이슈 해결법을 zep으로 보여드리면서 공유하고,
두분 화면을 보면서 가르쳐 드렸는데,
한 차례 난리가 지나가고 종호님이 또 뒷북으로 '어떻게 한다고요?' ㅋㅋㅋㅋㅋ
이때부터는 그냥 너무 웃기기 시작했고 ㅋㅋㅋㅋㅋ
종호님 화면 공유하라고 해서 보니까
분명 종호님이 발제 문서 따라하셨다고 했는데 다르게 되어있어서 2차 빵터짐,
아바타 게임마냥 조종해서 클릭을 시키는데 종호님도 웃기니까 자꾸 엉뚱한 곳 클릭하고
내가 웃겨서 막 소리 지르니까 종호님이 더 웃겨서 더 고장나고
나는 말도 제대로 못하고 웃겨서 울고 미라님 해연님도 울고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
(하지만 꿋꿋하게 가이드 했다
"전체 안에 전체를 클릭하세요
아니 전체 안에 있는 전체를 클릭하세요
아니 더블 클릭 말고 클릭하세요!!!!!
클릭!!!!!!!!!")
그러다가 미라님이 종호님 가르쳐 드리는데 종호님이 또 "뭐라고요?"하니까
미라님이 극대노하심 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
미라님 빼고 (사실 미라님도 포함해서) 다 웃겨 죽음 ㅋㅋㅋㅋㅋㅋㅋ ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
그리고 이게 조종당하다 보면 안 그러던 사람이 바보가 돼서
오른쪽 왼쪽도 헷갈리는 지경에 이른다...
그런데 또
미라님 해연님이 헤매던 걸 종호님이 해결하셨다.
돌아가면서 계속 해결 ㅋㅋㅋㅋㅋ
와중에 유주님은 네트워크 이슈로 파일 몇 번 날리시고 ㅜㅜㅜㅜ
다사다난했는데...
진짜 팀원들과 함께여서 너무 재밌고 웃겼다.
해결한 줄 알았는데 아닌 것도 진짜 많았음.
"어 됐어요!!!! ... 아 안되네?" 무한반복 ㅋㅋㅋㅋㅋ
우리 조 Framer QnA
Link Style에서 Fill을 설정하면 그 색은 모든 a태그의 색에 우선한다
뭐 하시다가 뭔가가 건드려졌는지 텍스트 컬러의 Fill을 바꿔도 색이 안 바뀌고
그래서 Link Style을 수정하셨더니 링크가 걸린 모든 텍스트의 색이 바뀌어버렸다.
그래서 이것저것 시도하다가 Link Style의 Fill을 삭제해보시라 했더니 해결.
추측컨대 Link Style은 HTML a 태그 디폴트컬러인 것 같은데... 또 새로 배움.
워크샵(AI) 생성결과가 교안과 다름
프롬프트가 같은데 워크샵 생성결과가 다르게 나온다고 하셔서
이런 AI는 '다음에 올 법한 결과값'을 랜덤으로 구성해주는 거라 돌릴 때마다 다르다고 알려드림.
Layout Template
갑자기 두분이 레이아웃 템플릿이 두개라고 하시는 것이다?!
헤더 우클릭 후 Create Layout Template해서 만든 다음
푸터 클릭해서 Add to Layout Template을 해야 하는데 또 Create를 하셔서 레이아웃이 고장났던 거였다.
(나도 처음 레이아웃 템플릿 만들 때 똑같은 실수함 ㅋㅋㅋㅋㅋㅋ 사고 회로 다 거기서 거기다...)
나의 Try&Catch들...
CMS Collection Property 두 줄이어도 밀리게
워크샵이 만들어준 프로퍼티는 제목이 길어서 두 줄이 되면 말줄임표로 잘라내는 구조였다.
그 텍스트 양 얼마나 된다고... 다 보여달라고 프롬프트 넣어서 고쳤는데
워크샵으로 수정하는 거 귀찮아서 그냥 새로 만듦.
그랬더니 제목에 따라 프로퍼티 스택사이즈가 달라지면 그리드가 구겨지는 거였다.
검색 후 Masonry를 Yes로 바꿔 해결.
탭 디자인 변경
교안에서는 /seoul, /hot 같은 하위페이지를 만들어서 하위페이지마다 탭별로 선택된 버튼을 다르게 하라고 지시되어 있었다.
그런데 교안에서 제공되던 탭은 페이지 이동 없이 (동일 페이지에서) 단순 CMS 필터링 변경만 적용되는 디자인인 느낌이었다.
그래서 레퍼런스들을 참고하여 좀더 페이지 이동스럽게 바꾸어보았다.
CMS 갤러리 필드 적용
PDP에 들어가면 사진 하나만 띨롱 나오는 게 좀 싫어서,
여러 장의 사진이 PDP에 노출되게 하려고 처음에는 Image 필드를 추가하려 했었다.
근데!
갤러리라는 필드가 있길래 CMS에 추가했는데 막상 실제로 어떻게 쓰는지를 모르겠어서 헤매다가 공식 영상 보고 따라했당.
갤러리 필드는 optional로 해서 사진이 안 채워져 있으면 갤러리 필드 자체가 노출 안되게 했다.
Framer Updates — CMS Galleries
We’re excited to introduce the Gallery Field in the Framer CMS. With this update, you can now include multiple images in a single field, removing the need to add a separate field for each photo and resulting in a significantly tidier CMS detail view. Aft
www.framer.com
근데 갤러리 필드의 그리드는 좀 한정적인 것 같다.
Masonry를 적용하면 height가 극단적으로 작아져서 아예 안 보이게 되어버리고,
뭘 건드려도 크게 고장남.
갤러리에 사진이 3개일 때 그리드를 바꾸어준다든가 그런 기능을 쓰고 싶었는데
컴포넌트의 Variable에 그리드 컬럼 수를 적용할 수는 없더라...
커서 커스터마이징
딱히 연결할 페이지나 팝업이 없어서 그대로 냅둔 프레임이 있었는데
커서를 지정해서 마치 클릭할 수 있는 것처럼 할 수 있었다.
물론 뭐 이건 프레이머가 의도한 사용법은 아니고,
UX적으로 더 잘 안내하거나 아니면 좀더 유니크한... 경험을 선사하기 위해 사용하면 될 것 같다.
CMS 필드에 계산을 적용할 수 있는가?
박 수를 계산해서 보여주고 싶어서 cms 필드에서 계산이 가능한지 찾아봤는데, 안 된다고 한다ㅜ
잡다구리
