🌚 닀크λͺ¨λ“œ, μ§„μ§œλ‘œ λˆˆμ— μ’‹μ„κΉŒ? HCI μœ μ € μŠ€ν„°λ”” - (2) λ¦¬μ•‘νŠΈμ—μ„œ μ»΄ν¬λ„ŒνŠΈ λ§Œλ“€κΈ°

broccolismΒ·2021λ…„ 5μ›” 16일
0

HCI user study

λͺ©λ‘ 보기
2/6

λŒ€ν•™κ΅ 2021λ…„ 1ν•™κΈ° μΈκ°„μ»΄ν“¨ν„°μƒν˜Έμž‘μš©(HCI) ν•™λΆ€ κ³Όλͺ©μ„ μˆ˜κ°•ν•˜λ©° μ§„ν–‰ν•œ ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.
μœ μ € μŠ€ν„°λ””μ— μ‚¬μš©ν•œ μ‚¬μ΄νŠΈ: https://hci-proj-1.web.app/
이번 κΈ€μ—μ„œλŠ” ν•΄λ‹Ή μ‚¬μ΄νŠΈλ₯Ό κ°œλ°œν•˜λ©° μžˆμ—ˆλ˜ 일 - λ¦¬νŒ©ν† λ§μ„ μ •λ¦¬ν•©λ‹ˆλ‹€.


λ³΄μ΄μ„Έμš”? μ œκ°€ λ§Œλ“€μ–΄λ‚Έ μˆ˜λ§Žμ€ 쀑볡 μ½”λ“œκ°€...

μ»΄ν¬λ„ŒνŠΈ?

Component의 사전적 μ˜λ―ΈλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • 더 큰 전체 λΆ€λΆ„, 특히 κΈ°κ³„λ‚˜ μ°¨λŸ‰μ˜ λΆ€ν’ˆ λ˜λŠ” μš”μ†Œ (Oxford Languages)
  • λ‹€λ₯Έ λΆ€λΆ„κ³Ό κ²°ν•©ν•˜μ—¬ 더 큰 것을 ν˜•μ„±ν•˜λŠ” λΆ€λΆ„ (Cambridge Dictionary)
  • μ–΄λ–€ κ²ƒμ˜ componentλŠ” 그것이 λ§Œλ“€μ–΄μ§„ λΆ€ν’ˆμ„ λ§ν•œλ‹€. (Collins Cobuild Advanced Learner's English Dictionary)
    πŸ‘‰ 즉, 전체적인 뢀뢄을 μ΄λ£¨λŠ” μž‘μ€ 뢀뢄을 μ˜λ―Έν•©λ‹ˆλ‹€.

μ›Ήμ—μ„œ λ§ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ„ 같은 의미λ₯Ό κ°–μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ λ‹¨μˆœνžˆ 전체λ₯Ό μ΄λ£¨λŠ” μš”μ†ŒλΌλŠ” 의미만 κ°–λŠ” 것은 μ•„λ‹™λ‹ˆλ‹€. μ „μ²΄μ˜ μΌλΆ€λ‘œμ¨ ν•  수 μžˆλŠ”, 그리고 ν•΄μ•Όν•˜λŠ” 역할이 λͺ‡κ°€μ§€ μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό ꡬ글 검색바λ₯Ό 예제둜 정리해보렀 ν•©λ‹ˆλ‹€.

μ—­ν•  1 - μž¬μ‚¬μš©μ„±

μœ„ 3가지 κ²€μƒ‰λ°”λŠ” 각각 ꡬ글 메인 ν™”λ©΄, ꡬ글 검색 κ²°κ³Ό ν™”λ©΄, 이미지 검색 ν™”λ©΄μ—μ„œ λ‚˜νƒ€λ‚˜λŠ” κ²€μƒ‰λ°”μž…λ‹ˆλ‹€. μ„œλ‘œ λ‹€λ₯Έ νŽ˜μ΄μ§€μ—μ„œ λ˜‘κ°™μ€ μš”μ†ŒμΈ '검색바'λ₯Ό 보여주기 μœ„ν•΄, 같은 ν˜•νƒœμ˜ 검색바λ₯Ό μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 이처럼 μ»΄ν¬λ„ŒνŠΈ ν•˜λ‚˜λ₯Ό λ§Œλ“€μ–΄λ†“μœΌλ©΄ μ—¬λŸ¬κ΅°λ°μ—μ„œ μž¬μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ§Œμ•½ 이 검색바λ₯Ό μ»΄ν¬λ„ŒνŠΈλ‘œ λ§Œλ“€μ–΄λ†“μ§€ μ•Šκ³  맀번 μƒˆλ‘­κ²Œ λ§Œλ“€μ–΄μ£Όλ©΄ μ–΄λ–€ 일이 μΌμ–΄λ‚ κΉŒμš”? 검색바λ₯Ό λ‚˜νƒ€λ‚΄κΈ°μœ„ν•œ μ½”λ“œλ₯Ό μ—¬λŸ¬λ²ˆ μž‘μ„±ν•΄μ•Όν•˜λŠ” λ¬Έμ œκ°€ μƒκΉλ‹ˆλ‹€. λ³„λ‘œ 달갑지 μ•Šμ€ 일이죠. λ˜‘κ°™μ€ κ²°κ³Όλ₯Ό μœ„ν•΄ 쀑볡 μž‘μ—…μ„ ν•΄μ•Όν•©λ‹ˆλ‹€. μš°λ¦¬λŠ” 그러고 μžˆμ„ μ‹œκ°„μ΄ μ—†μ–΄μš”! πŸ™ƒ 반면 검색바 μ½”λ“œλ₯Ό ν•œλ²ˆλ§Œ μž‘μ„±ν•˜κ³  이λ₯Ό μ»΄ν¬λ„ŒνŠΈν™”ν•˜μ—¬ κ΄€λ¦¬ν•œλ‹€λ©΄, κ·Έλƒ₯ 검색바가 ν•„μš”ν•œ 곳에 μ΄λŸ°μ‹μœΌλ‘œ μ½”λ“œ ν•œμ€„λ§Œ μΆ”κ°€ν•˜λ©΄ 검색바가 μƒκΈΈκ±°μ—μš”.πŸ™‚

...
  <div>
      <img src={MainLogo} />
      <SearchBarComponent /> ->μ»΄ν¬λ„ŒνŠΈκ°€ 된 검색바
...

μ—­ν• 2 - μœ μ—°μ„±

μŠ€ν¬λ¦°μƒ·μ„ μžμ„Ένžˆ μ‚΄νŽ΄λ³΄λ©΄ 같은 검색바 μ»΄ν¬λ„ŒνŠΈμΈλ°λ„ μ‘°κΈˆμ”© λ‹€λ₯Έ 뢀뢄이 μžˆμŠ΅λ‹ˆλ‹€.

μ™Όμͺ½μ˜ 일반 κ²€μƒ‰μ—λŠ” μ—†λ˜ μ•„μ΄μ½˜ 2κ°œκ°€ 였λ₯Έμͺ½ 이미지 검색에 μƒκ²ΌμŠ΅λ‹ˆλ‹€. 이처럼 μ„œλ‘œ λ‹€λ₯Έ νŽ˜μ΄μ§€μ—μ„œ μ“°μ΄λŠ” μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ„±μƒ 세뢀적인 μš”μ†Œλ₯Ό μΆ”κ°€, μˆ˜μ • λ˜λŠ” μ‚­μ œν•΄μ•Ό ν•˜λŠ” 일이 생기기도 ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ μ»΄ν¬λ„ŒνŠΈ ν•˜λ‚˜λ₯Ό λ§Œλ“€ λ•ŒλŠ” κ·Έ μ•ˆμ˜ μ„ΈλΆ€ μš”μ†Œλ₯Ό λ°”κΏ€ 수 μžˆλ„λ‘ μ„€κ³„ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

μ—­ν• 3 - 일관성

μ»΄ν¬λ„ŒνŠΈμ˜ μž¬μ‚¬μš©μ„± λ•Œλ¬Έμ— μƒκΈ°λŠ” λ˜λ‹€λ₯Έ νŠΉμ„±μ΄ μžˆμŠ΅λ‹ˆλ‹€. λ°”λ‘œ μΌκ΄€μ„±μž…λ‹ˆλ‹€. κ°œλ… ν•˜λ‚˜λ₯Ό ν‘œν˜„ν•˜κΈ° μœ„ν•΄ μ»΄ν¬λ„ŒνŠΈ ν•˜λ‚˜λ§Œμ„ μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— κΈ°λŠ₯μ΄λ‚˜ μŠ€νƒ€μΌμ΄ λ‹¬λΌμ§ˆ 일이 μ—†μŠ΅λ‹ˆλ‹€. μš°λ¦¬κ°€ κ΅¬κΈ€μ˜ 메인 νŽ˜μ΄μ§€μ™€ 이미지 검색 νŽ˜μ΄μ§€μ—μ„œ λ˜‘κ°™μ€ κΈ°λŠ₯κ³Ό μŠ€νƒ€μΌμ„ 가진 검색바λ₯Ό λ³΄λŠ” κ²ƒμ²˜λŸΌ 말이죠. μ»΄ν¬λ„ŒνŠΈν™”λ₯Ό 톡해 μ‚¬μ΄νŠΈμ˜ 전체적인 일관성을 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ¦¬μ•‘νŠΈμ—μ„œ μ»΄ν¬λ„ŒνŠΈν™”ν•˜κΈ°

이제 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“€λ©΄μ„œ μ»΄ν¬λ„ŒνŠΈλ₯Ό ν™œμš©ν•œ μ˜ˆμ‹œλ₯Ό λ³΄μ—¬λ“œλ¦¬λ €ν•©λ‹ˆλ‹€.

μ•„λž˜λŠ” μœ μ € μŠ€ν„°λ””μ— μ‚¬μš©ν–ˆλ˜ μ‚¬μ΄νŠΈμ˜ μΌλΆ€μž…λ‹ˆλ‹€. μ›λž˜ λͺ©μ μ€ 닀크λͺ¨λ“œμ™€ 라이트λͺ¨λ“œμ—μ„œ 글을 읽을 λ•Œ ν”Όλ‘œλ„ 차이λ₯Ό μ•Œμ•„λ³΄λŠ” κ²ƒμ΄μ—ˆμœΌλ‚˜, 이 λͺ©μ μ„ μˆ¨κ²¨μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ 짧은 κΈ€μ—μ„œ νŠΉμ • 단어가 λͺ‡ 번 λ‚˜μ˜€λŠ”μ§€ μ„Έλ©΄μ„œ μžμ—°μŠ€λŸ½κ²Œ κΈ€ 전체λ₯Ό 읽도둝 μœ λ„ν–ˆμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€μ—μ„œ κ³΅ν†΅μœΌλ‘œ μ‚¬μš©ν•˜λŠ” μš”μ†ŒλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • λ¬΄μ§€κ°œ λͺ¨μ–‘ μ•„μ΄μ½˜
  • "** (이)λΌλŠ” 단어가 총 λͺ‡ 번 λ‚˜μ˜€λ‚˜μš”?", "λ²„νŠΌμ„ 눌러 ~ μ‘°μ ˆν•˜μ§€ λ§ˆμ„Έμš”." 문ꡬ
  • κΈ€μž 밝기 μ‘°μ • λ²„νŠΌ
  • 배경색이 μžˆλŠ” 짧은 κΈ€
  • 숫자λ₯Ό μž…λ ₯ν•˜λŠ” ν•„λ“œ
  • λ‹€μŒμœΌλ‘œ λ„˜μ–΄κ°€λŠ” λ²„νŠΌ

반면 맀번 λ‹¬λΌμ Έμ•Όν•˜λŠ” μš”μ†Œλ„ μžˆμŠ΅λ‹ˆλ‹€.

  • μ°Ύμ•„μ•Όν•˜λŠ” 단어
  • μ‚¬μš©μžκ°€ 읽을 짧은 κΈ€μ˜ λ‚΄μš©
  • 닀크λͺ¨λ“œμΌ 경우, κΈ€μž μƒ‰μƒμ˜ μ΄ˆκΈ°κ°’
  • 배경색

μ²˜μŒμ—λŠ” Ctrl + C, Ctrl + V의 μœ ν˜Ήμ— λΉ μ Έ 각 νŽ˜μ΄μ§€λ³„λ‘œ νŒŒμΌμ„ ν•˜λ‚˜μ”© λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. κ·Έλ ‡κ²Œ ν•˜λ‹€λ³΄λ‹ˆ μ—„μ²­λ‚œ λ¬Έμ œκ°€ 생기기 μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€.

  1. κ°€μž₯ λ¨Όμ €, μ½”λ“œκ°€ 맀우 λ”λŸ¬μ›Œμ‘ŒμŠ΅λ‹ˆλ‹€.
    • 쀑볡 μ½”λ“œκ°€ λ¬΄λ”κΈ°λ‘œ 생겼기 λ•Œλ¬Έμ΄μ£ .
  2. ν•˜λ‚˜λ₯Ό μˆ˜μ •ν•˜κΈ° μœ„ν•΄ μˆ˜μ • μž‘μ—…μ΄ N번 ν•„μš”ν–ˆμŠ΅λ‹ˆλ‹€.
    • 예λ₯Ό λ“€μ–΄, "밝게" λ²„νŠΌ ν•˜λ‚˜μ˜ μ‚¬μ΄μ¦ˆλ₯Ό 고치렀면 λ˜‘κ°™μ€ μž‘μ—…μ„ νŽ˜μ΄μ§€ 갯수만큼 ν•΄μ€˜μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€.
  3. μƒˆ νŽ˜μ΄μ§€λ₯Ό μΆ”κ°€ν•˜κΈ° μœ„ν•΄ λ˜λ‹€μ‹œ 쀑볡 μ½”λ“œλ₯Ό λ§Œλ“€μ–΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€.
  4. κΈ°μ‘΄ νŽ˜μ΄μ§€λ₯Ό μ‚­μ œν•˜κΈ° μœ„ν•΄ μ—¬λŸ¬ κ΅°λ°μ—μ„œ μ½”λ“œλ₯Ό 고쳐야 ν–ˆμŠ΅λ‹ˆλ‹€.

🧹 μ΄λŒ€λ‘œλŠ” μ•ˆ λ˜κ² λ‹€ μ‹Άμ–΄ νŽ˜μ΄μ§€ 자체λ₯Ό μ»΄ν¬λ„ŒνŠΈλ‘œ λ§Œλ“€μ–΄λ²„λ¦¬κΈ°λ‘œ ν–ˆμŠ΅λ‹ˆλ‹€. κ³΅ν†΅μ μœΌλ‘œ μ‚¬μš©ν•˜λŠ” μš”μ†Œλ₯Ό λ¨Όμ € λ§Œλ“€κ³ , νŽ˜μ΄μ§€λ³„λ‘œ λ‹¬λΌμ Έμ•Όν•˜λŠ” μš”μ†ŒλŠ” props둜 λ°›κ²Œ ν–ˆμŠ΅λ‹ˆλ‹€.


그리고 μ°Ύμ•„μ•Ό ν•˜λŠ” 단어와 짧은 글은 λ”°λ‘œ constant둜 λΉΌμ„œ κ΄€λ¦¬ν•˜κΈ°λ‘œ ν–ˆμŠ΅λ‹ˆλ‹€.

μ½”λ“œμ˜ μΌλΆ€λ§Œ 봐도 μ–Όλ§ˆλ‚˜ 쀑볡 μ½”λ“œκ°€ 많이 μ‚¬λΌμ‘ŒλŠ”μ§€ μ•Œ 수 있겠죠? λ¦¬νŒ©ν† λ§μ„ 마친 λ’€ μ•„λž˜μ™€ 같은 μž₯점이 μƒκ²ΌμŠ΅λ‹ˆλ‹€.

  1. βœ¨κΉ”λ”ν•œ μ½”λ“œβœ¨
  2. ν•˜λ‚˜λ₯Ό μˆ˜μ •ν•˜κΈ° μœ„ν•΄ μˆ˜μ • μž‘μ—…μ„ 1번만 ν•˜λ©΄ λ©λ‹ˆλ‹€.
  3. νŽ˜μ΄μ§€λ³„ μˆ˜μ • 사항이 생길 λ•Œ constant 파일만 고치면 λ°”λ‘œ μ μš©λ©λ‹ˆλ‹€.
  4. μƒˆ νŽ˜μ΄μ§€λ₯Ό μΆ”κ°€ν•˜κΈ° νŽΈλ¦¬ν•΄μ‘ŒμŠ΅λ‹ˆλ‹€.
profile
μžλΌλŠ” 브둜콜리 | 글에 λŒ€ν•œ 의견 ν™˜μ˜ν•©λ‹ˆλ‹€: mile3880@gmail.com

0개의 λŒ“κΈ€