12일차 수업 - 전체적 회고, UX디자인

수업을 이쯤 들으니 그런 생각이 든다

왜 자꾸 문제 정의와 사용자를 만나보는게 중요하다고 강사님이 말했는지 알거 같다

 

 

딱 그것만 빼면 AI를 이용해서 짧은 시간에 해낼 수가 있는 것 같다

 

지금 까지 수업을 들었던 과정은 반드시 필요하다

내가 어떤 프레임워크를 사용한다고 했을때 그것을 사용해 봤던 경험만 있으면 언제든 다시 재사용할 수 있으니까

마치 경영학 관련 여러책을 읽고 그 지식을 외우진 않아도 우리의 도서관에 꽂아놓고 언제든 사용할 수 있는 것이다

 

 

그런 생각도 들었다

 

나만의 서비스 제작 프레임워크를 하나 만드는 것

이곳에서 제공해준 여러 프레임 워크들의 조합으로 전체적인 프레임 워크를 하나 만들고

아이디어를 계속해서 던지면 알아서 서비스를 기획해 주는 창업의 자동화서비스

 

서비스를 자동화하는 서비스!

 

는 나중에 생각해보기로 하고 오늘 수업의 정리 들어간다

 

 

---

닐슨의 UX 10원칙

 

1. 시스템 상태의 가시성 (Visibility of System Status)

시스템의 현재 상태를 사용자에게 항상 알려주는 것

예) 파일 업로드 시 진행률 바, 로딩 스피너

 

2. 시스템과 현실 세계의 일치 (Match Between System and the Real World)

사용자에게 익숙한 언어와 개념으로 인터페이스를 구성하는 것

예) 파일 삭제 기능에 '휴지통' 아이콘 사용

 

3. 사용자 통제권과 자유 (User Control and Freedom)

실수했을 때 쉽게 되돌아갈 수 있는 탈출구를 제공하는 것

예) 실행 취소(Undo), Gmail 이메일 전송 취소

 

4. 일관성과 표준 (Consistency and Standards)

같은 기능은 항상 같은 위치에서 같은 방식으로 동작하게 하는 것

예) 앱 전체에서 '저장' 버튼의 위치와 색상을 동일하게 유지

 

 

5. 오류 예방 (Error Prevention)

오류가 발생하기 전에 미리 방지하도록 설계하는 것

예) 비밀번호 입력 시 조건 충족 여부를 실시간으로 표시

 

 

6. 기억보다 인식 (Recognition Rather Than Recall)

사용자가 외우지 않아도 되도록 필요한 정보를 눈에 보이게 제공하는 것

예) 검색창 자동완성, 최근 검색어 목록

 

7. 유연성과 효율성 (Flexibility and Efficiency of Use)

초보자와 전문가 모두 편하게 쓸 수 있도록 다양한 사용 방식을 지원하는 것

예) 키보드 단축키(Ctrl+C/V), 자주 쓰는 기능 즐겨찾기

 

8. 미적이고 미니멀한 디자인 (Aesthetic and Minimalist Design)

꼭 필요한 정보만 화면에 담아 핵심에 집중하게 하는 것

예) Google 검색 홈페이지 — 검색창과 버튼만 존재

 

9. 오류 인식·진단·복구 지원 (Help Users Recognize, Diagnose, and Recover from Errors)

오류 발생 시 문제를 명확히 설명하고 해결 방법까지 안내하는 것

예) 404 페이지에 '홈으로 돌아가기' 버튼 함께 제공

 

10. 도움말과 문서화 (Help and Documentation)

필요할 때 쉽게 찾을 수 있는 도움말을 제공하는 것

예) 버튼 위에 마우스를 올리면 사용법과 단축키를 보여주는 툴팁

 

 

저번 강의와 합친다면 우리는

 

Lofi 디자인, Hifi 디자인을 거친 뒤 닐슨의 UX 10원칙에 따라 우리가 만든 화면을 수정해 나가면 되는것이다

수업에서 했을 때는 강의 자료를 통해 했기 때문에 각각의 항목이 더 자세한 예시를 가지고 있지만

결국 중요한 점은

 

만들어진 hifi모델에 다음 UX원칙에 적합하게 잘 되어있는지 확인
-> 잘 안되어있다면 적용하여 개선
-> 개선된 내용을 hifi프로토타입으로 출력
-> 변경된 항목들은 잘 정리해서 before/after에 관한 내용은 프로토타입에 넣지말고 텍스트/표로 정리해서 나에게 따로 출력

 

심화한다면 애초에 UX원칙에 대한 프롬프트를 AI가 스스로 생각해 보도록 할수도 있다

 

새채팅에서 1.시스템 상태의 가시성에 대한 설명을 출력
-> 해당 내용에 대한 사례를 웹에서 검색하여 더 많은 사례를 확보
-> 새로운 사례들에서 확인된 UX원칙을 다시 정리하여 추출
-> 해당 원칙으로 hifi모델을 개선할때 이용할 수 있는 프롬프트를 출력 지시

해당 프롬프트를 위에 UX원칙에 입력

 

 

 

강의자료는 분명 잘 보관해 두었다가 요긴하게 사용해야 한다

하지만 세상은 굉장히 빠르게 변하고 있고(닐슨의 UX원칙은 굉장히 오래되었지만)

강의자료가 없어졌다고해서 당황할 것 없이 강의자료를 도출해낸 방법을 생각해보고 그걸 다시 시도하면 되는 일이다

그런 사고를 하는게 이 수업을 듣는데 필요한 거지

저걸 백날 복사 붙여넣기 한다고 되는건 아니라고 생각한다

 

하여 나의 HIFI모델이 변화해온 변천사를 지켜보자

 

v1~v3

v1

v2

 

v6

 

---

마이크로 카피

단 몇줄의 말일 뿐인데 사용자 입장에서 굉장한 차이를 준다

 

결제실패 안좋은 예 : 오류가 발생했습니다 (Code: PAY_5024)

결제실패 훌륭한 예 : 카드사 승인이 거절됐어요, 한도가 모자랄 수 있으니 다른 결제 수단으로 시도해볼까요?

 

위험행동 안좋은 예 : 삭제

위험행동 훌륭한 예 : 대화방을 나가면 메시지가 모두 삭제돼요(버튼레드)

 

---

Don Norman의 디자인 6원칙

 

1. 가시성 (Visibility)

기능이 눈에 보여야 사용자가 어떻게 써야 할지 알 수 있는 것

예) 클릭 가능한 버튼은 일반 텍스트와 시각적으로 구별되게 표시

 

2. 피드백 (Feedback)

사용자의 행동에 대해 즉각적인 반응을 보여주는 것

예) 버튼 클릭 시 색상 변화, 폼 제출 후 완료 메시지 표시

 

3. 행동 유도성 (Affordance)

사물이나 UI 요소가 어떻게 사용해야 하는지를 스스로 암시하는 것

예) 손잡이는 잡아당기게, 평평한 판은 밀게끔 생김새로 행동을 유도

 

4. 매핑 (Mapping)

컨트롤과 그 결과 사이의 관계가 직관적으로 연결되는 것

예) 자동차 좌우 사이드미러 조절 버튼이 실제 미러의 위치와 동일한 방향으로 배치

 

5. 제약 (Constraints)

잘못된 사용을 원천적으로 막아 오류를 줄이는 것

예) 날짜 입력 필드에서 존재하지 않는 날짜(2월 31일)를 선택할 수 없게 제한

 

6. 개념 모델 (Conceptual Model)

사용자가 시스템의 동작 방식을 머릿속으로 이해할 수 있도록 단서를 제공하는 것

예) 컴퓨터의 '폴더' 구조 — 실제 서류 폴더처럼 파일을 담는다는 개념을 그대로 차용

---

하여 한 화면을 만드는 마법같은 프롬프트

<role>
당신은 Don Norman의 6가지 디자인 원칙(Visibility, Feedback,
Constraints, Mapping, Consistency, Affordance)에 정통한
시니어 UX 디자이너입니다.
</role>

<input>
  <persona>{슬라이드 28의 1번 결과}</persona>
  <journey>{슬라이드 28의 2번 결과 — 가장 큰 페인포인트}</journey>
  <screen>{설계할 화면 이름: 예. 가게 카드 리스트}</screen>
  <goal>{사용자가 이 화면에서 끝내야 할 일}</goal>
</input>

<ask>
6원칙을 모두 만족하도록 화면을 설계하고, 각 원칙별로 다음을 표로 정리:
1. Visibility — 화면에 어떤 요소를 노출할지, 숨길지 (예: 가격, 배달비)
2. Feedback — 사용자 행동에 어떤 즉각 반응을 줄지 (예: 버튼 색 변화, 토스트)
3. Constraints — 어떤 잘못된 입력을 사전에 막을지 (예: 비활성, 사전 확인)
4. Mapping — 버튼/아이콘 위치를 결과와 어떻게 일치시킬지 (예: 좌측=뒤로, 우측=다음)
5. Consistency — 다른 화면과 어떤 패턴을 공유할지 (예: 검색바 위치, 카드 구조)
6. Affordance — 클릭 가능 vs 정보 전용을 어떻게 시각적으로 구분할지

마지막에:
- 6원칙 중 가장 많이 위반되기 쉬운 1개와 그 이유
- 와이어프레임 영역 구조(Lo-fi 수준)를 텍스트로 묘사
- 다음 단계 제안 (Hi-fi 작업 시 주의할 점 3가지)
</ask>

<rules>
- ‘예쁘게/세련되게’ 같은 추상어 금지
- 각 원칙마다 ‘왜 이렇게 설계했는지’ 페르소나·페인포인트와 연결
- 한국어, 표 형식
</rules>

하지만 페르소나나 journey는 일부러 숨겨져있다

해당 입력값들을 알아서 잘 넣는다면 원하는 화면을 구현할 수 있다!

 

 

 

나는 개발자라서 UI에 대해서 생각해 본적이 많다

UI를 잘 만들지 않으면 전화가 계속온다. 어떻게 쓰는건지 모르겠다고...

그리고 가장 중요한게 에러처리.

에러가 났을때 원만하게 해결할 수 있는 화면을 항상생각해서 만들어야한다

 

그런 걸 생각하느라 1화면 만드는데 보통 한주를 잡고 만든다

그런데 AI의 뚝딱쇼를 보니 약간 허탈하기도 하면서

세상이 진짜 바뀌었다는 생각이 든다

 

 

옛날에는 자료조사하려면 도서관에 갔을 것이다 그 전에는 인터뷰를 직접하러 다녔겠지...

인터넷 포탈이 생기고 나서 얼마나 많은 것들이 바뀌었나

나는 인터넷 세대라서 인터넷보급이 안되었을때의 대학생들은 도대체 과제를 어떻게 했나 싶다

마찬가지로 이제 AI를 자연스럽게 쓰는 세대는 AI없이 도대체 어떻게 과제를 했나 싶을거다

 

 

정말 꼭 들어볼만한 수업이라는 생각이 든다