SERIES
Framer로 숙박 사이트 만들기 실습
- 1. 프레이머(Framer) 강의 수강 완료
- 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 완료
- 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 현재 글
- 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
- 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 완료
- 6. 튜터 서면 피드백 완료
- 7. 버그픽스 준비중
오늘 한 일 (AI 안씀)
- 가장 나중에 하려고 하위페이지 전부 삭제함.
스테일리 Stayly
머무르고 싶은 기억들, 스테일리
stayly.framer.website
- 스크롤에 따라 배리언트 바꾸는 기능. 에어비앤비에서 스크롤 중간부터 id태그 이동용 navbar를 보여주길래 제미나이 멱살을 짤짤 흔들었더니 알려줬다. (근데 일부 페이지에선 적용이 잘 안됨. 뭔가 조건이 cms 데이터에 물려있는 것 같은데... 내일 다시 해봐야겠당)
- 시설, 특성 정보 cms에 토글로 추가해서 탭 만듦.
- 해당 pdp 에 있는 숙소와 같은 지역 숙소를 추천 영역에 뜨게 만듦.
- 숙소가 국외면 추천영역 이름이 '같은 대륙도 살펴보세요', 숙소가 국내면 '근처의 다른 숙소'가 되게 함.
- 푸터 뎃탑&태블릿용, 모바일용 편하게 링크 다양화하는 방법 알아냄. 스택으로 쌓아서 가로세로만 바꾸면 됨. (오늘 종호님 미라님 알려드린 부분)
- 피그마에서처럼 공동작업하기. 팀원분 거 수정해봄.
- 이미지에 hover하면 살짝 확대되는 인터랙션.
- 지도 추가하고 location에 연결.
- 글라스모피즘 스티키 nav bar 구현.
- 스티키의 원리 이해함.
- 팀원분 거 계층구조 때문에 꼬인 거 풀어드림.
- 좀더 예쁜 무료링크로 바꿈. (프레이머 내장기능)