카테고리 없음

[Today I Learned] 웹플로우로 랜딩페이지 제작 - 24.12.17

somlogg 2024. 12. 17. 20:58
화요일 - 목표
📍서비스 프로덕트 선정하기
📍피그마 - 디자인 시안 그리기
📍웹플로우 - 구조잡기

👀 ~(˘▾˘~) ~(˘▾˘)~ (~˘▾˘)~

~~~wavve~~~

 

▶️ 서비스 선정하기

어제 발제된 과제에서 나는 웨이브를 선택했다. 당근페이가 조금 쉽고 웨이브랑 노션이 조금 더 어려운 편이었다. 뭔가.. 제일 쉬운걸 하고싶진 않은 나의 얄량한 자존심! 그리고 아예 가상의 페이지를 만들거나 제공된 시안들말고 다른걸 찾아서 할 수도 있었지만 웨이브로 했다ㅋㅋㅋㅋ

 

▶️ 디자인 시안 그리기

피그마에서 디자인 시안을 잡고 웹플로우를 제작하라고 했는데 나는 전에 해진님이 알려준 플러그인으로 쇽샥 불러왔다. 플러그인을 불러오니까 폰트랑 컬러 시스템도 같이 적용되서 너무 좋았다..🥹 roRnl 플러그인..! 

플러그인이 완벽하지 않다보니까 개발자 모드로 보면서 패딩이나 마진값도 더 세세하게 변경해줬다.

정리도 플러그인으로 빠르게! 그래도 구조를 알아야 웹플로우에서 만들 수 있어서 프레임이 어떤식으로 되어있는지 분석해보고, 또 플러그인으로 디자인 시스템도 정리했다. 

 

▶️ 웹플로우 구조잡기

이거 할 때 당근..할껄.. 서른마흔다섯번정도 후회했다. 당근은 섹션에서 딱 오른쪽 왼쪽 블럭으로 나누어져 있어서 좋던데 얘는 좌우 슬라이더 버튼도 있고 넘어가는 페이지네이션도 있고.. 플로팅 버튼도 있었다!! 네비게이터 이름도 다 작성했다. 이런거 은근 좋아해서 재밌었다ㅋㅋㅋㅋ 

 

4시에 젭 하이라이트로 보강 설명도 해주시고 노션에 보강자료도 따로 올라와서 플러그인으로는 깨지는 사진들 다 다시 저장했다. 서비스 섹션에 화면 좌우로 슬라이드 되는거 할지말지는 아직 모르겠지만 일단 사진은 다 저장완. 옛날에는 우클릭 저장 안되서 저장 못해서 검색했을 땐 저 개발자모드에 수많은 코드를 보고 조용히 뒤로가기를 했는데 이제는 그나마 코딩 배워서 뭐가 뭔지 읽을 줄 안다. 이런게 정말 재밌는 부분인 것 같다.

 

💭 

내일은 베리어블 잡고 디자인 넣고 인터렉션까지 빠르게 빠르게 해야지!! 오전에는 집중을 잘못했는데 내일은 열심히 집중하자 아자자