UXThinkBig_TextField_Jieun

Overview


๐Ÿ’ก UXThinkBig-TextField

TextField
ํ…์ŠคํŠธํ•„๋“œ๋Š” ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์ž…๋ ฅ ์ปจํŠธ๋กค์ด์ง€๋งŒ ๋ฒ”์ฃผํ™”๋˜์ง€ ์•Š์€ ์˜ˆ๋ฅผ ๋“ค์–ด) ์ด๋ฆ„, ์•„์ด๋””, ๋น„๋ฐ€๋ฒˆํ˜ธ ๋“ฑ๊ณผ ๊ฐ™์€ ๊ฐœ์ธ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

  • ์‚ฌ์šฉ์ž๊ฐ€ ์ •๋ณด๋ฅผ ์‰ฝ๊ฒŒ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์Šฌ๋ผ์ด๋”, ์Šคํ”ผ๋„ˆ, Date/Time picker(๋‚ ์งœ/์‹œ๊ฐ„ ์„ ํƒ ์ปจํŠธ๋กค), ์ปฌ๋Ÿฌ ํ”ผ์ปค ๋“ฑ ์ž…๋ ฅ ์ปจํŠธ๋กค์— ๋Œ€ํ•œ ์•„์ด๋””์–ด๋“ค์ด ๋‚˜์™€์žˆ์ง€๋งŒ ํ…์ŠคํŠธ ํ•„๋“œ ๋˜ํ•œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์ž…๋ ฅ ์ปจํŠธ๋กค์ด๋‹ค.

  • ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์ž๋Š” ์ž…๋ ฅ์„ ์ตœ์†Œํ™”ํ•˜๊ธธ ์›ํ•˜๊ณ , ์ž…๋ ฅ ๊ฐœ์ˆ˜๊ฐ€ ๋งŽ๊ฑฐ๋‚˜ ๋งŽ์€ ์˜ค๋ฅ˜๋ฅผ ๋ฒ”ํ•˜๊ฒŒ ๋  ๋•Œ ์ดํƒˆ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ TextField UI/UX๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ์‹ ์ค‘ํ•ด์•ผ ํ•˜๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•˜๋Š” ํ–‰๋™์„ ์ตœ๋Œ€ํ•œ ํŽธ์•ˆํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์œ ๋„ํ•ด์•ผ ํ•˜๊ณ , ์ž…๋ ฅ๋˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์ง๊ด€์ ์œผ๋กœ ํŒŒ์•… ๊ฐ€๋Šฅํ•˜๋„๋ก ๊ตฌ์„ฑํ•˜๋Š” ๊ฒŒ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋œ๋‹ค ๐Ÿ™‚



๐Ÿ’Ž Amondz App
Data Entry๋„ ์ ์ ˆํžˆ, TextField ์š”์†Œ๋„ ์ ์ ˆํ•˜๊ฒŒ UI๋ฅผ ๊ตฌ์„ฑํ•œ ์‚ฌ๋ก€๋ผ๊ณ  ์ƒ๊ฐํ•˜์˜€๋‹ค. ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅ ์™„๋ฃŒํ•˜๋ฉด ์ธ์ฆ๋ฒˆํ˜ธ ํ•„๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜๋„ ์ธ์ƒ๊นŠ์—ˆ๊ณ , ๋‹ค์Œ ๋ทฐ์—์„œ ํ…์ŠคํŠธ ํ•„๋“œ์™€ Data Entry๋ฅผ ์ ์žฌ์ ์†Œ์— ๋ฐฐ์น˜ํ•œ ์ ์ด ์ธ์ƒ๊นŠ์—ˆ๋‹ค.

๋ฒ”์ฃผํ™” ๋œ ๋‚ ์งœ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ƒ์ผ ํ•„๋“œ๋Š” DatePicker๋ฅผ ์‚ฌ์šฉํ•œ ์ , ์„ ํƒ์ง€๊ฐ€ 2๊ฐœ์ธ ํ•„๋“œ๋Š” ๋ผ๋””์˜ค ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐ์น˜ํ•œ ์ , ๋ฒ”์ฃผํ™”๋˜์ง€ ์•Š์€ ์ •๋ณด๋Š” TextField๋ฅผ ์‚ฌ์šฉํ•ด ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ์œ ๋„ํ•œ ์ ์ด ์ธ์ƒ๊นŠ์–ด์„œ ์•„๋ชฌ์ฆˆ ์•ฑ์„ ์ฑ„ํƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค!



โœจ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

  • TextField ์˜์—ญ์„ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด Reusable View ๊ตฌ์„ฑ์— ์ดˆ์ .
  • checkbox, timer ๋ถ„๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ํ†ตํ•ด ํ™•์ธ์ด ํ•„์š”ํ•œ TextField์—์„œ๋Š” checkbox๋ฅผ, ์‹œ๊ฐ„ ์ œํ•œ์ด ํ•„์š”ํ•œ TextField์—์„œ๋Š” timer๋ฅผ ์‚ฌ์šฉ.
  • TextField์— ์ปค์„œ ์ด๋™์‹œ descLabel Animation๊ณผ ํ•จ๊ป˜ appear


๐Ÿ“บ ๊ตฌํ˜„


You might also like...
Comments
  • โœจ[Feat] VerifyView ๊ตฌํ˜„ - ํœด๋Œ€ํฐ๋ฒˆํ˜ธ, ์ธ์ฆ๋ฒˆํ˜ธ UI

    โœจ[Feat] VerifyView ๊ตฌํ˜„ - ํœด๋Œ€ํฐ๋ฒˆํ˜ธ, ์ธ์ฆ๋ฒˆํ˜ธ UI

    ๐Ÿ’ก issue

    VerifyView ๊ตฌํ˜„ - ํœด๋Œ€ํฐ๋ฒˆํ˜ธ, ์ธ์ฆ๋ฒˆํ˜ธ UI

    โœ… To-Do

    • [x] VerifyVC์—์„œ ReusableView ๋ถˆ๋Ÿฌ์˜ค๊ธฐ (ํœด๋Œ€ํฐ๋ฒˆํ˜ธview, ์ธ์ฆ๋ฒˆํ˜ธview)
    • [x] ๊ฐ๊ฐ layout Constraint ์žก์•„์ฃผ๊ธฐ
    • [x] Timer ๊ตฌํ˜„
    • [x] enterํ‚ค ์ž…๋ ฅ์‹œ Notification ์ „๋‹ฌ -> ์ธ์ฆ๋ฒˆํ˜ธ view animation์œผ๋กœ ์ƒ์„ฑ
    enhancement 
    opened by hwangJi-dev 0
Owner
hwangJi
hwangJi