ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [UIUX κ°œμ„  ν”„λ‘œμ νŠΈ 1μ°¨] 7μ£Όμ°¨ | ν˜„λŒ€μΉ΄λ“œ μœ μ € λ¦¬μ„œμΉ˜
      π™―π™šπ™§π™€ π™—π™–π™¨π™š/πš™πš›πš˜πš“πšŽπšŒπš 2024. 11. 13. 02:35

       

      7μ£Όμ°¨

      πŸ’΅ λ¬Έμ œν•΄κ²° μ œμ‹œ πŸ’΅

       

       

       

       

      πŸ’΅ INTRO

      이전 μ£Όμ°¨μ—μ„œλŠ” 문제 μ •μ˜λ₯Ό 톡해 정리λ₯Ό μ§„ν–‰ν•˜μ˜€κ³ , μƒμ„Έν•˜κ²Œ ν•­λͺ©μœΌλ‘œ 정리해 ν•΄κ²° λ°©μ•ˆμ„ μ œμ‹œν•˜κ³ μž ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ–΄λ–»κ²Œ ν•΄κ²°ν•œ 것인지에 λŒ€ν•΄μ„œλŠ” λΉ„μŠ·ν•œ μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ 앱듀을 λ²€μΉ˜λ§ˆν‚Ή ν•˜μ˜€κ³ , μ΄μ „μ˜ μœ μ € νΌμ†Œλ‚˜λ₯Ό μ΄μš©ν•΄ μœ μ € μ €λ‹ˆλ§΅μ„ μ œμž‘ν•΄ κ·Έ κ³Όμ • μ‚¬μ΄μ˜ 또 λ‹€λ₯Έ κ°œμ„ μ μ— λŒ€ν•΄μ„œλ„ ν™•μΈν•˜μ˜€μŠ΅λ‹ˆλ‹€. 이번 μ£Όμ—λŠ” λͺ¨λ“  것을 톡틀어 μ–΄λ–€ ν•΄κ²° λ°©μ•ˆμ„ νƒν•˜κ³ , 그것을 κ΅¬ν˜„ν•  것인지 κ°„λž΅ν•œ 와이어 ν”„λ ˆμž„μ„ 톡해 λ³΄μ—¬λ“œλ¦΄ μ˜ˆμ •μž…λ‹ˆλ‹€.

       

       

       

       

      πŸ’΅ WIREFRAME

      ∗ μ΄μ „μ˜ μœ μ € μ €λ‹ˆλ§΅μ„ ν†΅ν•΄μ„œ κ΅¬μ„±ν•œ ν”Œλ‘œμš°μ— 따라 와이어 ν”„λ ˆμž„μ„ μž‘μ—…ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

      🎯 ν™ˆ ν™”λ©΄μ—μ„œ μ£Όμš” κΈ°λŠ₯을 효과적으둜 μ ‘κ·Όν•  수 μžˆλ„λ‘ ν•˜κ³ , μ΅œμ’…μ μœΌλ‘œ λͺ…μ„Έμ„œκΉŒμ§€ λ„λ‹¬ν•΄μ„œ μ†ŒλΉ„ 관리와 κ΄€λ ¨λœ κΈ°λŠ₯을 ν•œλ²ˆμ— μ²˜λ¦¬ν•  수 μžˆλ„λ‘ ν•˜μž.

       

       

      🎯 ν™ˆ ν™”λ©΄μ—μ„œ μ£Όμš” κΈ°λŠ₯을 효과적으둜 μ ‘κ·Όν•  수 있게 ν•˜κ³ , 싀적과 κ΄€λ ¨λœ λ‚΄μš©μ„ ν•œλˆˆμ— λ³Ό 수 μžˆλ„λ‘ ν•˜λ©°, μ•ˆλ‚΄λ‘œ 이동할 수 μžˆλŠ” 루트 λ§λΆ™μ΄κΈ°.

       

       

       

       

      πŸ’΅ WIREFRAME - DETAIL

      ∗ μœ„μ—μ„œ κ΅¬μ„±ν–ˆλ˜ 와이어 ν”„λ ˆμž„μ— 따라 λ‚΄λΆ€ λ¦¬μ†ŒμŠ€λ₯Ό μ΄μš©ν•΄ μ£Όμš” 화면듀을 μ™„μ„±λœ λ””μžμΈμ˜ ν˜•νƒœλ‘œ μž‘μ—…ν•΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.

       

       

      βž€ ν™ˆ ν™”λ©΄μ˜ 상단 νƒ­μ—μ„œλŠ” ν˜„λŒ€μΉ΄λ“œ μ„œλΉ„μŠ€μ˜ μ£Ό 베넀핏 쀑 ν•˜λ‚˜μΈ 3μΈ΅ μ‹œμŠ€ν…œμ„ μ΅μˆ™ν•˜κ²Œ λ§Œλ“€κ³ , ν™•μ‹€ν•˜κ²Œ λͺ…μ‹œν•˜κΈ° μœ„ν•œ μš©μ–΄ 정리λ₯Ό μ§„ν–‰ν•˜μ˜€μŠ΅λ‹ˆλ‹€. λ‚΄ ν˜œνƒκ³Ό ν˜œνƒ, 1μΈ΅ κΈ°λ³Έ λ“±, ν˜œνƒκ³Ό κ΄€λ ¨λœ λ‹€λ₯Έ μš©μ–΄λ₯Ό ν†΅μΌν•˜κ³ μž ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

      β‘‘ ν™ˆ ν™”λ©΄μ—μ„œλŠ” λ²€μΉ˜λ§ˆν‚Ή ν–ˆλ˜ 것과 λΉ„μŠ·ν•˜κ²Œ λŒ€λΆ€λΆ„μ˜ κΈ°λŠ₯을 λ°°μΉ˜ν•˜λ €κ³  ν•˜μ˜€μœΌλ©°, μ‚¬μš©μžκ°€ μƒκ°ν•˜λŠ” μ£Ό κΈ°λŠ₯ 쀑 λͺ…μ„Έμ„œλ₯Ό 상단에 λ°°μΉ˜ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 

       

      β‘’ 기쑴에 μ‹œκ°μ μœΌλ‘œ 확인이 μ–΄λ €μ› λ˜ ν™”μ‚΄ν‘œλ₯Ό μ œκ±°ν•˜κ³ , ν•˜λ‹¨μ— λ²„νŠΌμ„ μΆ”κ°€ν•˜μ—¬ 접근성을 λ†’μ˜€μŠ΅λ‹ˆλ‹€.

       

      β‘£ 기쑴에 ν•˜λ‹¨ ν† μŠ€νŠΈ μ˜μ—­μ— μžˆμ—ˆλ˜ μ†ŒλΉ„ μΊ˜λ¦°λ”λ₯Ό ν™ˆ 화면에 λ°°μΉ˜ν•˜κ³ , λ™μΌν•˜κ²Œ μ£Όκ°„ μΊ˜λ¦°λ”λ§Œ μš°μ„ μ μœΌλ‘œ λ³΄μ—¬μ£ΌλŠ” 걸둜 κ΅¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€. μ΄μ „κ³Όμ˜ 차이점은 이번 μ£Ό λ‚΄μ˜ 상세 내역도 ν•¨κ»˜ λ³΄μ—¬μ€ŒμœΌλ‘œμ¨ κ°„λ‹¨ν•œ 내역은 ν™ˆ ν™”λ©΄μ—μ„œ λ°”λ‘œ 확인할 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

      β‘€ μ΄μ „μ—λŠ” λͺ¨λ“  ν˜œνƒμ΄λ‚˜ κ΄€λ ¨ ν”„λ‘œλͺ¨μ…˜λ“€μ„ ν™ˆ ν™”λ©΄μ—μ„œ ν”Όλ“œμ˜ ν˜•μ‹μœΌλ‘œ λ³΄μ—¬μ£ΌλŠ” λ°©μ‹μ΄μ—ˆμœΌλ‚˜, κΈ°λŠ₯을 λ¬Άμ–΄μ„œ λ³΄μ—¬μ£ΌλŠ” μ •λˆλœ 방식을 νƒν–ˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” ν•˜λ‹¨μ— μƒμˆ ν•  β‘₯번 κΈ°λŠ₯을 μ΄μš©ν•΄ μ–΄λ–€ κ΅¬μ„±μœΌλ‘œ 보여쀄지 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

       

      β‘₯ ν•˜λ‹¨λΆ€μ—λŠ” λ²€μΉ˜λ§ˆν‚Ή ν–ˆλ˜ 타 μ„œλΉ„μŠ€μ™€ λ™μΌν•˜κ²Œ μš°μ„ μœΌλ‘œ 보고 싢은 κΈ°λŠ₯을 상단에 λ°°μΉ˜ν•˜κ±°λ‚˜ μˆœμ„œλ₯Ό λ°”κΏ€ 수 μžˆλ„λ‘ κΈ°λŠ₯ μΆ”κ°€λ₯Ό ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 

       

      ⑦ κΈ°μ‘΄μ—λŠ” μ˜ˆμ • λͺ…μ„Έμ„œμ—λŠ” λ”°λ‘œ ν•„ν„°λ₯Ό μ μš©ν•˜λŠ” κΈ°λŠ₯이 μ—†μ—ˆμœΌλ‚˜, ν•΄λ‹Ή ν™”λ©΄μ—μ„œλ„ ν•„ν„°λ₯Ό 미리 λ°”λ‘œ μ μš©ν•  수 있게 ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

      ⑧ 기쑴에 μ–΄λ–€ κΈ°λŠ₯을 μ˜λ―Έν•˜λŠ”μ§€, λ˜ν•œ μ ‘κ·Όμ„± 문제둜 ν˜Όλž€μ„ μ£Όμ—ˆλ˜ 상단 κ·Έλž˜ν”„ ν˜•νƒœμ˜ μ•„μ΄μ½˜μ„ μ œκ±°ν•˜κ³ , 잘 λ³΄μ΄λŠ” ν•˜λ‹¨μ— λ°”λ‘œ μ ‘κ·Όν•  수 μžˆλ„λ‘ λ²„νŠΌ ν˜•νƒœλ‘œ μΆ”κ°€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

       

       

       

      βž€ 슀크둀 μ˜μ—­μ΄ κΈΈμ–΄ ν•œλˆˆμ— 보기 νž˜λ“€μ—ˆλ˜ 전체 싀적 내역은 ν•œλ²ˆμ— 이번 달, λ‹€μŒ 달 νƒ­μœΌλ‘œ λ¬Άμ–΄ λ‹¬μ„±μΉ˜λ₯Ό λ³Ό 수 μžˆλ„λ‘ λ³€κ²½ν•˜μ˜€μŠ΅λ‹ˆλ‹€. 상세 싀적 ν•­λͺ©μ„ 보고 μ‹Άλ‹€λ©΄ 각 ν•­λͺ©λ‹Ή ν™”μ‚΄ν‘œ λ²„νŠΌμ„ 눌러 μ—΄ 수 μžˆμŠ΅λ‹ˆλ‹€.

       

      β‘‘ 기쑴에 아무것도 ν¬μΈνŠΈμ— λŒ€ν•œ 정보가 μ—†λ˜ ν™”λ©΄μ—μ„œ 포인트 적립에 λŒ€ν•œ 정보 ν˜Ήμ€ 포인트 적립 ν™”λ©΄μœΌλ‘œ μ΄μ–΄μ§ˆ 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

       

      β‘’ κΈ°μ‘΄μ— μ‹œκ°μ μœΌλ‘œ 확인이 μ–΄λ €μ› λ˜ ν™”μ‚΄ν‘œλ₯Ό μ œκ±°ν•˜κ³ , ν•˜λ‹¨μ— λ²„νŠΌμ„ μΆ”κ°€ν•˜μ—¬ 접근성을 λ†’μ˜€μŠ΅λ‹ˆλ‹€.

       

      β‘£ 기쑴에 ν•˜λ‹¨ ν† μŠ€νŠΈ μ˜μ—­μ— μžˆμ—ˆλ˜ μ†ŒλΉ„ μΊ˜λ¦°λ”λ₯Ό ν™ˆ 화면에 λ°°μΉ˜ν•˜κ³ , λ™μΌν•˜κ²Œ μ£Όκ°„ μΊ˜λ¦°λ”λ§Œ μš°μ„ μ μœΌλ‘œ λ³΄μ—¬μ£ΌλŠ” 걸둜 κ΅¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€. μ΄μ „κ³Όμ˜ 차이점은 이번 μ£Ό λ‚΄μ˜ 상세 내역도 ν•¨κ»˜ λ³΄μ—¬μ€ŒμœΌλ‘œμ¨ κ°„λ‹¨ν•œ 내역은 ν™ˆ ν™”λ©΄μ—μ„œ λ°”λ‘œ 확인할 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.


       

       

       

       

       

       

       

      πŸ’¬ ν›„κΈ°

      μ΄κ²ƒμœΌλ‘œ μ•½ 3~4μ£Όκ°„μ˜ ν”„λ‘œμ νŠΈκ°€ 마무리 λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ§ˆμ§€λ§‰ 와이어 ν”„λ ˆμž„μ—μ„œλŠ” μ’€ 더 λ‚˜μ€ λ°©μ•ˆμ΄ μžˆμ„μ§€λ„ λͺ¨λ₯΄κ² μ§€λ§Œ, μ–΄λ””κΉŒμ§€ μƒκ°ν•˜λŠ” 게 λ§žλŠ”μ§€, 아직 제 λ‹¨κ³„μ—μ„œ κ²°μ •ν•˜κΈ° μ–΄λ €μš΄ 것듀이 λ§Žμ•˜μŠ΅λ‹ˆλ‹€. 더 λ§Žμ€ 고민을 거치고, 과정을 κ²ͺ은 μ΄ν›„μ—λŠ” 더 λ‚˜μ€ 결과물을 λ‚Ό 수 μžˆμ„ 거라고 μƒκ°ν•©λ‹ˆλ‹€. κ·Έ λ•ŒκΉŒμ§€ λ…Έλ ₯ν•  μƒκ°μž…λ‹ˆλ‹€.

      'π™―π™šπ™§π™€ π™—π™–π™¨π™š > πš™πš›πš˜πš“πšŽπšŒπš' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

      [UIUX κ°œμ„  ν”„λ‘œμ νŠΈ 1μ°¨] 6μ£Όμ°¨ | ν˜„λŒ€μΉ΄λ“œ μœ μ € λ¦¬μ„œμΉ˜  (0) 2024.11.09
      [UIUX κ°œμ„  ν”„λ‘œμ νŠΈ 1μ°¨] 5μ£Όμ°¨ | ν˜„λŒ€μΉ΄λ“œ μœ μ € λ¦¬μ„œμΉ˜ κ²°κ³Ό 보고  (0) 2024.11.02
      [UIUX κ°œμ„  ν”„λ‘œμ νŠΈ 1μ°¨] 4μ£Όμ°¨ | ν˜„λŒ€μΉ΄λ“œ μœ μ € λ¦¬μ„œμΉ˜  (0) 2024.10.27

      κ΄€λ ¨κΈ€ κ΄€λ ¨κΈ€ 더보기

    Designed by Tistory.

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”