๐Ÿ’ป ์–ผ๋งˆ๋‚˜ ์ž˜ ์ž…๋ ฅํ•˜๋‚˜์š”? HCI ์œ ์ € ์Šคํ„ฐ๋”” - (2) ์‹คํ—˜ ์ƒ์„ธ ์„ค๊ณ„

Broccolismยท2021๋…„ 8์›” 13์ผ
1

HCI user study

๋ชฉ๋ก ๋ณด๊ธฐ
5/6
post-custom-banner

๋Œ€ํ•™๊ต 2021๋…„ 1ํ•™๊ธฐ ์ธ๊ฐ„์ปดํ“จํ„ฐ์ƒํ˜ธ์ž‘์šฉ(HCI) ํ•™๋ถ€ ๊ณผ๋ชฉ์„ ์ˆ˜๊ฐ•ํ•˜๋ฉฐ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค.
์œ ์ € ์Šคํ„ฐ๋””์— ์‚ฌ์šฉํ•œ ์‚ฌ์ดํŠธ: https://odd-keyboard.web.app/
๊นƒํ—ˆ๋ธŒ: https://github.com/broccolism/HCI-where-they-touch
์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์ƒ์„ธํ•œ ์‹คํ—˜ ์„ค๊ณ„ ๊ณผ์ •์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ๊ณ ๋ฏผํ–ˆ๋˜ ๋‚ด์šฉ

์ด๋ฒˆ ์œ ์ € ์Šคํ„ฐ๋””์—์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์Šค๋งˆํŠธํฐ ํ™”๋ฉด์˜ ์–ด๋Š ๋ถ€๋ถ„์„ ํ„ฐ์น˜ํ–ˆ๋Š”์ง€ (x, y) ์ขŒํ‘œ๋ฅผ ๊ธฐ๋กํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ๋‹จ์ˆœํžˆ ์œ ์ €์˜ ํ„ฐ์น˜ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€ํ•˜๊ณ , ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ๋งˆ๋‹ค pageX, pageY ๊ฐ’์„ ๋ฐ›์•„์˜ค๋ฉด ๋๋‚  ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ...

์„œ๋กœ ๋‹ค๋ฅธ ํฌ๊ธฐ์˜ ์Šค๋งˆํŠธํฐ

์ด๋ ‡๊ฒŒ ์Šค๋งˆํŠธํฐ ํ™”๋ฉด ํฌ๊ธฐ๊ฐ€ ์ฒœ์ฐจ๋งŒ๋ณ„์ธ ๊ฒƒ์ด์ฃ . ์ด๋ฒˆ์—๋„ ํ‰ํ™”๋กœ์šด ์ฝ”๋”ฉ ์‹œ๊ฐ„์€ ๋ฌผ๊ฑด๋„ˆ๊ฐ”๋‹ค๋Š”๊ฑธ ์ง๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

์ƒ๊ฐ์˜ ํ๋ฆ„

๐Ÿ“ฑ ๊ธฐ์ข…๋ณ„๋กœ ๊ฐ€๋กœ, ์„ธ๋กœ ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฅด๋‹ˆ๊นŒ ํ„ฐ์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ”ฝ์…€ ์˜์—ญ์˜ ์ตœ๋Œ“๊ฐ’์ด ๋‹ฌ๋ผ์ง

๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜์ง€ ๋ง๊ณ  ๋ฌด์กฐ๊ฑด ์™ผ์ชฝ ์ •๋ ฌ์„ ์‚ฌ์šฉํ•˜์ž!
๊ทธ๋Ÿฌ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ `pageX = 0` ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋‹ˆ๊นŒ ๊ดœ์ฐฎ์„๋“ฏ.

๐Ÿ“ ์™ผ์ชฝ ์ •๋ ฌ์„ ํ•ด๋„ ๊ฐ€๋กœ๋กœ ๊ธธ์ด๊ฐ€ ๊ธด ์ปดํฌ๋„ŒํŠธ๋ผ๋ฉด ๋˜‘๊ฐ™์€ ๋ฌธ์ œ ๋ฐœ์ƒ

๊ทธ๋Ÿฌ๋ฉด ์‚ฌ์šฉ์ž๋ณ„๋กœ ํœด๋Œ€ํฐ ํ™”๋ฉด์˜ width๊ฐ’์„ ๋ฐ›์•„์„œ ์ €์žฅํ•ด๋†“์ž.

๐Ÿ˜‡ ๊ทผ๋ฐ ๊ทธ๊ฑฐ ์ €์žฅํ•ด์„œ ๋ญ ์–ด๋–ป๊ฒŒ ํ• ๊ฑด๋ฐ??

...
...
ํฌ๊ธฐ์™€ ์œ„์น˜ ๋ชจ๋‘ ํผ์„ผํŠธ๋ฉด ๊ธฐ์ค€ ํ™”๋ฉด์— ๋งž์ถฐ scaling์„ ํ•ด์„œ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ๊ฒ ๊ตฌ๋‚˜!

๐Ÿ” ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด ํ™”๋ฉด์ด ํฐ ์‚ฌ๋žŒ์ผ์ˆ˜๋ก ํ‚ค๋ณด๋“œ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ปค์งˆํ…๋ฐ?

๊ทธ๋Ÿผ ์•ˆ๋˜์ง€.. ํ‚ค๋ณด๋“œ ์‚ฌ์ด์ฆˆ๋Š” ํ†ต์ œ๋ณ€์ธ์ด๋‹ค.
...
๊ทธ๋ ‡๋‹ค๋ฉด ๊ธฐ์ค€ ๊ฐ€๋กœ ํญ์„ ์ •ํ•œ ๋‹ค์Œ ๋‚˜๋จธ์ง€ ์ขŒ์šฐ ๊ณต๊ฐ„์€ ๊นŒ๋งฃ๊ฒŒ ์—ฌ๋ฐฑ์œผ๋กœ ๋‚จ๊ธฐ์ž.
์ดํ›„ ๊ธฐ๋ก์—์„œ ์‚ฌ์šฉ์ž ํ™”๋ฉด์— ๋”ฐ๋ฅธ ์™ผ์ชฝ ์—ฌ๋ฐฑ ๊ธธ์ด๋งŒ ๋นผ์ฃผ๋ฉด ๋จ!

๐Ÿฅณ ๋“œ๋””์–ด ๊ฒฐ๋ก : ๊ธฐ์ค€ ๊ฐ€๋กœ ํญ์„ ์ •ํ•œ ๋‹ค์Œ, ๋‚˜๋จธ์ง€ ๊ณต๊ฐ„์€ ์—ฌ๋ฐฑ์œผ๋กœ ์ฒ˜๋ฆฌ
๊ทธ๋ž˜์„œ ์ด๋Ÿฐ ํ™”๋ฉด์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค.
์—ฌ๋ฐฑ์ฒ˜๋ฆฌ
๊ฐ€์šด๋ฐ ์˜์—ญ์€ ๊ฐ€๋กœ 350px๋กœ, ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ ์Šค๋งˆํŠธํฐ ๊ฐ€๋กœ ํฌ๊ธฐ๋ณด๋‹ค ์ž‘์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ์—ฌ๋ฐฑ ๋ถ€๋ถ„์„ ์ œ์™ธํ•˜๊ณ  ๊ฐ™์€ ๋ชจ์Šต์„ ๋ณด๊ณ  ๊ฐ™์€ ์œ„์น˜์— ํ„ฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ๋‹ค์Œ์œผ๋กœ ๊ณ ๋ฏผํ–ˆ๋˜ ๋‚ด์šฉ

๊ต์ˆ˜๋‹˜ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์€ ํ›„ ์ด๋Ÿฐ ๊ณ ๋ฏผ๊ฑฐ๋ฆฌ๋„ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค.

  1. ๋ฒ„ํŠผ ์—…/๋‹ค์šด ์ค‘ ์–ด๋Š ์‹œ์ ์˜ ์ขŒํ‘œ๋ฅผ ๊ธฐ๋กํ•  ๊ฒƒ์ธ์ง€
  2. ๊ด€์‹ฌ ์˜์—ญ(region of interest)์„ ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•  ๊ฒƒ์ธ์ง€
  3. ์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ณด๋“œ์˜ ํ‚ค ๋ถ€๋ถ„์ด ์•„๋‹Œ ์—ฌ๋ฐฑ ๋ถ€๋ถ„์„ ํ„ฐ์น˜ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•  ๊ฒƒ์ธ์ง€

1. ๋ฒ„ํŠผ ์—…/๋‹ค์šด

โœ… ๋ฒ„ํŠผ ์—… ์‹œ์ ์˜ ์ขŒํ‘œ๋ฅผ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.

key popup
์Šค๋งˆํŠธํฐ ํ‚ค๋ณด๋“œ์—์„œ ์ด๋ ‡๊ฒŒ ํ‚ค๋ฅผ ๋ˆ„๋ฅด๋ฉด ์–ด๋–ค ํ‚ค๋ฅผ ๋ˆŒ๋ €๋Š”์ง€ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ํ™•๋Œ€ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด, ์ฒ˜์Œ์—๋Š” A๋ฅผ ๋ˆŒ๋ €๋‹ค๊ฐ€ ์†๊ฐ€๋ฝ์„ ๋–ผ์ง€ ์•Š๊ณ  D๋กœ ์ด๋™ํ•˜๋ฉด ํ™•๋Œ€ํ•ด์ฃผ๋Š” ํ‚ค ์—ญ์‹œ D๊ฐ€ ๋˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์ฃ . ์ฆ‰, ์ฒ˜์Œ ํ‚ค๋ฅผ ๋ˆ„๋ฅด๋Š” ์ˆœ๊ฐ„ ์ž…๋ ฅ์œผ๋กœ ๋ฐ›์•„๋“ค์ด์ง€ ์•Š๊ณ  ์†๊ฐ€๋ฝ์„ ํ™”๋ฉด์—์„œ ๋—์„ ๋•Œ ์ž…๋ ฅ์œผ๋กœ ๋ฐ›์•„๋“ค์ด๋Š”๊ฒ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๋ฒˆ ์œ ์ €์Šคํ„ฐ๋””์—์„œ๋„ ๋ฒ„ํŠผ ์—… ์‹œ์ ์˜ ์ขŒํ‘œ๋ฅผ ๊ธฐ๋กํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

2. ๊ด€์‹ฌ ์˜์—ญ ์„ค์ •

โœ… ํ‚ค ์‚ฌ์ด ์—ฌ๋ฐฑ๋„ ROI๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

๊ด€์‹ฌ ์˜์—ญ (ROI, Region Of Interest) ์ด๋ž€ ์ „์ฒด ๋ฐ์ดํ„ฐ์…‹์—์„œ ํŠน์ • ๋ชฉ์ ์œผ๋กœ ์„ ๋ณ„๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ์‹คํ—˜์—์„œ์˜ ROI๋Š” '์‚ฌ์šฉ์ž๊ฐ€ ์Šคํฌ๋ฆฐ์„ ํ„ฐ์น˜ํ•œ ์˜์—ญ'์ด ๋˜๊ฒ ๋„ค์š”. ๊ทธ๋Ÿฐ๋ฐ ํ‚ค๋ณด๋“œ์—๋Š” ๋ˆ„๋ฅผ ์ˆ˜ ์žˆ๋Š” ํ‚ค๋งŒ ์žˆ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ, ํ‚ค ์‚ฌ์ด์‚ฌ์ด์˜ ๋นˆ ๊ณต๊ฐ„๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์˜์—ญ๊นŒ์ง€ ROI๋กœ ๋„ฃ๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

3. ์—ฌ๋ฐฑ ๋ถ€๋ถ„ ํ„ฐ์น˜ ํ•ธ๋“ค๋ง

โœ… ํ…Œ์ŠคํŠธ์˜ ์ ˆ๋ฐ˜์€ ์—ฌ๋ฐฑ์„ ํ„ฐ์น˜ํ–ˆ์„ ๋•Œ ์ž…๋ ฅ์œผ๋กœ ๊ฐ„์ฃผํ•˜๊ณ ,
   ๋‚˜๋จธ์ง€๋Š” ์—ฌ๋ฐฑ์„ ํ„ฐ์น˜ํ•ด๋„ ์ž…๋ ฅ๋˜์ง€ ์•Š๊ฒŒ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

ROI์— ์—ฌ๋ฐฑ๋„ ํฌํ•จ๋œ ์ด์œ ๊ฐ€ ์—ฌ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณผ์—ฐ ํ‚ค๋ณด๋“œ ์‚ฌ์ด ์—ฌ๋ฐฑ์˜ ํ„ฐ์น˜๋ฅผ ํ—ˆ์šฉ(= ์ž…๋ ฅ์œผ๋กœ ๊ฐ„์ฃผ)ํ•  ๋•Œ์™€ ๊ทธ๋ ‡์ง€ ์•Š์„ ๋•Œ ์‚ฌ์šฉ๊ฐ ์ฐจ์ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋‚ ์ง€ ๋น„๊ตํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์‹คํ—˜ ๊ฒฐ๊ณผ๋ฅผ ๋ถ„์„ํ•˜๋ฉด์„œ ์ด ๋ถ€๋ถ„์ด ๊ฐ€์žฅ ๋น„๊ต๊ฐ€ ์ž˜ ๋˜์—ˆ๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ๊ธ€์—์„œ๋Š” ์ด ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ํ”„๋กœ์ ํŠธ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์„ ์ ์–ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

profile
์„ค๊ณ„๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋„ ์ ๊ณ  ๊ทธ๋ฆผ๋„ ๊ทธ๋ฆฌ๊ณ  ๊ธ€๋„ ์”๋‹ˆ๋‹ค. ๋„“๊ณ  ์–•์€ ๊ฒฝํ—˜์„ ์Œ“๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€