[WEB] Figma 클론 과제 UI/UX 분석

2022. 8. 25. 11:46·개념정리/WEB

컬럼 그리드 시스템


  1. Margin
    1. 가로가 좁은 스마트폰 특성상 양쪽 여백이 10px로 좁게 들어갔습니다. 홈 탭의 마지막 카드 콘텐츠는 마진을 넘겨서 보여줌으로서 다음 콘텐츠에 대한 궁금증을 자극하여 가로로 스크롤을 유발하도록 했습니다.
  2. Column
    1. 스마트폰에 맞는 표준적인 컬럼 갯수인 4개를 사용해서 제작되었습니다. 컬럼에 맞게 버튼과 컨텐츠들이 대칭적으로 잘 정렬되어 있습니다.
  3. Gutter
    1. 버튼들 사이에 Gutter는 넓게 주어서 각 버튼을 구분하는 느낌을 주었습니다. 카드 컨텐츠 사이는 버튼보다 좁에 만들어서 각 주제별로 묶인 콘텐츠들이 독립적으로 보이지않게 했습니다.

전체적으로 스마트폰에 잘 맞는 배치를 가지고 각 아이템들이 잘 정돈되어 있다고 판단됩니다. 추가적으로 화면 크기에 변화에 유연하게 대응하는 반응형 웹 디자인까지 구현된다면 좋겠습니다.

 

피터 모빌(Peter Morville)의 벌집 모형


1. 유용성(Useful) : 사용 가능한가?

프로토타입이기 때문에 사용 가능한 기능이 들어있지 않아서 유용성을 가장 낮은 점수인 4점을 줬습니다.

2. 사용성(Usable) : 사용하기 쉬운가?

넷플릭스 UI를 그대로 구현하여 사용하기 편리하게 만들었습니다. 단순하고 직관적인 조작으로 사용자들이 친숙하게 사용할 수 있습니다.

3. 매력성(Desirable) : 매력적인가?

깔끔하고 보기 좋은 UI를 가지고있고, 높은 인지도를 가지고 있는 넷플릭스는 사용자들에게 충분히 매력적이라고 판단했습니다.

4. 신뢰성(Credible) : 신뢰할 수 있는가?

구현이 되지는 않았지만 실제로 구현이 된다면 결함이 없고 서비스를 통해 얻을 수 있는 가치를 분명하기 때문에 중간점수인 5점을 줬습니다.

5. 접근성(Accessible) : 접근하기 쉬운가?

음성안내, 돋보기 등 시력 보조기능과 같은 접근성을 위한 기능 구현이 부족합니다.

6. 검색 가능성(Findable) : 찾기 쉬운가?

내비게이션 바, 검색 창이 잘 갖추어져있고 콘텐츠가 직관적으로 배치되어져 있기 때문에 원하는 기능과 정보를 찾기가 쉽습니다.

7. 가치성(Valuable) : 가치를 제공하는가?

위에서 언급된 모든 요소들을 종합하여 봤을 때 고객에게 충분한 가치를 제공하고 있다고 판단됩니다.

 

저작자표시 비영리 동일조건 (새창열림)
'개념정리/WEB' 카테고리의 다른 글
  • GitHub Action으로 AWS S3에 배포 자동화
  • Lighthouse와 최적화
  • [WEB] 웹 표준 & 접근성
  • [WEB] UI/UX
imKion
imKion
Front-end Developer
  • imKion
    Kion
    imKion
  • 전체
    오늘
    어제
    • 분류 전체보기 (46)
      • 문제 해결 (6)
        • 리팩터링 (3)
      • 회고 (8)
      • 개념정리 (29)
        • JavaScript (10)
        • React (9)
        • Next.JS (2)
        • WEB (5)
        • CS 외 (2)
      • 알고리즘 (2)
        • 코플릿 (1)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JavaScript
    OOP
    프론트엔드
    REACT
    코드스테이츠
    frontend
    typeScript
    회고
    til
    react 18
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.2
imKion
[WEB] Figma 클론 과제 UI/UX 분석
상단으로

티스토리툴바