2023년 7월 2일 일요일

웹페이지 덜 힘들여서 만들기 - Figma, Framer

항상 통빡으로 들이밀면 몸과 마음이 고생한다.

그래서 회사에서 진행하는 방식처럼

기획 -> 마크업 -> FE & BE 순으로 나름의 제작 절차를 구성하면 덜 힘들지 않을까 싶었다.

그런데 기획이라는건 사실 나 혼자 개발하는거라 머릿속에 있어 따로 문서화 할 필요는 없고, 웹페이지 그림 그리는 것부터 바로 시작하면 되기 때문에 Figma 를 사용해보기로 했다.

Figma


Figma For Beginners 1~4 를 먼저 공부했다.

웹페이지를 만들어봤다.

디자인에 대한 감도 별로 없고, 피그마 기본 기능만 알고 있었기 때문에 엄청난 공수가 들어갔다.

Figma 프로젝트


사내 해커톤을 진행하며 팀원들과 원활한 대화를 위해 Figma 로 목업을 만들어보았다.

이미 있는 사내 서비스를 참고하였기 때문에 디자인 창의력은 많이 필요하지 않았다.

해커톤을 진행하며 필요한 기능과 용어를 그때그때 마구 검색해서 알게 되었다.

가끔 이런 긴장감 있는 상황에서 빡통으로 찾아내는 것도 필요하다.


내가 피그마를 잘 못써서 그런 것 같은데, 노가다를 두 번 해보니 이게 맞나 싶은 생각이 점점 들었다.

Framer


우연히 Framer 를 알게 되었다. 


Framer 를 사용하면 보여지는 모습 뿐만 아니라 컴포넌트 간의 상호작용까지 프로토타이핑 할 수 있어 FE 개발자와 추가 커뮤니케이션 없이도 협업이 가능할 정도라고 한다.

그래서 이걸 공부하는 중이다. 

weworkremotely.com 홈의 마크업을 따라해보았다.



모바일 뷰가 필요하므로 햄버거 메뉴를 어떻게 만드는지 찾아보았다.




Framer 는 확실히 동적인 기능 위주의 강의가 많은 것 같다.


통빡을 덜 쓰려면 뭐든 공부를 해야 한다.

댓글 없음:

댓글 쓰기