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

2022. 07. 18
매쓰팡 Frontend Dev Manager 이우진
UX 이론
개발자의 관점에서

목차
• 발표를 진행한 이유

• UX 이론

• 정의

• 목표

• 구성요소

• UX 설계에서 개발자의 역할과 책임
2

• 전공 강의로 UI/UX 프로그래밍을 수강

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

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

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

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

• 경험 공유
발표를 진행한 이유
F는 면해야 해서…

UX의 정의
목적을 이루려는 총체적 인간의 감정, 태도, 행동

UX의 목표
사용자가 목적을 잘 이루게 하는 좋은 제품을 만드는 것!
• 사용자에게 가치를 제공하면 돈을 지불할 것이다

• 아이가 스스로 문제 푸는 가치
👨🦲💰 ✨

UX의 구성요소
Mental model
• 사용자

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

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

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

• ex) 카메라 전문가 모드, 매쓰팡 학부모 서비스

UX의 구성요소
System image
• 프로그램

UX의 구성요소
Conceptual model
• UX 디자이너

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

• 사용자의 Mental model을 예측해서 구성

UX 디자인의 목표
유저의 Mental model과 디자이너의 Conceptual model을 일치
=

그러나 유저는 System image만을 보고 디자이너의 의도를 판단
판단

사용자의 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 프로그래밍> 강의
스티브 맥코넬

<코드 컴플리트>

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

More Related Content

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

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