오늘 한일
-코딩 주차 발제 참여(10시)
-코딩 1일차 실시간 강의
-코딩 1일차 강의 복습 및 정리, 실습 진행
내일 할일
-코딩 2일차 실시간 강의
-코딩 2일차 강의 복습 및 정리, 실습 진행
[코딩 1일차] ⭐Framer 이론 및 요소 만들기
랜딩페이지 : 사용자가 광고, 검색, 이메일, SNS 링크 등을 클릭한 뒤 처음 도착하는 페이지
랜딩페이지의 목표 : 사용자 행동을 유도하는 것(설계된 목적형 페이지)
랜딩페이지 중요한 이유
- 브랜드의 첫 인상 결정
- 방문자는 평균 3초 안에 이탈 여뷰 결정
- 디자인이 허술, 메시지가 애매하면 믿을 수 없다는 인상으로 곧바로 이탈
- 전환율에 직접적인 영향
- 사용자는 이걸 왜 해야 하지라는 질문을 끊임없이 함
- 랜딩페이지는 이 질문에 논리적+시각적으로 설득해야 함
- 설득에 실패하면 클릭 없이 전환 실패
랜딩페이지의 구조->스토리텔링
- Hero->공감->솔루션->기능->신뢰->행동 유도
랜딩페이지 핵심 구성 요소
- 헤드라인 : 가치 제안(관심 끌기)
- 서브헤드라인 : 핵심 메시지 보충 설명
- 비주얼 : 제품/서비스 이미지
- CTA : 행동 유도 버튼
랜딩페이지 제작 순서
- 목표 설정 : 랜딩페이지의 목적 정의(가입/다운로드/구매)
- 타겟 설정 : 어떤 사용자가 랜딩페이지에 방문할지 명확하게 정의
- 와이어프레임 : Hero->공감(문제인식)->솔루션->기능->CTA 순서로 설계
- 디자인 : 레퍼런스 찾기, 텍스트/이미지/제품 스크린샷 등 컨텐츠 구체화
💡Question
- 랜딩페이지와 일반 홈페이지의 다른점은?
- 랜딩페이지->행동을 유도하여 전환하는게 중요
- 모든 서비스에 랜딩페이지가 꼭 필요한가?
- 모든 서비스에 필요하지 않음 그러나 마케팅 효율을 높이고, 사용자를 설득하고 싶다면
만들게 됨- CTA 버튼은 꼭 여러 번 넣어야 하는가?
- CTA 버튼이 너무 많을 경우 사용자는 헷갈리게 됨
- 메시지를 하나만 전달한다 생각하고 그 하나의 CTA를 전략적으로 배치(꼭 하나의 경우가 아닐 수 있음, 메시지는 하나!)
Framer
: 웹사이트를 디자인하고 디자인이 곧바로 사이트가 되는 툴
- 실무에서 결과물을 만들 수 있는 검증된 툴
- 향후 Figma Site 등 새로운 노코트 툴에도 빠르게 적응 가능
Framer 강점
- 빠르게 디자인하고 웹으로 변환
- 개발자 없이 빠른 MVP/랜딩페이지 제작
- 스타트업, 1인 브랜드, 프로토타입에 최적
- 기업 블로그 제작 최적(CMS->컨텐츠 관리 시스템)
개발자가 필요한 경우
- 복잡한 기능(로그인, 결제, 사용자 데이터 처리 등)
- 대규모 웹사이트(수십~수백 페이지 규모)
- 기업 전용 솔루션 통합(맞춤형 백엔드 개발)
📍Framer는 빠른 구현과 테스트에 적합
Framer 알아야 하는 개념
- Frame : 레이아웃의 기본 단위, 요소들ㅇ르 담는 박스
- Stack : 자동 정렬 시스템
- Width Fixed : 요소의 크기를 수동으로 지정하고 고정하는 프로퍼티
- Width Fit : 콘텐츠에 맞춰 사이즈를 줄이는 프로퍼티
- Width Fill : 부모 요소의 너비를 가득 채우는 프로퍼티
- Position Fixed : 위치 고정
- Position Absolute : 자동 정렬에서 벗어나 자유롭게 위치 지정
웹의 3대 언어
- HTML : 웹페이지의 구조를 만드는 언어
- CSS : HTML에 디자인을 입히는 언어
- JS : 웹페이지에 동작을 넣는 언어
Position 속성
- Relative : 화면 흐름대로 쌓임(Default)
- Absolute : 원하는 곳에 자유롭게 붙일 수 있음
- Fixed : 화면에 고정
- Sticky : 스크롤하다가 특정 위치에 도달하면 고정
📍Position을 잘 사용하면 인터랙션과 UI의 레벨 향상 가능
📌실습 내용 정리
버튼을 하나 만들면 Hover, Pressed 상태가 바로 연결되어 만들 수 있고
적용하고 미리보기를 누르면 자동으로 상태가 바뀌는 걸 볼 수 있는게 가장 신기하다🤓
UXUI 도전!!!