[새싹x코딩온] UI/UX 란 : 디자인 사고
오늘 새싹(SeSAC) APPLE, UI/UX 4기로 1일 차 교육을 참석을 했습니다.
오전에 오리엔테이션 진행이 되었으며, 오후에 UI/UX에 대해서 배우는 시간을 가졌습니다.
이렇게 교육을 듣고, 글을 쓰는 것은 처음이네요. ^^
하루하루 글을 남기고 싶은 생각이 들어서... 기쁜 마음(?)으로...
UI/UX란?
UI (User Interface)
아이콘, 색감, 타이포그래피 등으로 보이는 시각 디자인을 의미한다.
UX (User eXperience)
이용자가 편리하고 만족할 수 있도록 UI를 디자인하는 것을 의미한다.
ex) 경쟁사 파악, 사용자의 분석하여 콘텐츠 개발 및 개선사항를 반영하여 UI 디자인하는 것
디지털 디바이드
인터넷을 사용할 수 있는 계층과 그렇지 않은 계층 사이에 발생하는 접근성과 이용가능 격차를 의미
배리어 프리
키오스크의 경우 - 더 많은 계층이 사용할 수 있도록 격차를 최소화 해 줘야 한다 - 배리어 프리
userinyerface
오늘 교육 중 극도의 고통(🤬)과 화남(💢)를 느낄 수 있는 사이트를 하나 알려드릴게요
userinyerface 란 사이트입니다.
https://userinyerface.com/
User Inyerface - A worst-practice UI experiment
Hi and welcome to User Inyerface, a challenging exploration of user interactions and design patterns. To play the game, simply fill in the form as fast and accurate as possible. NO Please click HERE to GO to the next page
userinyerface.com
🤬💢🤬💢🤬💢🤬💢🤬💢🤬💢🤬💢🤬💢
userinyerface 사이트 첫 페이지에서 접속하자 마자 자연스럽게 연두색으로 된 NO 버튼을 클릭했다.
왜냐하면, 눈에 가장 띄기도 했고, NO 버튼에 마우스를 올리면, 버튼이 약간 커시면서, 클릭 가능한 것처럼 손가락 모양이 되었지 때문이었다.
하지만 이건 트릭 이었음 🤬💢
아무 페이지의 변화는 없었습니다.
하단에 있는
"Please click HERE to GO to the next page"
이 텍스트에서도
click - 이걸 클릭해도 아무 변화가 없으며,
next page - 이걸 클릭해도 아무 변화가 없습니다.
다음 페이지로 이동 할려면 어떻게 해야 할까요? 여러분 ...
힌트를 하나 드릴까요?
다음 페이지로 넘어가기 위해서는 HERE 텍스트를 클릭 해야 다음 페이지로 넘어갈 수 있습니다.
그다음 페이지부터는 아주 극도의 고통(🤬)과 화남(💢)
UI / UX 의 중요성을 다시 한번 생각하게 하는 사이트 였습니다.
색상 대비 체크
https://webaim.org/resources/contrastchecker/
WebAIM: Contrast Checker
Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Contrast Ratio permalink Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interfa
webaim.org
UI/UX 레벨테스트
https://smore.im/quiz/sVnyiiTIHi
UX·UI 레벨 테스트
UX·UI 디자인 문제 100점에 도전해보세요.
smore.im
제 점수는요 ㅋㅋㅋ 8/10개입니다.
결과 페이지에서 도움이 될 만한 도서도 추천을 해 주네요.
밀리의 서적에 있으려나? ^^ 찾아봐야겠어요.
더블 다이아몬드 프로세스
오늘 다이아몬드 프로세스를 처음 접하게 되었는데,
사실 저는 이 프로세스가 일을 하면서, 제일 힘들었던 프로세스였던 거 같습니다.
Discover (문의 정의)
- 정량적 조사 : 수치화
- 정성적 조사
Define (문제 구체화하고 판별)
- 앞서 발견한 문제 정리
Develop (문제 해결하기 위한 아이디어 확산)
- 아이디어 스케치 한다라고도 한다.
- 프로토타입 : 큰 프로젝트에서… 많이 쓰인다.
Deliver (문제 해결책 수렴하여 서비스를 만든다)
- 최종 솔루션을 선택
- 실사용자의 피드백을 기반으로 최종 솔루션 결정
- 최종 솔루션 최적화하여 개발
- 베타 버전 배포 후 피드백을 받는다.
디자인 사고 (Design Thinking)
1. 사람을 중심으로 공감하는 것이 제일 중요 (Empathize)
사용자의 경험, 감정, 욕구를 파악
2. 문제 정의하기 (Define)
3. 아이디어 내기 (Ideate)
4. 시제품 만들기 (Prototype)
가장 간단하게, 쉽게 만들어야 한다. 힘들어...
5. 테스트하기 (Test)
사용자에게 테스트하고 피드팩을 받아야 한다.
디자인 사고 (Design Thinking) 6원칙
1. 자유로운 발언권 보장
2. 서로의 아이디어를 바탕으로 구축
3. 사용자와의 협업
4. 비판 자제
5. 긍정적인 분위기
6. 어떠한 시도의 "실패"는 없음 → 실패가 아닌 좀 더 나은 시도가 있었겠지라고...
오늘 1일 차 교육은 이것으로 마무리되었습니다.
오늘 UI/UX에 중요성과 배운 부분들을 제가 이전에 했던 일과 적용하면서 들으니 재미있는 교육이었습니다.
그중 디자인 사고 6원칙은 업무에서나, 타인과 커뮤니케이션을 할 때도 많이 도움이 될 거 같다는 느낌이 있습니다.
특히 일을 하다 보면 마감일자라는 시간에 쫓겨... 버럭 이가 되어 버리는 저를 발견하게 됩니다.
많은 것을 생각할 수 있는 하루였습니다.