figma clone(서핏 https://www.surfit.io/)

오늘은 피그마 클론을 진행해보았다. 🔥

• 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다.
  • 페이지 이동이 가능해야 합니다.
  • 스크롤 이벤트가 있어야 합니다.
• 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들어야 합니다.

일단 기본 요구사항을 해결해보고자 했다. 기본이라도 잘 해보자.. 🥲

---

클론 사이트 선정

내가 선택한건 얼마전 알게되었던 서핏 홈페이지였다. 구글 확장프로그램으로 등록되어 크롬을 키면 첫화면에 나오는걸 보다가 반복적인 요소들이 많은것 같아서 작업하기 수월할 것 같다는 생각이었다.(큰 오산이였다..)

서핏 메인 페이지

일단 홈페이지에 들어가서 구경을 하다가 개발자도구를 열어봤다.띠용? 뭔가 신기해.. (프론트엔드 개발자 채용하는 노션페이지로 연결되고 있었다 ㅎ)

서핏 홈페이지 개발자도구

홈페이지를 캡쳐하고 피그마에서 그리드를 12컬럼으로 설정하니 계속 맞지않았다.. 홈페이지 그리드를 알고자 개발자도구에서 확인하니 10컬럼으로  나누어 작업을 한것을 알 수 있었다. (다만, 다 작업하고나서 알았다..)

10 그리드 시스템

컨텐츠 컬럼

---

작업 중

먼저 헤더부분과 좌측 네비 카테고리를 만들고 중앙 컨텐츠가 들어갈 컴포넌트와 인스턴트를 만들어주고 배치를 했다.

카테고리 작업을 하다가 풀리지가 않아서 결국 각 페이지에 나눠서 진행했다.

---

결과물

시간내 작업한 결과는 딱 페이지 이동과 스크롤 기능이였다. 메뉴 처리를 하느라 시간을 너무 잡아먹었다. 결국 각 페이지별로 메뉴를 보여주는게 다른 형태로 처리를 했다. 이전 과제에서 진행했던 아코디언기능이나 드롭다운을 활용하면 쉽게 할 수 있을것 같았는데 제대로 알지 못할 때 진행해서 제대로 처리를 못했던것 같다.
나중에 다시 유투브를 찾아보고 작업해보니 컴포넌트 기능을 제대로 파악할 수 있었다.
작업했던 화면은 6개의 화면에 클릭시 이동되며 보여주는 형태지만 리액트의 컴포넌트 기능처럼 좌측의 카테고리를 누를때마다 중앙의 콘텐츠 내용만 바뀌는 형식으로 바꾸는 작업을 다시 진행해봐야겠다.

---

피터 모빌의 UX 7요소 충족 여부

• 유용성(서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소)
  • 해당 홈페이지는 개발자 및 디자이너 등 채용이나 새로운 기술 등의 블로그를 제공해주는 적합한 홈페이지같다.
• 사용성(본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소)
  • 좌측의 큰 카테고리와 콘텐츠의 카드타입의 다자인을 배치하여 카테고리별 디자인의 동일성으로 크게 불편함 없이 직관적으로 사용할 수 있었다.
• 매력성(사용자들에게 매력적인가에 대한 요소)
  • 새로운 기술이나 개념을 정리한것을 매번 구글에서 일일히 찾아 다니던것을 생각해봤을때 서핏처럼 검증되거나 제대로 정리된 블로그들을 추려서 알려주니 좋은것 같다.
• 신회성(서비스를 믿고 사용할 수 있는가에 관한 요소)
  • 일단 사이트 자체가 어느정도 정리된 블로그만 보여주고 채용관련하여 다양한 분야의 기업이나 구직자들이 개인의 포트폴리오도  공유하며 함께 있는 공간이다 보니 믿고 사용할 수 있었다. 
• 접근성(누구든지 제품이나 서비스에 접근할 수 있는가에 관한 요소)
  • W3C Validation, https://wave.webaim.org/  를 통해 검사를 해봤는데 아직 잘 모르겠다..
• 검색가능성(사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소)
  • 내비게이션바와 검색기능 모두 고정적으로 위치하고 있으며 찾기는 편리했다. 다만 검색시 자동완성 기능은 지원하고 있지 않았다.
• 가치성 (총합하여 고객에게 가치를 제공하고 있는가에 관한 요소)
  • 전체적으로 사이트는 IT관련업계 종사자들에게 충분히 메리트있어 보였다. 새로운게 매일 나오는 시장에서 매번 찾아가며 검색하기보다 인터넷창을 켰을때 눈을 끄는 주제를 클릭하여 새로운 정보를 읽어볼 수 있으며 채용하는 기업 입장에서 신뢰할 수 있는(포트폴리오로 검증한) 구직자를 선택할 수 있는 사이트 같다. 이는 기업이나 사용자 입장 모두에게 가치가 있는것 같다.

---

User flow 그려보기

유저 플로우는 처음 해보는거라 맞는지 모르겠다. 더욱 세분화 되어야 할 것 같다. 로그인 했을경우에도 개인 설정도 따로 있고 커리어 설정도 있으니 더 복잡해질것 같은데 이런경우 페이지를 새로 나누는건지 한 화면에서 다 보여야 하는건지 아직 잘 모르겠다. 글 작성하는게 없는것도 유저플로우 만들어보다가 알게되었다ㅎ. 어떤 기준으로 블로그 글을 서핏 홈페이지에서 나타내주는건지 궁금하다.