๐ป ์ผ๋ง๋ ์ ์ ๋ ฅํ๋์? HCI ์ ์ ์คํฐ๋ - (2) ์คํ ์์ธ ์ค๊ณ
๋ํ๊ต 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๋ก, ๊ฑฐ์ ๋๋ถ๋ถ์ ์ค๋งํธํฐ ๊ฐ๋ก ํฌ๊ธฐ๋ณด๋ค ์์ต๋๋ค. ๋ฐ๋ผ์ ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ฌ๋ฐฑ ๋ถ๋ถ์ ์ ์ธํ๊ณ ๊ฐ์ ๋ชจ์ต์ ๋ณด๊ณ ๊ฐ์ ์์น์ ํฐ์นํ ์ ์์ต๋๋ค.
๊ทธ ๋ค์์ผ๋ก ๊ณ ๋ฏผํ๋ ๋ด์ฉ
๊ต์๋ ํผ๋๋ฐฑ์ ๋ฐ์ ํ ์ด๋ฐ ๊ณ ๋ฏผ๊ฑฐ๋ฆฌ๋ ์๊ฒผ์ต๋๋ค.
- ๋ฒํผ ์ /๋ค์ด ์ค ์ด๋ ์์ ์ ์ขํ๋ฅผ ๊ธฐ๋กํ ๊ฒ์ธ์ง
- ๊ด์ฌ ์์ญ(region of interest)์ ์ด๋ป๊ฒ ์ค์ ํ ๊ฒ์ธ์ง
- ์ฌ์ฉ์๊ฐ ํค๋ณด๋์ ํค ๋ถ๋ถ์ด ์๋ ์ฌ๋ฐฑ ๋ถ๋ถ์ ํฐ์นํ๋ฉด ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ๊ฒ์ธ์ง
1. ๋ฒํผ ์ /๋ค์ด
โ
๋ฒํผ ์
์์ ์ ์ขํ๋ฅผ ๊ธฐ๋กํฉ๋๋ค.
์ค๋งํธํฐ ํค๋ณด๋์์ ์ด๋ ๊ฒ ํค๋ฅผ ๋๋ฅด๋ฉด ์ด๋ค ํค๋ฅผ ๋๋ ๋์ง ๋ณผ ์ ์๊ฒ ํ๋ํด์ฃผ๋ ๊ธฐ๋ฅ์ด ์์ต๋๋ค. ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ค๋ณด๋ฉด, ์ฒ์์๋ A๋ฅผ ๋๋ ๋ค๊ฐ ์๊ฐ๋ฝ์ ๋ผ์ง ์๊ณ D๋ก ์ด๋ํ๋ฉด ํ๋ํด์ฃผ๋ ํค ์ญ์ D๊ฐ ๋๋ ๊ฒ์ ์ ์ ์์ฃ . ์ฆ, ์ฒ์ ํค๋ฅผ ๋๋ฅด๋ ์๊ฐ ์
๋ ฅ์ผ๋ก ๋ฐ์๋ค์ด์ง ์๊ณ ์๊ฐ๋ฝ์ ํ๋ฉด์์ ๋์ ๋ ์
๋ ฅ์ผ๋ก ๋ฐ์๋ค์ด๋๊ฒ๋๋ค. ๋ฐ๋ผ์ ์ด๋ฒ ์ ์ ์คํฐ๋์์๋ ๋ฒํผ ์
์์ ์ ์ขํ๋ฅผ ๊ธฐ๋กํ๊ธฐ๋ก ํ์ต๋๋ค.
2. ๊ด์ฌ ์์ญ ์ค์
โ
ํค ์ฌ์ด ์ฌ๋ฐฑ๋ ROI๋ก ์ค์ ํฉ๋๋ค.
๊ด์ฌ ์์ญ (ROI, Region Of Interest) ์ด๋ ์ ์ฒด ๋ฐ์ดํฐ์ ์์ ํน์ ๋ชฉ์ ์ผ๋ก ์ ๋ณ๋ ๋ฐ์ดํฐ๋ฅผ ๋งํฉ๋๋ค. ์ด๋ฒ ์คํ์์์ ROI๋ '์ฌ์ฉ์๊ฐ ์คํฌ๋ฆฐ์ ํฐ์นํ ์์ญ'์ด ๋๊ฒ ๋ค์. ๊ทธ๋ฐ๋ฐ ํค๋ณด๋์๋ ๋๋ฅผ ์ ์๋ ํค๋ง ์๋๊ฒ ์๋๋ผ, ํค ์ฌ์ด์ฌ์ด์ ๋น ๊ณต๊ฐ๋ ์์ต๋๋ค. ์ด ์์ญ๊น์ง ROI๋ก ๋ฃ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค.
3. ์ฌ๋ฐฑ ๋ถ๋ถ ํฐ์น ํธ๋ค๋ง
โ
ํ
์คํธ์ ์ ๋ฐ์ ์ฌ๋ฐฑ์ ํฐ์นํ์ ๋ ์
๋ ฅ์ผ๋ก ๊ฐ์ฃผํ๊ณ ,
๋๋จธ์ง๋ ์ฌ๋ฐฑ์ ํฐ์นํด๋ ์
๋ ฅ๋์ง ์๊ฒ ์ค์ ํฉ๋๋ค.
ROI์ ์ฌ๋ฐฑ๋ ํฌํจ๋ ์ด์ ๊ฐ ์ฌ๊ธฐ์ ์์ต๋๋ค. ๊ณผ์ฐ ํค๋ณด๋ ์ฌ์ด ์ฌ๋ฐฑ์ ํฐ์น๋ฅผ ํ์ฉ(= ์ ๋ ฅ์ผ๋ก ๊ฐ์ฃผ)ํ ๋์ ๊ทธ๋ ์ง ์์ ๋ ์ฌ์ฉ๊ฐ ์ฐจ์ด๊ฐ ์ผ๋ง๋ ๋ ์ง ๋น๊ตํด๋ณด๊ณ ์ถ์์ต๋๋ค. ์คํ ๊ฒฐ๊ณผ๋ฅผ ๋ถ์ํ๋ฉด์ ์ด ๋ถ๋ถ์ด ๊ฐ์ฅ ๋น๊ต๊ฐ ์ ๋์๋ค๊ณ ๋๊ผ์ต๋๋ค.
๋ค์ ๊ธ์์๋ ์ด ๋ด์ฉ์ ๋ฐํ์ผ๋ก ํ๋ก์ ํธ ๊ตฌํํ๋ ๊ณผ์ ์ ์ ์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ป ์ผ๋ง๋ ์ ์ ๋ ฅํ๋์? HCI ์ ์ ์คํฐ๋ - (2) ์คํ ์์ธ ์ค๊ณ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@broccolism/์ผ๋ง๋-์-์ ๋ ฅํ๋์-HCI-์ ์ -์คํฐ๋-2-์คํ-์์ธ-์ค๊ณ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค