최종 제출물
![](https://velog.velcdn.com/images/mmmdo21/post/0f5c5f23-a0f2-4c9d-88df-5b1ba994df2a/image.png)
과제1 Figma 클론
여기서 클론이란 Figma를 사용해서 기존 운영중인 서비스의 화면의 디자인을 따라서 만들어 보는 것을 의미함
- Figma의 사용 방법을 익힌다.
- Figma로 프로토타입을 제작할 수 있다.
![](https://velog.velcdn.com/images/mmmdo21/post/5dd58757-081b-488c-88e2-55102d509299/image.png)
![](https://velog.velcdn.com/images/mmmdo21/post/4eb1f637-2cae-419e-a8fa-0a556792524f/image.png)
![](https://velog.velcdn.com/images/mmmdo21/post/26f527c7-2767-411c-8c9a-e15c05f78da0/image.png)
과제2 UI/UX 분석
문도연
🏡 분석 대상
![](https://velog.velcdn.com/images/mmmdo21/post/68c3d5a5-2dbf-4ea4-a133-bd83e9cbd83c/image.jpeg)
*메인 화면
![](https://velog.velcdn.com/images/mmmdo21/post/b6e77579-1976-4135-8eb7-e93188ead5ce/image.jpeg)
🌈 UI 디자인 패턴
1. 캐러셀(Carousel)
- 페이지의 한정된 공간에 많은 사진을 띄워서 보여줄 수 있다.
- 캐러셀을 통해 다양한 인테리어 이미지를 노출하여 예쁘게 꾸민 집을 공유하고 싶은 유저들과 이를 따라하고 싶은 유저들의 니즈를 충족시킴
- 광고 배너 이미지, 최근 본 상품의 인기스타일링 사진, 인기 동영상, 인기사진 top10 등
예시1) 광고 배너 이미지
![](https://velog.velcdn.com/images/mmmdo21/post/439a768c-4aa2-4333-91a4-d5980d5aab40/image.png)
예시2) 최근 본 상품 인기 스타일링 사진
![](https://velog.velcdn.com/images/mmmdo21/post/3b0f8ca1-91d8-4b45-b7f4-10018f531acc/image.png)
예시3) 카테고리별 상품 찾기
![](https://velog.velcdn.com/images/mmmdo21/post/b31526d5-78c2-4382-beb5-b3e359a41ed8/image.png)
2. 아이콘
- 아이콘은 사용자에게 직관적 정보를 전달하기 위해 사용되는 간단한 이미지로, 컨텐츠를 더 잘 전달하는데 도움이 된다.
- 인테리어 이미지에 (+)아이콘을 누르면 해당 상품 판매 페이지로 바로 이동할 수 있다.
- 아이콘을 통해 유저가 해당 상품에 대해 더 자세한 정보를 조회할 수 있도록 유도하고 구매 결정으로 이어지게 만든다.
![](https://velog.velcdn.com/images/mmmdo21/post/3352e26c-b401-44e6-98dc-23bbe8e5028d/image.png)
🌍 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부
1. 시스템 상태의 가시성 : 사용자에게 적절한 피드백을 제공하는가?
로딩 화면을 제공함
![](https://velog.velcdn.com/images/mmmdo21/post/0f7cb8da-0890-4d8d-9086-d063192c431e/image.png)
2. 시스템과 현실 세계의 일치 : 사용자에게 친숙한 단어, 개념을 사용하는가?
홈 화면 메뉴 - N평 집들이, 멍냥템 특가
메뉴이름에 유저가 친근하게 느낄 수 있는 단어를 사용함
![](https://velog.velcdn.com/images/mmmdo21/post/0bc0ddca-1bd8-4034-9889-de11fd5f3318/image.png)
3. 사용자 제어 및 자유: 실수로 수행한 것을 취소하는 탈출구를 제공하는가?
5.오류 방지: 오류가 발생하기 쉬운상황을 제거해 사용자 실수를 방지하는가?
💡3과 5의 차이
- 3.사용자 제어 및 자유는 오류발생 후에 되돌릴 수 있도록 하는 즉 사후처리에 관한 항목이다.
- 5.오류 방지는 오류 발생 전에, 즉 오류 발생을 사전에 예방하기 위한 항목이다.
-> 찾자~
9. 오류의 인식, 진단, 복구 지원: 문제를 표시하고 해결방안을 제안하는 가?
유저가 글 작성 도중 x버튼을 눌렀을때, 다시 한번 중단의사를 묻는 창을 띄운다.
![](https://velog.velcdn.com/images/mmmdo21/post/fb4638fd-7e6f-47f2-9c5a-4adcbcbeddc7/image.png)
4. 일관성 및 표준 : 사용자에게 익숙한 UI 제공하는가?
- 다른 서비스에서 익숙하게 사용되는 디자인 패턴을 사용함
![](https://velog.velcdn.com/images/mmmdo21/post/0107d238-050c-40dc-8e0c-f0e0979d15ae/image.png)
- 상품 대분류 - 소분류 체계로 상품 아이콘을 나열하는 방식이 일관적
![](https://velog.velcdn.com/images/mmmdo21/post/083a1154-fd13-4266-afec-a976bbd557c4/image.png)
- 사진이나 상품, 게시글, 인기 동영상 등 스크랩북에 담을 수 있음
![](https://velog.velcdn.com/images/mmmdo21/post/190ee788-6f83-4af5-bca1-f97d09d3287a/image.png)
6. 기억보다는 직관 : 사용자가 기억해야하는 정보를 줄이는가?
검색화면에서 최근 검색어를 제공한다.
![](https://velog.velcdn.com/images/mmmdo21/post/668459f5-1f70-43d6-9962-845b9b6499ca/image.png)
7. 사용의 유연성과 효율성 : 초보자와 전문가 모두에게 개별 맞춤 기능을 제공하는가?
- 최근 본 상품을 예쁘게 활용한 인기 스타일링 사진 제공한다. 유저 맞춤 정보 제공
![](https://velog.velcdn.com/images/mmmdo21/post/16f208f3-aa65-48ef-9d63-0b1249641910/image.png)
8. 미학적이고 미니멀한 디자인 : 콘텐츠와 기능의 우선순위를 정하고 우선 순위가 높은 것을 제공하고 있는가?
메인화면에 쇼핑하기 아이콘이 가장 먼저 배치되어 있고, 바로 하단에 인테리어 스타일링 사진을 배치하고 있다.
사용빈도가 낮은 메뉴는 숨겨두고 필요할때만 볼 수 있다.
![](https://velog.velcdn.com/images/mmmdo21/post/0b5bb725-5f1b-4f2d-9cc0-3d2a47a6bd20/image.png)
10. 도움말 및 설명 문서: 상황에 따라 이해하는 데 도움이 되는 문서를 제공하고 있는가?
홈서비스 메뉴를 누르면 하단에 안내창을 띄워서 이전에 상담한 내역이 있는지 확인할 수 있도록 안내함
![](https://velog.velcdn.com/images/mmmdo21/post/7e96eec2-95f7-4399-92f2-410e5ff67910/image.png)