소개
시도하고자 했던 것과 그 이유를 알려주세요.
클로드로 랜딩페이지 만들기로 해오다가 커서로 변경하면서 효율성 2배 올라갔고
랜딩 페이지를 입코딩으로 할 수 있다는 점에 매료되었다
다 그렇듯이 프롬프트를 잘 준비해야 디자인 측면에서 훨씬 더 좋은 결과가 나온다는 것을 알게됨
홈페이지는 회사내 개인을 대표하기에 오랜 시간을 들려 제작할 수 있는 반면
랜딩 페이지는 리드 수집 등 마케팅 용도로 사용하기에
홈페이지와 달리 빠른 시간에 완성해야 하는 것이 중요 한 인 요소임
그래서 랜딩페이지의 디자인 요소 및 제작 시간이라는 2가지 측면을 고려했을때
커서와 이미지 툴의 강자인 Figma 두가지 툴의 장점을 선택하는 것이 중요
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
피그마는 랜딩페이지 작성하는 기본 기능과 템플릿 사용
커서나 클로드는 디자인 초보자는 하기 힘든 기능 구현
페이스북 광고나 와디즈 펀딩 랜딩페이지를 참고하면서 필요한 기능 물색
결과와 배운 점
커서로 랜딩 페이지를 만들 때는 역할 설정과 특정 기능에 대한 명칭 중요
플로팅 배너, 카운트 다운, 오토 슬라이드, 파티클
피그마는 상세페이지 작성 기본 기능 및 플러그인
상세페이지 : 이미지+문구,
오토레이아웃 : 좌우 상하 자동 배열
템플릿 이용 : 콤포넌트 결합
피그마 플러그인 :
자동화 기능 : 폰트, 색, 등 스타일 지정 및 일괄 변경, Find and Replace Styles
Html to Design : 특정 웹페이지를 그대로 복사, 콤포넌트 사용 가능시 특히 유용
Unsplash : 다양한 이미지 사용
다양한 아이 콘 : Feather icons, Iconify, Memotion
기타 : 포토피아 : 사진 편집, 구글시트 싱크, RemoveBG
커서 기능 구현
사진 이미지 캡쳐를 이용 구현 : 난이도 높음, 실패
챗지피티에 사진을 주고 프롬프트 작성
받은 프롬프트로 커서에서 이미지 구현
파티클, 오토 슬라이드, 카운트 다운, 플로팅 배너(파티클, 오토슬라이드 기능)
피그마 템플릿을 적극 이용한 랜딩페이지
도움 받은 글 및 교훈
피그마 기능 관련 : 유튜브 강좌 : 피그마 사용법, 피그마 상세페이지, 피그마 플러그인
랜딩페이지 참고 : 와디즈, 탈잉
교훈 : 선택과 집중
커서 사용에 너무 많은 시간 소모
랜딩 페이지 작성에 있어 디자인 및 제작 시간 두가지 토끼를 잡기위해
피그마는 기본 사용법 및 플러그인, 템플릿
커서는 디자인 초보들이 구현하기 힘든 기능