Framer로 숙박 사이트 만들기 실습
- 1. 프레이머(Framer) 강의 수강 완료
- 2. 실습① Grid 배치 최적화, 레이아웃 템플릿 수정, 탭 디자인 UI고려, CMS 개별페이지 갤러리 필드 적용 완료
- 3. 실습② Scroll에 따라 Transform Varient, 글래스모피즘 인터랙션 GNB 제작, 숙소별 시설 및 특성 정보 노출 구현 완료
- 4. 실습③ 워크샵과 코딩으로 변수 Override하여 인터랙션 구현하기, 숙박 후기 CMS 구축 및 컴포넌트 제작 완료
- 5. 실습④ 호스트 CMS 구축, 호스트 정보 팝업 구현, 파비콘 세팅, 대륙별 숙소 모아보는 페이지 제작 완료
- 6. 튜터 서면 피드백 현재 글
- 7. 버그픽스 준비중
스테일리 Stayly
머무르고 싶은 기억들, 스테일리
stayly.framer.website
메인 과제는 아니어서 피드백을 안 기다리고 있었는데, 오후에 종호님이 피드백 나왔다고 말씀해주셔서 보니까 나도 미리 피드백이 나와있었다.
원래 과제 피드백을 요약해서 올리는데... 이번 과제 피드백은 짧고 간결한 편이라 어미만 바꿔 기록한다.
완성도
- 숙소 리스트에서 숙소 카드 → 상세로 진입하는 핵심 사용자 흐름이 안정적으로 구현되어 있으며, 페이지 전환 시 사용자가 길을 잃지 않도록 구조가 명확하게 구성되어 있음
- 상세 페이지에서 “위치” 섹션이 지도(위치 안내)까지 포함된 형태로 구현되어 있어, 단순 정보 나열이 아니라 실제 서비스 수준의 완성도를 보여주고 있음
- “숙박 후기” 영역이 프로필/작성일/후기 본문까지 갖춘 형태로 구성되어 있어, 상세 페이지의 신뢰 요소가 잘 마련되어 있음
- 전반적으로 섹션 구성이 촘촘하고(정보→후기→편의시설→예약), 화면의 밀도 대비 가독성이 유지되어 완성도가 높음
우수성
- 지도와 후기까지 포함한 상세 구성은 사용자 의사결정에 직접 영향을 주는 핵심 요소를 잘 짚은 것으로, 과제 범위를 넘어선 제품 관점의 설계가 돋보임
- 후기 영역이 단순 텍스트가 아니라 “작성자/시점/콘텐츠” 단위로 구조화되어 있어, CMS 필드 설계와 컴포넌트 구성 능력이 탄탄하게 느껴짐
- 예약 영역도 인터렉션까지 구현해주신 부분에서 Workshop 활용 능력이 우수하다고 느껴짐
- 전체적으로 ‘따라 만들기’ 수준을 넘어 디테일(위치·후기·연관 숙소)을 실제 서비스처럼 연결해둔 점이 우수함
[Framer] 숙박사이트 만들기 과제 난항 속 순항 중
일단 이만큼 했다.https://sharp-walkthroughs-813358.framer.app/디자인에 욕심 나서 별짓거릴 다함. 데이터 개수 모자라서 그리드 덜 차는 게 보기 싫어서 CMS 데이터를 28개나 만들어 버렸다.팀플레이프레이
urdle.tistory.com
[Framer] 도전과제 + a 까지 95% 완료
오늘 한 일 (AI 안씀)가장 나중에 하려고 하위페이지 전부 삭제함. 스테일리 Stayly머무르고 싶은 기억들, 스테일리stayly.framer.website스크롤에 따라 배리언트 바꾸는 기능. 에어비앤비에서 스크롤 중
urdle.tistory.com
[Framer] Override + Workshop으로 기능 고도화하기
으아니오버라이드가 그 오버라이드였다니...?정보처리기사 공부할 때 배웠던 오버라이드가 프레이머에서 말하는 오버라이드일 줄 몰랐다.머릿속에 있던 지식이 연결되는 느낌 너무 좋아주말에
urdle.tistory.com
[Framer] Override + Workshop으로 기능 고도화하기
으아니오버라이드가 그 오버라이드였다니...?정보처리기사 공부할 때 배웠던 오버라이드가 프레이머에서 말하는 오버라이드일 줄 몰랐다.머릿속에 있던 지식이 연결되는 느낌 너무 좋아주말에
urdle.tistory.com
[Framer] 제출
드디어 과제 제출 스테일리 Stayly머무르고 싶은 기억들, 스테일리stayly.framer.website 컬렉션 리스트 전체에 링크 걸려서 load more 클릭 안되고 다른 곳으로 이동하던 문제 해결해드림오늘 한 거리뷰
urdle.tistory.com