figma(2)
-
<원티드>를 figma로 클론해보자! (2)
상단은 나, 하단은 페어님이 맡으셨다! 배운 점 및 어려웠던 점! 캐러셀 패턴을 사용해보았다. 유튜브에서 참고해서 만들어보았다! 다양한 기능을 구현할 수 있어 재밌어 보이긴 했지만, 직접 자바스크립트로 코딩을 했을 때는 어떤 모습일지 더 궁금했다! 파일, 폴더명의 중요성! 보여주기 부끄럽지만 클론에 사용했던 레이어이다. 기능별로 묶어놓지 않았고, 이미지와 도형에 명확한 이름을 달지 않다 보니, Lo-fi로 작업 후 Hi-fi로 변경하는 과정에서 이게 뭐지? 어떤 걸 수정해야 하지? 하면서 진행했다. 지금 진행하고 있는 쇼핑몰 클론에서도 css를 작성하면서 작성했던 위치를 찾기 어려웠었다. 개인 작업 뿐만 아니라 협업을 위해서라도 규칙을 정하고 나중에 수정하기 쉽도록 작성해야겠다고 생각했다!
2022.08.25 -
<원티드>를 figma로 클론해보자! (1)
어쩌다 원티드 원티드라는 사이트는 페어님이 소개해주셨다! 그 전에 내가 생각하던 목록은 OKKY, 잡플래닛, 인프런 등이었다! 원티드를 분석해보자! 디자인 원티드 사이트에서 인상적이었던 것은 직관적이고 미니멀한 디자인이었다. 태그와 슬라이드를 이용해서 직관적으로 카테고리를 넘어갈 수 있었다. 도움말 및 설명 문서 hover 이벤트가 발생했을 때, "관심 태그를 등록하시면 이벤트가 오픈되는 즉시 카카오톡으로 알려드릴게요"라는 설명이 뜬다. 버튼을 눌렀을 때 팝업창으로 볼 수 있다. 직관적으로 동작해서 좋았다. 피그마는 어때 사실 이전에 어도비 XD로 프로토타이핑을 진행해봤었고, 이번 수업의 일환으로 figma를 배우게 되었다. 플러그인 연동 덕분에 보다 편하게 느껴졌다. 최근 HTML, CSS, javas..
2022.08.25