🍎 오늘의 진도
1일차 - 이론 & 요소 만들기 : 프레이머 ✔️
2일차 - 이론 & 랜딩페이지 만들기 ✔️
3일차 - 랜딩페이지 셋팅 & 나만의 포폴 사이트 만들기 ✔️
4,5일차 - Next Level Challenge
🍎 오늘의 학습 - 랜딩페이지 🍎
📌 사용자 정보 받는 방법 📌
사용자 데이터 받기 (Mail / Google Sheet) → 전환율에 직접적인 영향
우리가 만든 폼에 사용자 정보를 받는 건, 단순한 수집이 아니라 서비스를 기다리는 사용자와 연결을 시작하는 접점
📌 SEO란? 📌
SEO(Search Engine Optimization) 설정 = 검색엔진 최적화
네이버나 구글에 어떤 키워드를 검색했을 때, 여러분의 웹사이트가 더 위쪽에, 더 잘 보이게 만드는 모든 방법
📌 나만의 포트폴리오 사이트 만들기 📌
CMS(Content Management System)
한 번만 디자인 틀(카드, 타이틀 등)을 만들고, 내용(텍스트, 이미지 등)은 데이터만 바꿔주면 여러 개의 콘텐츠가 자동으로 생성
📌 랜딩페이지 실습 📌
도전과제 할거로 대체해서 가져오겠다! 물론, 제출은 못 할거다
🍎 가장 많이 나온 질문 🍎
📌 Q&A 📌
Q1) Ticker를 모바일에서 폰트 조정하고 싶어요.
- A1) Framer에서 Ticker 컴포넌트 선택 후 breakpoint를 Mobile로 전환하면 Typography 패널에서 폰트 크기를 독립적으로 조정할 수 있다.
Q2) Assets을 모바일에서 섬세하게 조정할 수 있는지?
- A2) 가능하다. Breakpoint별로 Asset의 크기·위치·패딩을 각각 독립적으로 오버라이드할 수 있다.
Q3) 데스크탑에서 1200px으로 작업하는 이유는?
- A3) 일반적인 데스크탑 화면(1280~1440px)에서 좌우 여백을 확보하면서 콘텐츠를 안정적으로 담을 수 있는 표준 최대 너비이기 때문이다.
Q4) 그 안에 스택을 960px로 작업하는 이유는?
- A4) 1200px 캔버스 안에서 좌우 각 120px의 여백을 확보해 콘텐츠가 화면 끝에 붙지 않고 가독성과 레이아웃 균형을 유지하기 위한 표준 컨텐츠 너비이기 때문이다.
Q5) 바로 배포했는데 제가 작업한게 안보여요.
- Q5) Page -> Home에서 작업하기
Q6) AI Workshop
- Q6) 프롬포트를 작성하면 워크숍이 알아서 코드를 짜주는 기능이다. 코드를 짜면 에셋에 들어간다.
Q7) 나의 작업 다른 사람에게 공유하는 방법
- Q7) Share 링크 공유 / Publish(배포) 링크 공유 / 팀 협업 초대(무료시, 최대 3명)
* 용어 *
Ticker : 텍스트나 이미지가 가로로 무한 반복해서 흘러가는 롤링 배너 요소
ex) 뉴스 속보 자막이나 브랜드 로고가 옆으로 계속 흘러가는 것
Breakpoint : 화면 크기에 따라 레이아웃이 바뀌는 기준점
ex) "768px 이하면 모바일 레이아웃으로 전환" 하는 식으로, Desktop / Tablet / Mobile 각각 다른 디자인을 적용할 수 있는 분기점
🍎 느낀점 & 내일 할 일
ㅋㅋㅋㅋㅋ오늘 연블리랑 수다 나누다가 새로운 공간 소개해줘서 노는데 다른 팀원들을 만났다(다른 사람도 아니고 같은 팀원을 만난게 킬포🤣) 재블리랑 동블리가 소개해준 바다거북이스프 게임을 했는데 넘 재밌어서 2시간 순삭,,,완전 취저 당했다👍🏻🫰🏻
(이들의 상상력 진짜 아무도 못 따라가🙂↕️)
