Speaker 1

Speaker 2

advice

barcode

blue

break

cafe

camera

down

empty

frustrate

function

happy

idontknow

magnet

malfunction

new_front_blue

new_front_camera

new_front_compact

new_front_display

new_front_layer

new_front_msr_1

new_front_msr_2

new_front_nfc_1

new_front_nfc_2

new_front_radius

numpad

original_front_bigsize

original_front_camera

original_front_main

original_front_msr_1

original_front_msr_2

original_front_structure_1

original_front_structure_2

samsungpay

shortcut

signup

terminal

think

toss_appicon

tossplace

wonder

Simplicity 23, 
이번 세션에서는 
토스의 :flip[하드웨어]{start="00;00;03;13"}에 대해 
이야기 나눠보려고 해요.

Simplicity 23, 이번 세션에서는 토스의 
:flip[하드웨어]{start="00;00;03;13"}에 대해 이야기 나눠보려고 해요.

토스에는 :tag[두 종류]{start="00;00;06;20" color="rgba(255, 255, 255, 1)"}의 제품 
디자이너가 있는데요. 
하나는 잘 아시는 :color[소프트웨어]{start="00;00;10;00"} 
제품을 만드는 디자이너고요. 
:omit[프로덕트 디자이너]{} 또 하나는 :flip[하드웨어]{start="00;00;14;07"} 
제품을 만드는 디자이너예요.

토스에는 :tag[두 종류]{start="00;00;06;20" color="rgba(255, 255, 255, 1)"}의 제품 디자이너가 있는데요. 
하나는 잘 아시는 :color[소프트웨어]{start="00;00;10;00"} 제품을 만드는 디자이너고요. 
:omit[프로덕트 디자이너]{} 
또 하나는 :flip[하드웨어]{start="00;00;14;07"} 제품을 만드는 디자이너예요.

토스에서 :questionMark[하드웨어 제품]{start="00;00;17;02"}
이라니 좀 의외이지 않나요?

토스에서 :questionMark[하드웨어 제품]{start="00;00;17;02"}이라니 좀 의외이지 않나요?

오늘은 토스에서 :exclamationMark[유일하게]{start="00;00;20;29"} 
하드웨어 제품을 디자인하고 
계시는 산업 디자이너
 :inline[류관준님]{start="00;00;25;11" asset="Speaker 2"}을 모시고 토스의 :exclamationMark[찐]{start="00;00;27;00"} 
제품 디자인 이야기를 들어보려고 
합니다.

오늘은 토스에서 :exclamationMark[유일하게]{start="00;00;20;29"} 하드웨어 제품을 
디자인하고 계시는 산업 디자이너 :inline[류관준님]{start="00;00;25;11" asset="Speaker 2"}을 모시고 
토스의 :exclamationMark[찐]{start="00;00;27;00"} 제품 디자인 이야기를 들어보려고 합니다.

:waa[와 관준님 안녕하세요]{start="00;00;30;09"}

:waa[안녕하세요]{start="00;00;31;20"}

자기소개를 간단히 해주실 수 
있을까요?

자기소개를 간단히 해주실 수 있을까요?

네, 저는 토스의 :color[아직은 유일한]{start="00;00;36;22"} 
산업 디자이너 류관준입니다. 
저는 지금 :popup[토스플레이스]{start="00;00;40;17" asset="tossplace" link="https://tossplace.com" label="토스플레이스 바로가기"}에서 결제 
단말기를 디자인하고 있어요.

네, 저는 토스의 :color[아직은 유일한]{start="00;00;36;22"} 산업 디자이너 
류관준입니다. 저는 지금 :popup[토스플레이스]{start="00;00;40;17" asset="tossplace" link="https://tossplace.com" label="토스플레이스 바로가기"}에서 
결제 단말기를 디자인하고 있어요.

결제 단말기라고 하면 혹시 
:tag[포스]{start="00;00;46;10" color="rgba(255, 255, 255, 1)"} 말씀하시는 걸까요?

결제 단말기라고 하면 혹시 :tag[포스]{start="00;00;46;10" color="rgba(255, 255, 255, 1)"} 
말씀하시는 걸까요?

보통 결제 단말기라고 생각하면 
:tag[포스]{start="00;00;51;06" color="rgba(255, 255, 255, 1)"}가 생각이 나실 텐데, 사실 
포스 말고도 :color[더 다양한 제품들]{start="00;00;54;06"}이 
있어요.

보통 결제 단말기라고 생각하면 
:tag[포스]{start="00;00;51;06" color="rgba(255, 255, 255, 1)"}가 생각이 나실 텐데, 사실 포스 말고도 
:color[더 다양한 제품들]{start="00;00;54;06"}이 있어요.

편의점에서 고객이 
:color[직접 카드를 넣을 때]{start="00;00;57;05"} 쓰는
 제품도 있고, 식당 같은 곳에서 
쓰는 영수증 나오는 :color[계산기]{start="00;01;02;12"}처럼 
생긴 그런 제품도 있어요.

편의점에서 고객이 :color[직접 카드를 넣을 때]{start="00;00;57;05"} 쓰는 
제품도 있고, 식당 같은 곳에서 쓰는 영수증 나오는 
:color[계산기]{start="00;01;02;12"}처럼 생긴 그런 제품도 있어요.

종류도 많고 디자인도 다 
제각각이어서, 사장님들한테는 
가게매대를 얼마나 
:color[깔끔하게 정리하느냐]{start="00;01;10;00"}가 
:inline[고민거리]{start="00;01;11;21" asset="wonder"}이기도 해요.

종류도 많고 디자인도 다 제각각이어서, 
사장님들한테는 가게매대를 얼마나 :color[깔끔하게 정리하느냐]{start="00;01;10;00"}가 
:inline[고민거리]{start="00;01;11;21" asset="wonder"}이기도 해요.

그렇군요. 그러면 이제 :xmark[앱]{start="00;01;14;22"}이 아닌 
:color[실제 제품]{start="00;01;15;26"}을 토스에서 만든다고
 :emojiBubble[하니까]{start="00;01;18;08" url="https://static.toss.im/2d-emojis/svg/u1F914.svg"} 좀 흥미로운데요,

그렇군요. 그러면 이제 :xmark[앱]{start="00;01;14;22"}이 아닌 :color[실제 제품]{start="00;01;15;26"}을 
토스에서 만든다고 :emojiBubble[하니까]{start="00;01;18;08" url="https://static.toss.im/2d-emojis/svg/u1F914.svg"} 좀 흥미로운데요,

혹시 관준님 그럼 이전에도 
결제 단말기를 디자인해 보신
 적이 :questionMark[있는 걸까요]{start="00;01;24;01"}

혹시 관준님 그럼 이전에도 결제 단말기를 디자인해 
보신 적이 :questionMark[있는 걸까요]{start="00;01;24;01"}

아니요. 사실 저도 결제 단말기를
 디자인하는 건 :tag[처음]{start="00;01;28;13" color="rgba(255, 255, 255, 1)"}이었어요.

아니요. 사실 저도 결제 단말기를 디자인하는 건 
:tag[처음]{start="00;01;28;13" color="rgba(255, 255, 255, 1)"}이었어요.

그래서 제품을 빨리 이해하려고
 주말에 :inline[카페]{start="00;01;31;13" asset="cafe"}를 갈 때마다
 사장님한테 이 제품 사용하면서 
:color[어려운 점]{start="00;01;34;12"} 뭐가 있으신지, 아니면
 또 제품이 :color[어땠으면 좋겠는지,]{start="00;01;37;02"} 
:zzz[이상한 사람]{start="00;01;38;10"}처럼 말 걸고 그랬던 
적이 있어요.

그래서 제품을 빨리 이해하려고 주말에 :inline[카페]{start="00;01;31;13" asset="cafe"}를 
갈 때마다 사장님한테 이 제품 사용하면서 :color[어려운 점]{start="00;01;34;12"} 
뭐가 있으신지, 아니면 또 제품이 :color[어땠으면 좋겠는지,]{start="00;01;37;02"} 
:zzz[이상한 사람]{start="00;01;38;10"}처럼 말 걸고 그랬던 적이 있어요.

그러면 이제 카페에 가서
 :quoteMark[double-start]{}아이스 아메리카노 한 잔이요.:quoteMark[double-end] 
이런 다음에 :quoteMark[double-start]{}근데 혹시 포스 
쓰는 거 편하세요?:quoteMark[double-end] 
:zzz[이렇게 질문한 거예요?]{start="00;01;47;26"}

그러면 이제 카페에 가서 
:quoteMark[double-start]{}아이스 아메리카노 한 잔이요.:quoteMark[double-end] 이런 다음에 
:quoteMark[double-start]{}근데 혹시 포스 쓰는 거 편하세요?:quoteMark[double-end] 
:zzz[이렇게 질문한 거예요?]{start="00;01;47;26"}

혹시 관준님 :zzz[MBTI E예요?]{start="00;01;51;18"}

네, 예상하셨겠지만, 
확신의 :emojiBubble[E]{start="00;01;55;04" url="https://static.toss.im/2d-emojis/svg/u1F604.svg"} 입니다.

네, 예상하셨겠지만, 확신의 :emojiBubble[E]{start="00;01;55;04" url="https://static.toss.im/2d-emojis/svg/u1F604.svg"} 입니다.

그랬더니 사장님들은 
:questionMark[뭐라고 답변하셨는데요]{start="00;01;57;22"}

그랬더니 사장님들은 :questionMark[뭐라고 답변하셨는데요]{start="00;01;57;22"}

지금 생각나는 것 중 하나가
 :emojiBubble[멘붕]{start="00;02;02;12" url="https://static.toss.im/2d-emojis/svg/u1F92F.svg"}에 빠지게 했던 답변이기도 
했었는데요. 바라는 것 없고 그냥
 :quoteMark[double-start]{}결제만 잘 되면 돼요.:quoteMark[double-end]
 :bb[이런 답변이었어요.]{start="00;02;08;29"}

지금 생각나는 것 중 하나가 :emojiBubble[멘붕]{start="00;02;02;12" url="https://static.toss.im/2d-emojis/svg/u1F92F.svg"}에 빠지게 했던 
답변이기도 했었는데요. 바라는 것 없고 그냥 
:quoteMark[double-start]{}결제만 잘 되면 돼요.:quoteMark[double-end] :bb[이런 답변이었어요.]{start="00;02;08;29"}

사장님이 직접 단말기를 :xmark[선택해서]{start="00;02;11;16"} 
구매하는 게 아니고 대리점
 업체에서 :color[추천하는 대로]{start="00;02;14;20"} 쓰는 게 
당연한 시장이더라고요.

사장님이 직접 단말기를 :xmark[선택해서]{start="00;02;11;16"} 구매하는 게 
아니고 대리점 업체에서 :color[추천하는 대로]{start="00;02;14;20"} 쓰는 게 
당연한 시장이더라고요.

그래서 처음엔 이거 디자인 
방향성을 어떻게 :questionMark[잡아야 되지]{start="00;02;19;28"} 
하고 고민이 좀 되었어요.

그래서 처음엔 이거 디자인 방향성을 어떻게 
:questionMark[잡아야 되지]{start="00;02;19;28"} 하고 고민이 좀 되었어요.

우리는 보통 고객이 불편한 걸 
해소하는 방향으로 디자인을 
하는데 :color[고객이 불편하지 않다]{start="00;02;26;04"}고 
하니까 어, 이거 어디서부터
 :questionMark[개선해야 되지]{start="00;02;29;09"} 이런 게 포인트 
잡기 :bb[어려웠을 것 같아요.]{start="00;02;31;21"}

우리는 보통 고객이 불편한 걸 해소하는 방향으로 
디자인을 하는데 :color[고객이 불편하지 않다]{start="00;02;26;04"}고 
하니까 어, 이거 어디서부터 :questionMark[개선해야 되지]{start="00;02;29;09"} 
이런 게 포인트 잡기 :bb[어려웠을 것 같아요.]{start="00;02;31;21"}

맞아요. 근데 또 다르게 생각해 
보니까 아직 이 시장은 불편한 걸 
:xmark[불편하다]{start="00;02;36;25"}고 느끼고 :exclamationMark[있지 않구나]{start="00;02;38;01"}
라는 생각이 들더라고요.

맞아요. 근데 또 다르게 생각해 보니까 아직 이 시장은 
불편한 걸 :xmark[불편하다]{start="00;02;36;25"}고 느끼고 :exclamationMark[있지 않구나]{start="00;02;38;01"}
라는 생각이 들더라고요.

전선 정리가 지저분하다든지 
아니면 새로운 결제 방식이 생길
 때마다 새 제품을 놔야 된다든지 
이미 불편함은 :tag[충분히]{start="00;02;47;23" color="rgba(255, 255, 255, 1)"} 
있었는데도요. 

전선 정리가 지저분하다든지 아니면 
새로운 결제 방식이 생길 때마다 새 제품을 놔야 된다든지 
이미 불편함은 :tag[충분히]{start="00;02;47;23" color="rgba(255, 255, 255, 1)"} 있었는데도요. 

그 말씀을 듣고 보니까 저도 
옛날에 줄 있는 이어폰을 쓰던 
시절이 있잖아요. 저는 그때 
당시에 그 줄이 :xmark[불편하다]{start="00;02;57;04"}고 
생각하지 않았던 것 같아요.

그 말씀을 듣고 보니까 저도 옛날에 줄 있는 이어폰을 
쓰던 시절이 있잖아요. 저는 그때 당시에 그 줄이 
:xmark[불편하다]{start="00;02;57;04"}고 생각하지 않았던 것 같아요.

근데 무선 이어폰 시대로 
바뀌었으니까 이제 다시 
돌아가라고 하면 또 
 :xmark[못 돌아갈 것 같거든요.]{start="00;03;04;07"}

근데 무선 이어폰 시대로 바뀌었으니까 이제 다시 
돌아가라고 하면 또  :xmark[못 돌아갈 것 같거든요.]{start="00;03;04;07"}

맞아요. 그래서 결제 단말기에서도
 이렇게 불편하지만 불편하다고 
느끼지 못했던 지점들을
만약에 토스가 :popup[해결]{start="00;03;12;00" asset="fix"}해주면 
앞으로 사장님들이 :quoteMark[single-start]{}:color[더 편하게]{start="00;03;13;28"} 
장사를 할 수 있지 않을까?:quoteMark[single-end]
라는 생각을 하게 됐어요.

맞아요. 그래서 결제 단말기에서도 이렇게 불편
하지만 불편하다고 느끼지 못했던 지점들을
만약에 토스가 :popup[해결]{start="00;03;12;00" asset="fix"}해주면 앞으로 사장님들이 
:quoteMark[single-start]{}:color[더 편하게]{start="00;03;13;28"} 장사를 할 수 있지 않을까?:quoteMark[single-end]라는 
생각을 하게 됐어요.

그렇군요. 아마 듣고 계시는 
분들에게 토스 :inline[앱]{start="00;03;20;27" asset="toss_appicon"}은 익숙할 수 
있을 것 같은데 토스에서 만든 
:flip[하드웨어 제품]{start="00;03;24;13"}은 어떻게 생겼는지
 본 적 없으신 분들도 많을 것
 같아요.

그렇군요. 아마 듣고 계시는 분들에게 토스 :inline[앱]{start="00;03;20;27" asset="toss_appicon"}은 
익숙할 수 있을 것 같은데 토스에서 만든 
:flip[하드웨어 제품]{start="00;03;24;13"}은 어떻게 생겼는지 본 적 없으신 
분들도 많을 것 같아요.

먼저 관준님이 디자인한 제품 
보여주실 수 있을까요?

먼저 관준님이 디자인한 제품 보여주실 수 있을까요?

네, 먼저 제가 디자인 한
 제품은 총 :flip[두 가지]{start="00;03;35;09"}가 있는데요,
영수증이 나오는 점원용 기기인
 :tag[터미널]{start="00;03;38;25" color="rgba(255, 255, 255, 1)"}이라는 제품이 있고요. 
또, 고객용 결제기기인
 :tag[프론트]{start="00;03;42;08" color="rgba(255, 255, 255, 1)"}라는 단말기도 있어요.

네, 먼저 제가 디자인 한 제품은 총 :flip[두 가지]{start="00;03;35;09"}가 있는데요,
영수증이 나오는 점원용 기기인 :tag[터미널]{start="00;03;38;25" color="rgba(255, 255, 255, 1)"}이라는 
제품이 있고요. 또, 고객용 결제기기인 :tag[프론트]{start="00;03;42;08" color="rgba(255, 255, 255, 1)"}라는 
단말기도 있어요.

오늘은 이 :color[프론트 단말기]{start="00;03;44;22"}를 
디자인한 과정을 먼저
 설명드릴게요.

오늘은 이 :color[프론트 단말기]{start="00;03;44;22"}를 디자인한 과정을 
먼저 설명드릴게요.

:questionMark[고객용 결제기기]{start="00;03;48;21"}라는 게 조금 
익숙하지 않은데요. 그게 뭐예요?

:questionMark[고객용 결제기기]{start="00;03;48;21"}라는 게 조금 익숙하지 않은데요. 
그게 뭐예요?

우리가 가게에서 점원 분이 
:quoteMark[double-start]{}카드를 앞쪽에 꽂아주세요.:quoteMark[double-end] 
할 때 보통 그때 보는 제품이 
:color[고객용 결제기기]{start="00;03;59;16"}예요.

우리가 가게에서 점원 분이 :quoteMark[double-start]{}카드를 앞쪽에 
꽂아주세요.:quoteMark[double-end] 할 때 보통 그때 보는 제품이 
:color[고객용 결제기기]{start="00;03;59;16"}예요.

뭔지 알 것 같아요. 
올리브영 같은 데 가면 있는 거죠?

뭔지 알 것 같아요. 올리브영 같은 데 가면 있는 거죠?

근데 혹시 이 단말기에 꼭 
들어가야 되는 :tag[결제 기능]{start="00;04;07;16" color="rgba(255, 255, 255, 1)"}이 
뭐가 있는지 알고 계세요?

근데 혹시 이 단말기에 꼭 들어가야 되는 :tag[결제 기능]{start="00;04;07;16" color="rgba(255, 255, 255, 1)"}이 
뭐가 있는지 알고 계세요?

카드를 넣어야 되니까 카드 
리더기가 있어야 될 :speakBubble[것]{data='[{"speaker":"Speaker 2", "start":"00;04;16;27", "text":" 네"}]'} 같고요.
 :questionMark[숫자 키패드]{start="00;04;15;14"} 같은 것도 봤던 것 
같아요.

카드를 넣어야 되니까 카드 리더기가 있어야 
될 :speakBubble[것]{data='[{"speaker":"Speaker 2", "start":"00;04;16;27", "text":" 네"}]'} 같고요. :questionMark[숫자 키패드]{start="00;04;15;14"} 같은 것도 봤던 것 
같아요.

네, 맞아요. 
카드 IC 칩 인식하는 :tag[리더기]{start="00;04;21;03" color="rgba(255, 255, 255, 1)"}랑 
또 비밀번호 누르는 :tag[키패드]{start="00;04;23;03" color="rgba(255, 255, 255, 1)"}를 
말씀해주셨는데요.

네, 맞아요. 카드 IC 칩 인식하는 :tag[리더기]{start="00;04;21;03" color="rgba(255, 255, 255, 1)"}랑 또 
비밀번호 누르는 :tag[키패드]{start="00;04;23;03" color="rgba(255, 255, 255, 1)"}를 말씀해주셨는데요.

사실 요즘은 :xmark[키패드]{start="00;04;25;13"} 대신에 
디스플레이의 숫자 누르는 
경우가 많아가지고 많이 
사라지는 추세예요.

사실 요즘은 :xmark[키패드]{start="00;04;25;13"} 대신에 디스플레이의 숫자 
누르는 경우가 많아가지고 많이 사라지는 추세예요.

근데 또 이것 말고도 스마트폰 
결제할 때 쓰이는 :tag[NFC 리더기]{start="00;04;33;07" color="rgba(255, 255, 255, 1)"}도 
필요하고요, 간편결제 서비스에 
쓰일 때 :inline[바코드]{start="00;04;36;22" asset="barcode"}나 :inline[QR코드]{start="00;04;37;08" asset="qr"}를 
인식하기 위해서는 또 :tag[카메라]{start="00;04;39;10" color="rgba(255, 255, 255, 1)"}도 
필요해요. 그리고 또 이런 결제 
방법을 설명해줘야 되는
 :tag[디스플레이]{start="00;04;43;13" color="rgba(255, 255, 255, 1)"}도 필요하고요.

근데 또 이것 말고도 스마트폰 결제할 때 쓰이는 
:tag[NFC 리더기]{start="00;04;33;07" color="rgba(255, 255, 255, 1)"}도 필요하고요, 간편결제 서비스에 
쓰일 때 :inline[바코드]{start="00;04;36;22" asset="barcode"}나 :inline[QR코드]{start="00;04;37;08" asset="qr"}를 인식하기 위해서는 
또 :tag[카메라]{start="00;04;39;10" color="rgba(255, 255, 255, 1)"}도 필요해요. 그리고 또 이런 결제 방법을 
설명해줘야 되는 :tag[디스플레이]{start="00;04;43;13" color="rgba(255, 255, 255, 1)"}도 필요하고요.

뭐 이미 가짓수도 많은데 각각의 
기능들이 자기장이나 :inline[자성]{start="00;04;48;08" asset="magnet"}에 
민감해가지고 서로 거리가 
가까우면 또 :popup[오작동]{start="00;04;51;11" asset="malfunction"}을 
일으키게 되더라고요.

뭐 이미 가짓수도 많은데 각각의 기능들이 
자기장이나 :inline[자성]{start="00;04;48;08" asset="magnet"}에 민감해가지고 서로 거리가 
가까우면 또 :popup[오작동]{start="00;04;51;11" asset="malfunction"}을 일으키게 되더라고요.

그래서 배치할 때 :color[충분한 거리]{start="00;04;54;14"}를 
만들어주지 않으면 기본적인 제품 
인증 절차도 :xmark[통과 못하는 경우]{start="00;04;58;09"}가 
:bb[있었어요.]{start="00;04;59;27"}

그래서 배치할 때 :color[충분한 거리]{start="00;04;54;14"}를 만들어주지 않으면 
기본적인 제품 인증 절차도 :xmark[통과 못하는 경우]{start="00;04;58;09"}가 
:bb[있었어요.]{start="00;04;59;27"}

듣기만 해도 이제 좀 디자인하기
 전에 :popup[고려]{start="00;05;03;28" asset="think"}해야 될 것도 많고
 그것 때문에 한계들도 많았을 것 
:bb[같아요.]{start="00;05;08;08"}

듣기만 해도 이제 좀 디자인하기 전에 :popup[고려]{start="00;05;03;28" asset="think"}해야 
될 것도 많고 그것 때문에 한계들도 많았을 것 :bb[같아요.]{start="00;05;08;08"}

네, 맞아요. 그런데 다행인 건 
이런 :color[어려운 점]{start="00;05;11;15"}들을 처음부터 
제가 공부하지 않고도 좀 더
 :tag[빠르게]{start="00;05;15;07" color="rgba(255, 255, 255, 1)"} 알 수 있었다는 점인데요.

네, 맞아요. 그런데 다행인 건 이런 :color[어려운 점]{start="00;05;11;15"}들을 
처음부터 제가 공부하지 않고도 좀 더 :tag[빠르게]{start="00;05;15;07" color="rgba(255, 255, 255, 1)"} 알 수 
있었다는 점인데요.

제가 처음 토스팀에 합류하기 전엔
 산업 디자이너:omit[하드웨어 디자이너]{}가 없다 
보니까  브랜드 디자이너분들께서 
이 :speakBubble[프로젝트를]{data='[{"speaker":"Speaker 1", "start":"00;05;24;10", "text":" 맞아요"}]'} 대신 진행하고 
계셨어요.

제가 처음 토스팀에 합류하기 전엔 
산업 디자이너:omit[하드웨어 디자이너]{}가 없다 보니까  
브랜드 디자이너분들께서 이 :speakBubble[프로젝트를]{data='[{"speaker":"Speaker 1", "start":"00;05;24;10", "text":" 맞아요"}]'} 대신 
진행하고 계셨어요.

그 과정에서 아무래도 어려운 
부분이 많다 보니까 내부적으로 
:color[하드웨어에 대한 전문성]{start="00;05;30;05"}이 있는
 :exclamationMark[디자이너가 필요하다]{start="00;05;31;27"}라고 
느끼셨고, 그 결과로 어느 정도 
디자인 초안이 완성됐을 때 
제가 합류하게 됐어요.

그 과정에서 아무래도 어려운 부분이 많다 보니까 
내부적으로 :color[하드웨어에 대한 전문성]{start="00;05;30;05"}이 있는 
:exclamationMark[디자이너가 필요하다]{start="00;05;31;27"}라고 느끼셨고, 
그 결과로 어느 정도 디자인 초안이 완성됐을 때 
제가 합류하게 됐어요.

그래서 좀 더 빠르게 이런 점들을 
이해하고 작업을 이어나갈 수
 있었는데 또 한편으로는 이
 디자인이 토스 :inline[앱]{start="00;05;44;15" asset="toss_appicon"}에서 경험한
 :color[심플함과는 좀 다르다]{start="00;05;45;13"}라는 아쉬운 
점들이 보이기 시작하더라고요.

그래서 좀 더 빠르게 이런 점들을 이해하고 작업을 
이어나갈 수 있었는데 또 한편으로는 이 디자인이 
토스 :inline[앱]{start="00;05;44;15" asset="toss_appicon"}에서 경험한 :color[심플함과는 좀 다르다]{start="00;05;45;13"}라는 
아쉬운 점들이 보이기 시작하더라고요.

토스 앱의 :tag[심플함]{start="00;05;49;28" color="rgba(255, 255, 255, 1)"}과 :tag[하드웨어]{start="00;05;50;17" color="rgba(255, 255, 255, 1)"}를 
어떻게 연관시킬 수 :questionMark[있을까]{start="00;05;53;00"} 
그런 생각이 드는데요.

토스 앱의 :tag[심플함]{start="00;05;49;28" color="rgba(255, 255, 255, 1)"}과 :tag[하드웨어]{start="00;05;50;17" color="rgba(255, 255, 255, 1)"}를 어떻게 연관시킬 수 
:questionMark[있을까]{start="00;05;53;00"} 그런 생각이 드는데요.

그런데 어떤 게 다르다고 
느껴진 거예요?

그런데 어떤 게 다르다고 느껴진 거예요?

먼저 토스 앱에서는 복잡한 
정보나 기능들을 보여줘야 할 때 
사용자가 쉽게 따라갈 수 있도록 
정보를 :tag[순차적으로]{start="00;06;05;06" color="rgba(255, 255, 255, 1)"} 보여주잖아요. 
개인정보 입력하고 인증하는 
그 화면에서처럼요.

먼저 토스 앱에서는 복잡한 정보나 기능들을 
보여줘야 할 때 사용자가 쉽게 따라갈 수 있도록 
정보를 :tag[순차적으로]{start="00;06;05;06" color="rgba(255, 255, 255, 1)"} 보여주잖아요. 
개인정보 입력하고 인증하는 그 화면에서처럼요.

오, :zzz[관준님이 그걸 어떻게 알아요?]{start="00;06;12;01"}

:zzz[아이, 다 알죠]{start="00;06;14;09"}

그렇구나. 역시 서당개 3년이면
 :zzz[풍월을 읊는다고~]{start="00;06;18;03"} 신기하네요.

그렇구나. 역시 서당개 3년이면 :zzz[풍월을 읊는다고~]{start="00;06;18;03"} 
신기하네요.

:zzz[네, 맞습니다.]{start="00;06;20;18"}

그런 게 좀 :exclamationMark[다르다]{start="00;06;22;07"}고 
느껴졌던 거예요?

그런 게 좀 :exclamationMark[다르다]{start="00;06;22;07"}고 느껴졌던 거예요?

네, 맞아요. 이게 토스 앱에서는 
:flip[hierarchy]{start="00;06;26;06"}를 설정하고 
순차적으로 보여주는 게 사용자가
 :quoteMark[single-start]{}내가 다음에 어떤 행동을 해야
 되는구나:quoteMark[single-end]라고 알 수 있도록 
해주게 느낀다고 생각했고, 
이게 또 :color[심플하다]{start="00;06;35;24"}고 느끼게 
해 주는 포인트라고 생각을 
했어요.

네, 맞아요. 이게 토스 앱에서는 :flip[hierarchy]{start="00;06;26;06"}를 
설정하고 순차적으로 보여주는 게 사용자가 
:quoteMark[single-start]{}내가 다음에 어떤 행동을 해야 되는구나:quoteMark[single-end]라고 
알 수 있도록 해주게 느낀다고 생각했고, 이게 또 
:color[심플하다]{start="00;06;35;24"}고 느끼게 해 주는 포인트라고 생각을 했어요.

그런데 계속 디자인을 
다듬으면서 이 프론트 단말기는
 :color[너무 많은 결제 기능]{start="00;06;42;05"}들을 모두 다
 :color[고객 쪽으로]{start="00;06;44;10"} 보여주려고 하다 
보니까 오히려 이것을 어떻게 
:questionMark[사용해야 되는지]{start="00;06;48;00"} 먼저 살펴봐야 
되는 단계가 필요하더라고요.

그런데 계속 디자인을 다듬으면서 
이 프론트 단말기는 :color[너무 많은 결제 기능]{start="00;06;42;05"}들을 
모두 다 :color[고객 쪽으로]{start="00;06;44;10"} 보여주려고 하다 보니까 
오히려 이것을 어떻게 :questionMark[사용해야 되는지]{start="00;06;48;00"} 
먼저 살펴봐야 되는 단계가 필요하더라고요.

결국 이 두 차이점에서 이 
프론트 단말기랑 토스 앱이 다른 
점은 정보나 기능에 :flip[hierarchy를]{start="00;06;56;15"} 
:flip[보여주고 있지 않다]{start="00;06;58;00"}라는 그 점이
 큰 차이점이라고 느꼈어요.

결국 이 두 차이점에서 이 프론트 단말기랑 
토스 앱이 다른 점은 정보나 기능에 :flip[hierarchy를]{start="00;06;56;15"} 
:flip[보여주고 있지 않다]{start="00;06;58;00"}라는 그 점이 큰 차이점이라고 
느꼈어요.

hierarchy라는 개념이 
:exclamationMark[등장했군요]{start="00;07;04;27"}

hierarchy라는 개념이 :exclamationMark[등장했군요]{start="00;07;04;27"}

근데 정확히 어떤 hierarchy를 
:questionMark[말씀하셨던 거예요]{start="00;07;08;25"}

근데 정확히 어떤 hierarchy를 :questionMark[말씀하셨던 거예요]{start="00;07;08;25"}

먼저 카드 IC칩을 넣어야 될 때 
리더기나 또 마그네틱 리더기를 
써야 될 때, 이게 동시에 보이다 
보니까 사용자가 잘못된 리더기
쪽으로 카드를 넣게 되는 경우가
 :speakBubble[간혹]{data='[{"speaker":"Speaker 1", "start":"00;07;22;01", "text":" 아~"}]'} 있었어요.

먼저 카드 IC칩을 넣어야 될 때 리더기나 
또 마그네틱 리더기를 써야 될 때, 이게 
동시에 보이다 보니까 사용자가 잘못된 리더기
쪽으로 카드를 넣게 되는 경우가 :speakBubble[간혹]{data='[{"speaker":"Speaker 1", "start":"00;07;22;01", "text":" 아~"}]'} 있었어요.

그리고 또 이 마그네틱 리더기가 
앞쪽에 배치되다 보니까 좀 
:color[새로운 문제점]{start="00;07;28;03"}이 있었는데요.

그리고 또 이 마그네틱 리더기가 앞쪽에 
배치되다 보니까 좀 :color[새로운 문제점]{start="00;07;28;03"}이 있었는데요.

카드 마그네틱 선을
 :inline[위]{start="00;07;31;11" asset="up"}로 해야 될까요? 
아니면 :inline[아래]{start="00;07;33;10" asset="down"}로 해야 될까요?

카드 마그네틱 선을 :inline[위]{start="00;07;31;11" asset="up"}로 해야 될까요? 
아니면 :inline[아래]{start="00;07;33;10" asset="down"}로 해야 될까요?

지금 여기 이렇게 딱 가운데로 
갈라진 부분에 카드를 :color[어떤 면]{start="00;07;38;05"}으로
 긁어야 되는지? 어, 그 말씀 듣고 
보니깐 진짜 헷갈리는 것 같아요.
 잘 :emojiBubble[모르겠어요.]{start="00;07;44;03" url="https://static.toss.im/2d-emojis/svg/u1F914.svg"} 

지금 여기 이렇게 딱 가운데로 갈라진 부분에 
카드를 :color[어떤 면]{start="00;07;38;05"}으로 긁어야 되는지? 
어, 그 말씀 듣고 보니깐 진짜 헷갈리는 것 
같아요. 잘 :emojiBubble[모르겠어요.]{start="00;07;44;03" url="https://static.toss.im/2d-emojis/svg/u1F914.svg"} 

그렇죠. 
그러니까 :inline[윗쪽]{start="00;07;46;04" asset="up"}, :inline[아랫쪽]{start="00;07;46;18" asset="down"} 
 :color[어느 쪽으로 긁어도]{start="00;07;47;08"} 인식되도록 
해야 이 문제를 해결할 수 
있겠더라고요. 근데 그러다 보니까 
리더기를 두 개나 사용해야 되는
 부품적인 :tag[단가 이슈]{start="00;07;55;15" color="rgba(255, 255, 255, 1)"}가 생겼어요.

그렇죠. 그러니까 :inline[윗쪽]{start="00;07;46;04" asset="up"}, :inline[아랫쪽]{start="00;07;46;18" asset="down"}  :color[어느 쪽으로 긁어도]{start="00;07;47;08"} 
인식되도록 해야 이 문제를 해결할 수 있겠더라고요. 
근데 그러다 보니까 리더기를 두 개나 사용해야 되는 
부품적인 :tag[단가 이슈]{start="00;07;55;15" color="rgba(255, 255, 255, 1)"}가 생겼어요.

그리고 또 이 마그네틱 구멍을 
앞쪽에 넣어주다 보니까 얇은 
디스플레이랑 두꺼운 바디, 그 
중간에 넣을 수밖에 없었거든요. 
그렇다보니까 제품이 쉽게 :popup[부러질]{start="00;08;08;09" asset="break"} 
수 있을 만한 그런 :bb[약한 구조]{start="00;08;10;08"}를 
가지게 될 수 밖에 없었어요.

그리고 또 이 마그네틱 구멍을 앞쪽에 넣어주다 
보니까 얇은 디스플레이랑 두꺼운 바디, 
그 중간에 넣을 수밖에 없었거든요. 
그렇다보니까 제품이 쉽게 :popup[부러질]{start="00;08;08;09" asset="break"} 수 있을 만한 
그런 :bb[약한 구조]{start="00;08;10;08"}를 가지게 될 수 밖에 없었어요.

확실히 말씀 듣고 보니까 
그래 보이네요.

확실히 말씀 듣고 보니까 그래 보이네요.

또 디스플레이 다음으로 제일 
큰 면적이 필요한 NFC 리더기가 
아무래도 앞쪽에 놓여지다 보니까 
제품이 :color[너무 커지는 문제점]{start="00;08;23;15"}이 
있었어요.

또 디스플레이 다음으로 제일 큰 면적이 필요한 
NFC 리더기가 아무래도 앞쪽에 놓여지다 보니까 
제품이 :color[너무 커지는 문제점]{start="00;08;23;15"}이 있었어요.

그리고 또 NFC 리더기를 피해서 
카메라가 중심이 아니라 옆으로
 배치되다 보니까 고객이 :inline[QR]{start="00;08;31;20" asset="qr"} 
결제할 때 :inline[카메라]{start="00;08;32;25" asset="camera"}가 어딨지 하고
 :questionMark[어디다가 대야 되지]{start="00;08;34;14"}하는
 문제점이 있더라고요.

그리고 또 NFC 리더기를 피해서 
카메라가 중심이 아니라 옆으로 배치되다 보니까 
고객이 :inline[QR]{start="00;08;31;20" asset="qr"} 결제할 때 :inline[카메라]{start="00;08;32;25" asset="camera"}가 
어딨지 하고 :questionMark[어디다가 대야 되지]{start="00;08;34;14"}하는 문제점이 있더라고요.

사실 저는 아까 처음에 이미지 
봤을 때는 이것도 괜찮은 것 같은데 
:questionMark[뭐가 문제일까]{start="00;08;42;04"} 라고도 생각 
했는데, 이야기 :popup[듣고]{start="00;08;45;08" asset="aha"} 보니까 
되게 해결해야 될 문제점들이
 :exclamationMark[많았네요]{start="00;08;48;03"}

사실 저는 아까 처음에 이미지 봤을 때는 이것도 
괜찮은 것 같은데 :questionMark[뭐가 문제일까]{start="00;08;42;04"} 라고도 생각 했는데, 
이야기 :popup[듣고]{start="00;08;45;08" asset="aha"} 보니까 되게 해결해야 될 문제점들이 :exclamationMark[많았네요]{start="00;08;48;03"}

저도 그랬는데 계속 보다보니까 
하나의 문제에서
:color[또 다른 문제들로 이어지면서]{start="00;08;52;17"} 
결국 디자인을 :exclamationMark[다시 해야겠다]{start="00;08;55;18"}라고 
느끼게 된 포인트가 많았어요. 

저도 그랬는데 계속 보다보니까 하나의 문제에서
:color[또 다른 문제들로 이어지면서]{start="00;08;52;17"} 결국 디자인을 
:exclamationMark[다시 해야겠다]{start="00;08;55;18"}라고 느끼게 된 포인트가 많았어요. 

그래서 이렇게 된 거 처음부터
 :exclamationMark[다시]{start="00;09;01;04"} 디자인 해보자 싶었죠.

그래서 이렇게 된 거 처음부터 :exclamationMark[다시]{start="00;09;01;04"} 디자인 해보자 싶었죠.

그런데 이제 사실 어느 정도 
완성이 되어 있는 상태였던 
거잖아요. 그 상태에서 뒤집어서 
디자인을 :tag[다시]{start="00;09;09;27" color="rgba(255, 255, 255, 1)"} 한다는 결정이 
또 쉽진 않았을 :inline[것]{start="00;09;12;09" asset="wonder"} 같은데요.

그런데 이제 사실 어느 정도 완성이 되어 있는 
상태였던 거잖아요. 그 상태에서 뒤집어서 디자인을 
:tag[다시]{start="00;09;09;27" color="rgba(255, 255, 255, 1)"} 한다는 결정이 또 쉽진 않았을 :inline[것]{start="00;09;12;09" asset="wonder"} 같은데요.

네, 맞아요. :bb[쉽지 않았죠.]{start="00;09;14;01"}

그리고 또 신규 :speakBubble[입사자였는데]{data='[{"speaker":"Speaker 1", "start":"00;09;15;24", "text":" ㅋㅋㅋㅋ"}]'} 
스스로 그런 결정을 하기가 
어렵긴 했었는데 결국 이런 
문제점을 알고도 제품을 출시할
 :exclamationMark[수 없다]{start="00;09;22;21"}는 생각이 더 컸었어요.

그리고 또 신규 :speakBubble[입사자였는데]{data='[{"speaker":"Speaker 1", "start":"00;09;15;24", "text":" ㅋㅋㅋㅋ"}]'} 스스로 그런 결정을 
하기가 어렵긴 했었는데 결국 이런 문제점을 알고도 
제품을 출시할 :exclamationMark[수 없다]{start="00;09;22;21"}는 생각이 더 컸었어요.

그렇군요. 그러면 어디서부터
 고쳐나가기 시작했어요?

그렇군요. 그러면 어디서부터 고쳐나가기 시작했어요?

대부분 결제할 때 카드를 먼저
 :tag[IC 리더기]{start="00;09;32;11" color="rgba(255, 255, 255, 1)"}에 꽂게 되잖아요.

대부분 결제할 때 카드를 먼저 :tag[IC 리더기]{start="00;09;32;11" color="rgba(255, 255, 255, 1)"}에 꽂게 되잖아요.

이렇게 결제건수나 빈도수가 높은
 데이터를 참고해서 :tag[IC 리더기]{start="00;09;37;29" color="rgba(255, 255, 255, 1)"},
 :tag[마그네틱 리더기]{start="00;09;39;00" color="rgba(255, 255, 255, 1)"}, 그리고
 :tag[NFC 리더기]{start="00;09;40;22" color="rgba(255, 255, 255, 1)"} 이렇게 순차적으로
 순위를 매겨 보는 방식으로
 먼저 정리해봤어요.

이렇게 결제건수나 빈도수가 높은 데이터를 참고해서 
:tag[IC 리더기]{start="00;09;37;29" color="rgba(255, 255, 255, 1)"}, :tag[마그네틱 리더기]{start="00;09;39;00" color="rgba(255, 255, 255, 1)"}, 그리고 :tag[NFC 리더기]{start="00;09;40;22" color="rgba(255, 255, 255, 1)"} 
이렇게 순차적으로 순위를 매겨 보는 방식으로 먼저 
정리해봤어요.

그런데 이렇게 정리하고 나니까 
:quoteMark[single-start]{}어, 이 기능들을 :flip[레이어화]{start="00;09;49;07"}시킬 수 
:questionMark[있겠는데]{start="00;09;50;15"}:quoteMark[single-end]싶더라고요.

그런데 이렇게 정리하고 나니까 
:quoteMark[single-start]{}어, 이 기능들을 :flip[레이어화]{start="00;09;49;07"}시킬 수 :questionMark[있겠는데]{start="00;09;50;15"}:quoteMark[single-end]
싶더라고요.

그리고 동시에 이 제품이 
아무래도 :tag[협소한]{start="00;09;53;29" color="rgba(255, 255, 255, 1)"} 매대 위에 
올라가야 될 제품이다 보니까 
최대한 작게 만들어야 된다는 
점을 착안해서 이 레이어들을 좀 
:tag[입체적으로]{start="00;10;00;18" color="rgba(255, 255, 255, 1)"} 배치해 보니까 
기존에 나오지 않았었던 :flip[콤팩트한]{start="00;10;03;15"} 
:flip[제품 구조]{start="00;10;04;12"}를 만들 수 있게 됐어요.

그리고 동시에 이 제품이 아무래도 :tag[협소한]{start="00;09;53;29" color="rgba(255, 255, 255, 1)"} 매대 위에 
올라가야 될 제품이다 보니까 최대한 작게 만들어야 
된다는 점을 착안해서 이 레이어들을 좀 :tag[입체적으로]{start="00;10;00;18" color="rgba(255, 255, 255, 1)"} 
배치해 보니까 기존에 나오지 않았었던 :flip[콤팩트한]{start="00;10;03;15"} 
:flip[제품 구조]{start="00;10;04;12"}를 만들 수 있게 됐어요.

어, 근데 :color[레이어를 정리해서]{start="00;10;07;10"} 
제품의 형상을 만든다는 게 
또 :tag[새롭게]{start="00;10;11;00" color="rgba(255, 255, 255, 1)"} 느껴지기도 하는데요, 
원래 하드웨어 디자이너분들은 
이렇게 작업하시나요?

어, 근데 :color[레이어를 정리해서]{start="00;10;07;10"} 제품의 형상을 
만든다는 게 또 :tag[새롭게]{start="00;10;11;00" color="rgba(255, 255, 255, 1)"} 느껴지기도 하는데요, 
원래 하드웨어 디자이너분들은 이렇게 작업하시나요?

먼저 하드웨어 안에 들어가야 되는
 구조물들을 레고처럼 쌓은 뒤에
 외벽을 만들어가는 방식이 있고요.
카드를 긁는 게 불편하다고 하면 
카드를 긁는 행동을 쉽게 
만들어가는 것부터 디자인을 
시작하는 방식이 있는데요. 

먼저 하드웨어 안에 들어가야 되는 구조물들을 
레고처럼 쌓은 뒤에 외벽을 만들어가는 방식이 있고요.
카드를 긁는 게 불편하다고 하면 카드를 긁는 
행동을 쉽게 만들어가는 것부터 디자인을 시작하는 
방식이 있는데요. 

심플한 결제 단말기,말은 쉬워 보이지만