SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
2022. 07. 18
매쓰팡 Frontend Dev Manager 이우진
UX 이론
개발자의 관점에서
목차
• 발표를 진행한 이유

• UX 이론

• 정의

• 목표

• 구성요소

• UX 설계에서 개발자의 역할과 책임
2
발표를 진행한 이유
• 전공 강의로 UI/UX 프로그래밍을 수강

• F 피하려고 기말고사 벼락치기

• ‘이거 매일 회사에서 하던 일이네?’

=> 업무를 더 넓은 시각에서 바라보니 목표 뚜렷해짐

=> 회의가 더 의미있고 재밌어짐

• 경험 공유
발표를 진행한 이유
F는 면해야 해서…
UX 이론
UX의 정의
목적을 이루려는 총체적 인간의 감정, 태도, 행동
UX의 목표
사용자가 목적을 잘 이루게 하는 좋은 제품을 만드는 것!
• 사용자에게 가치를 제공하면 돈을 지불할 것이다

• 아이가 스스로 문제 푸는 가치
👨🦲💰 ✨
UX의 구성요소
UX의 구성요소
Mental model
• 사용자

• 사용자가 목표를 이루기 위해 생각하는 step

• 눈에 보이는 인터페이스 + 과거 경험 근거로 판단

• 사용자에 따라 다른 UX를 제공할 수 있음

• ex) 카메라 전문가 모드, 매쓰팡 학부모 서비스
UX의 구성요소
System image
• 프로그램
UX의 구성요소
Conceptual model
• UX 디자이너

• 디자이너가 만드려고 했던 모델

• 사용자의 Mental model을 예측해서 구성
UX 디자인의 목표
유저의 Mental model과 디자이너의 Conceptual model을 일치
=
UX 디자인의 목표
그러나 유저는 System image만을 보고 디자이너의 의도를 판단
판단
UX 디자인의 목표
사용자의 Mental model을 잘 예측
System Image로 잘 구현
예측
구현
UX 설계에서 개발자의 역할
UX 설계에서 개발자의 역할
System image를 구현
• 개발자만 할 수 있는 역할

• 디자이너의 의도대로 구현

• 구현하는 데 필요한 시간, 비용 등 한계를 팀과
공유
 구현
한계
🧑💻
개발자가 팀에 공유해야 할 정보
일정
[스프린트 킥오프 미팅]

👨💼: 그렇다면 이번 스프린트에 진행해볼 수 있는 태스크는 이렇게 다섯가지가 있어요. 이번 스프린트는 팀 일정을 고려해서 일주일
동안 진행하려고 하는데, 일주일동안 어떤 태스크를 진행할 수 있을까요? 목요일에 개발이 완료되고, 금요일에 테스트, amplitude
설정 후 배포될 수 있으면 좋겠습니다.

👩🎨: A 태스크는 n일, B 태스크는 n일, C 태스크는 n일이 걸릴 예정입니다.

🧑💻: 논의한 것에 따르면 A 태스크는 페이지 1개, B 태스크는 3개 페이지에 같은 컴포넌트 추가 정도 범위로 작업될 예정인가요? 애
니메이션 추가는 없나요? ( 작업 범위 확인 )

👩🎨: 네 말씀하신 범위 정도로 작업할 예정입니다

🧑💻: 그렇다면 A 태스크는 n일, B 태스크는 n일, C 태스크는 n일이 걸립니다. ( 작업 시간 공유 )

👨💼: 알겠습니다. 그럼 목요일까지 진행하기 위해서는 이번 스프린트에서는 A, B 태스크만 진행하고 C 태스크는 보류하겠습니다.
개발자가 팀에 공유해야 할 정보
일정
[개발 진행 중에]

👩🎨: 개발자님, 저희가 프로토타입을 사용해 보면서 논의해 봤는데 초대장 연장 페이지를 추가하고, 카카오톡 메세지에서 버튼을 누
르면 초대장 연장 페이지로 이동하는 기능을 추가하려고 해요 ( 킥오프때 없었던 기능 추가 요청 )

🧑💻: 저희 스프린트의 목표가 초대장 이용률을 높이는 것이니, 말씀하신 작업의 우선 순위가 더 높은가요? 구현하는 데는 0.5일이 필
요할 것으로 예상됩니다 ( 추가로 필요한 일정 공유 )

👨💼: 네. 남은 시간이 없으시죠? 그렇다면 이 작업을 먼저 진행하고, 예정되어 있던 회원가입 페이지 UI 수정 태스크는 후순위로 미뤄
서 시간이 남으면 진행해 주세요 ( 우선순위에 따라 일정 조정 )
개발자가 팀에 공유해야 할 정보
일정
• 일정은 협상의 대상이 아니다!
• 대신 업무 범위나 스펙 등을 조정

• 중간에 태스크가 추가되는 경우 일정, 우선순위 조정이 반드시 필요

• 특히 간단한 태스크는 거절하기 어려운데, 다른 작업으로 일정이 차 있다면 조정하고 공유해야 함

• 우선순위를 고려해서 미루기

• ex) 디자인 시스템 텍스트 색상 이름 변경

• 일일이 기억하기 힘들기 때문에 asana에 쌓아놓는 것이 도움이 된다

• PM이 원하는 것은 일정이 공유되고 예상대로 진행되는 것

• 이슈를 공유

• 버그, 예상 외의 요청사항 발생 시 이슈를 PM에게 공유하고 우선순위 조정해서 작업
개발자가 팀에 공유해야 할 정보
구현
[타이머 컴포넌트 추가 개발 진행 중]

🧑💻: 디자이너님, 타이머 박스의 위치를 상단 40px로 설정하셨는데 현재 회원가입 페이지의 레이아웃 때문에 타이머 박스의 윗쪽이
가려지는 문제가 있어요. 다른 방법으로 40px 위치에 구현할 수도 있지만, 위치를 48px로 수정해 주시면 빠르게 구현이 가능한데,
어떻게 생각하세요?

👩🎨: 앗, 원래 저도 헤더 바로 아래인 48px로 위치를 잡았는데 결제 페이지에서 제목과 박스가 겹치는 문제가 있어서 변경했어요.

🧑💻: 아하 제가 그 문제는 몰랐었네요. 결제 페이지는 회원가입 페이지와 다른 여백을 설정할 수 있어요.

👩🎨: 그렇다면 타이머의 위치는 48px로 수정하고, 결제 페이지 상단 여백을 늘려서 작업해도 괜찮을 것 같아요!
개발자가 팀에 공유해야 할 정보
구현
[초대장 보내기 기능 스프린트 진행 중]

🧑💻: 저희가 초대장 보내기 버튼을 누르면 링크를 복사하기로 기획했었는데, 카카오 공유 API를 사용하면 간단하게 구현이 가능하면
서 더 좋은 경험을 제공할 수 있을 것 같아요. 카카오 공유 API 데모 링크입니다

👨💼: 써보니까 공유 과정도 더 편하고 이미지와 문구도 추가할 수 있어서 유저 경험상 더 좋네요. 카카오 공유 API로 변경해서 작업해
주세요

👩🎨: 저도 더 좋은 것 같아요. 메세지에 들어가는 이미지와 UX writing 추가로 작업해서 전달해 드릴게요!
개발자가 팀에 공유해야 할 정보
구현
• 디자인 전달 받을 때 디자이너의 Conceptual model을 이해해서 System design에 그
대로 구현하는 것을 목표로 한다
• 개발에 필요한 디테일 질문

• 한계 공유

• 시간, 비용

• 설계 이슈

• ex) 공통 컴포넌트를 사용한다면 같은 컴포넌트가 변경되어도 되는지
참고 자료
경희대 컴퓨터공학부 전석희 교수님

<UI/UX 프로그래밍> 강의
스티브 맥코넬

<코드 컴플리트>
Q&A
감사합니다!

Contenu connexe

Similaire à UX 이론 - 개발자의 관점에서

사용자중심
사용자중심사용자중심
사용자중심
지현 이
 
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
Seongsil Yoo
 
Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토
keesung kim
 
131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원
NAVER D2
 
2015 hi first 스터디 최종보고서
2015 hi first 스터디 최종보고서2015 hi first 스터디 최종보고서
2015 hi first 스터디 최종보고서
Seongho Park
 

Similaire à UX 이론 - 개발자의 관점에서 (20)

여기컨_스타트업 기획자의 월화수목금_이수지
여기컨_스타트업 기획자의 월화수목금_이수지여기컨_스타트업 기획자의 월화수목금_이수지
여기컨_스타트업 기획자의 월화수목금_이수지
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
프로덕트 매니지먼트하기
프로덕트 매니지먼트하기프로덕트 매니지먼트하기
프로덕트 매니지먼트하기
 
[카드뉴스 강의] 마마프(My Marketing Project) 2주차 강의안
[카드뉴스 강의] 마마프(My Marketing Project) 2주차 강의안[카드뉴스 강의] 마마프(My Marketing Project) 2주차 강의안
[카드뉴스 강의] 마마프(My Marketing Project) 2주차 강의안
 
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
그래프에서 대시보드까지, 서비스를 위한 데이터 시각화
 
To. 지식 공유를 시작하려는 개발자에게
To. 지식 공유를 시작하려는 개발자에게To. 지식 공유를 시작하려는 개발자에게
To. 지식 공유를 시작하려는 개발자에게
 
사이드 프로젝트 위모 키워보기
사이드 프로젝트 위모 키워보기사이드 프로젝트 위모 키워보기
사이드 프로젝트 위모 키워보기
 
UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4UX 디자인 7가지 비밀: 비밀 4
UX 디자인 7가지 비밀: 비밀 4
 
사용자중심
사용자중심사용자중심
사용자중심
 
스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry Runner스마일게이트 서버개발캠프 - ING - Laundry Runner
스마일게이트 서버개발캠프 - ING - Laundry Runner
 
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
중요한 것은 꺾이지 않는 '일 잘하는 사람이 되겠다'는 마음 - 기수...
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토Wwc2016 기획디자인개발그리고프로토
Wwc2016 기획디자인개발그리고프로토
 
131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원
 
더 나은 사용자 경험과 비즈니스를 만들기 위한 프로덕트 매니저로 일하기
더 나은 사용자 경험과 비즈니스를 만들기 위한 프로덕트 매니저로 일하기더 나은 사용자 경험과 비즈니스를 만들기 위한 프로덕트 매니저로 일하기
더 나은 사용자 경험과 비즈니스를 만들기 위한 프로덕트 매니저로 일하기
 
Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정Software engineer가 되기 위한 여정
Software engineer가 되기 위한 여정
 
2015 hi first 스터디 최종보고서
2015 hi first 스터디 최종보고서2015 hi first 스터디 최종보고서
2015 hi first 스터디 최종보고서
 
네오워드프레스 교육프로그램
네오워드프레스 교육프로그램네오워드프레스 교육프로그램
네오워드프레스 교육프로그램
 
네오워드프레스 교육프로그램
네오워드프레스 교육프로그램네오워드프레스 교육프로그램
네오워드프레스 교육프로그램
 
[AKC2021] 힐링페이퍼의 애자일 전환(고찬혁 / 김종우)
[AKC2021] 힐링페이퍼의 애자일 전환(고찬혁 / 김종우)[AKC2021] 힐링페이퍼의 애자일 전환(고찬혁 / 김종우)
[AKC2021] 힐링페이퍼의 애자일 전환(고찬혁 / 김종우)
 

UX 이론 - 개발자의 관점에서

  • 1. 2022. 07. 18 매쓰팡 Frontend Dev Manager 이우진 UX 이론 개발자의 관점에서
  • 2. 목차 • 발표를 진행한 이유 • UX 이론 • 정의 • 목표 • 구성요소 • UX 설계에서 개발자의 역할과 책임 2
  • 4. • 전공 강의로 UI/UX 프로그래밍을 수강 • F 피하려고 기말고사 벼락치기 • ‘이거 매일 회사에서 하던 일이네?’ => 업무를 더 넓은 시각에서 바라보니 목표 뚜렷해짐 => 회의가 더 의미있고 재밌어짐 • 경험 공유 발표를 진행한 이유 F는 면해야 해서…
  • 6. UX의 정의 목적을 이루려는 총체적 인간의 감정, 태도, 행동
  • 7. UX의 목표 사용자가 목적을 잘 이루게 하는 좋은 제품을 만드는 것! • 사용자에게 가치를 제공하면 돈을 지불할 것이다 • 아이가 스스로 문제 푸는 가치 👨🦲💰 ✨
  • 9. UX의 구성요소 Mental model • 사용자 • 사용자가 목표를 이루기 위해 생각하는 step • 눈에 보이는 인터페이스 + 과거 경험 근거로 판단 • 사용자에 따라 다른 UX를 제공할 수 있음 • ex) 카메라 전문가 모드, 매쓰팡 학부모 서비스
  • 11. UX의 구성요소 Conceptual model • UX 디자이너 • 디자이너가 만드려고 했던 모델 • 사용자의 Mental model을 예측해서 구성
  • 12. UX 디자인의 목표 유저의 Mental model과 디자이너의 Conceptual model을 일치 =
  • 13. UX 디자인의 목표 그러나 유저는 System image만을 보고 디자이너의 의도를 판단 판단
  • 14. UX 디자인의 목표 사용자의 Mental model을 잘 예측 System Image로 잘 구현 예측 구현
  • 16. UX 설계에서 개발자의 역할 System image를 구현 • 개발자만 할 수 있는 역할 • 디자이너의 의도대로 구현 • 구현하는 데 필요한 시간, 비용 등 한계를 팀과 공유 구현 한계 🧑💻
  • 17. 개발자가 팀에 공유해야 할 정보 일정 [스프린트 킥오프 미팅] 👨💼: 그렇다면 이번 스프린트에 진행해볼 수 있는 태스크는 이렇게 다섯가지가 있어요. 이번 스프린트는 팀 일정을 고려해서 일주일 동안 진행하려고 하는데, 일주일동안 어떤 태스크를 진행할 수 있을까요? 목요일에 개발이 완료되고, 금요일에 테스트, amplitude 설정 후 배포될 수 있으면 좋겠습니다.
 👩🎨: A 태스크는 n일, B 태스크는 n일, C 태스크는 n일이 걸릴 예정입니다.
 🧑💻: 논의한 것에 따르면 A 태스크는 페이지 1개, B 태스크는 3개 페이지에 같은 컴포넌트 추가 정도 범위로 작업될 예정인가요? 애 니메이션 추가는 없나요? ( 작업 범위 확인 )
 👩🎨: 네 말씀하신 범위 정도로 작업할 예정입니다 🧑💻: 그렇다면 A 태스크는 n일, B 태스크는 n일, C 태스크는 n일이 걸립니다. ( 작업 시간 공유 )
 👨💼: 알겠습니다. 그럼 목요일까지 진행하기 위해서는 이번 스프린트에서는 A, B 태스크만 진행하고 C 태스크는 보류하겠습니다.
  • 18. 개발자가 팀에 공유해야 할 정보 일정 [개발 진행 중에] 👩🎨: 개발자님, 저희가 프로토타입을 사용해 보면서 논의해 봤는데 초대장 연장 페이지를 추가하고, 카카오톡 메세지에서 버튼을 누 르면 초대장 연장 페이지로 이동하는 기능을 추가하려고 해요 ( 킥오프때 없었던 기능 추가 요청 )
 🧑💻: 저희 스프린트의 목표가 초대장 이용률을 높이는 것이니, 말씀하신 작업의 우선 순위가 더 높은가요? 구현하는 데는 0.5일이 필 요할 것으로 예상됩니다 ( 추가로 필요한 일정 공유 )
 👨💼: 네. 남은 시간이 없으시죠? 그렇다면 이 작업을 먼저 진행하고, 예정되어 있던 회원가입 페이지 UI 수정 태스크는 후순위로 미뤄 서 시간이 남으면 진행해 주세요 ( 우선순위에 따라 일정 조정 )
  • 19. 개발자가 팀에 공유해야 할 정보 일정 • 일정은 협상의 대상이 아니다! • 대신 업무 범위나 스펙 등을 조정 • 중간에 태스크가 추가되는 경우 일정, 우선순위 조정이 반드시 필요 • 특히 간단한 태스크는 거절하기 어려운데, 다른 작업으로 일정이 차 있다면 조정하고 공유해야 함 • 우선순위를 고려해서 미루기 • ex) 디자인 시스템 텍스트 색상 이름 변경 • 일일이 기억하기 힘들기 때문에 asana에 쌓아놓는 것이 도움이 된다 • PM이 원하는 것은 일정이 공유되고 예상대로 진행되는 것 • 이슈를 공유 • 버그, 예상 외의 요청사항 발생 시 이슈를 PM에게 공유하고 우선순위 조정해서 작업
  • 20. 개발자가 팀에 공유해야 할 정보 구현 [타이머 컴포넌트 추가 개발 진행 중] 🧑💻: 디자이너님, 타이머 박스의 위치를 상단 40px로 설정하셨는데 현재 회원가입 페이지의 레이아웃 때문에 타이머 박스의 윗쪽이 가려지는 문제가 있어요. 다른 방법으로 40px 위치에 구현할 수도 있지만, 위치를 48px로 수정해 주시면 빠르게 구현이 가능한데, 어떻게 생각하세요? 👩🎨: 앗, 원래 저도 헤더 바로 아래인 48px로 위치를 잡았는데 결제 페이지에서 제목과 박스가 겹치는 문제가 있어서 변경했어요. 🧑💻: 아하 제가 그 문제는 몰랐었네요. 결제 페이지는 회원가입 페이지와 다른 여백을 설정할 수 있어요. 👩🎨: 그렇다면 타이머의 위치는 48px로 수정하고, 결제 페이지 상단 여백을 늘려서 작업해도 괜찮을 것 같아요!
  • 21. 개발자가 팀에 공유해야 할 정보 구현 [초대장 보내기 기능 스프린트 진행 중] 🧑💻: 저희가 초대장 보내기 버튼을 누르면 링크를 복사하기로 기획했었는데, 카카오 공유 API를 사용하면 간단하게 구현이 가능하면 서 더 좋은 경험을 제공할 수 있을 것 같아요. 카카오 공유 API 데모 링크입니다 👨💼: 써보니까 공유 과정도 더 편하고 이미지와 문구도 추가할 수 있어서 유저 경험상 더 좋네요. 카카오 공유 API로 변경해서 작업해 주세요 👩🎨: 저도 더 좋은 것 같아요. 메세지에 들어가는 이미지와 UX writing 추가로 작업해서 전달해 드릴게요!
  • 22. 개발자가 팀에 공유해야 할 정보 구현 • 디자인 전달 받을 때 디자이너의 Conceptual model을 이해해서 System design에 그 대로 구현하는 것을 목표로 한다 • 개발에 필요한 디테일 질문 • 한계 공유 • 시간, 비용 • 설계 이슈 • ex) 공통 컴포넌트를 사용한다면 같은 컴포넌트가 변경되어도 되는지
  • 23. 참고 자료 경희대 컴퓨터공학부 전석희 교수님 <UI/UX 프로그래밍> 강의 스티브 맥코넬 <코드 컴플리트>
  • 24. Q&A