๐ ๋์์ธ ์์คํ ์ ์ ํ์ํ ๊น?
๐ ํ ์ค ์์ฝ - ๋ชจ๋ ์ ํ์ ์ธํฐํ์ด์ค๊ฐ ์ผ๊ด์ฑ์ ์ ์งํ ์ ์๊ฒ ๋์์ค๋ค. โ๏ธ ๋์์ธ ์์คํ ์ด ์๋ ํ๊ฒฝ์ ์๊ฐํด๋ณธ ์ ์ด ์๋์? ์ ๋ ์์ด์. ์ผ๋ ํด๋ณธ ์ ๋ ์์ด์. ๋์์ด๋๊ฐ ์๋ ๊ฒฝ์ฐ๋ ์์์ง์. ์คํํธ์ ์ ์ฐฝ์ ํ๊ณ ์ด์ํ๋ค๋ณด๋ ๋ง์ด์์. ์ ๋ง ํ๋ค์์ด์. ์ผ๊ด๋ ๋์์ธ์ด ๋์ค์ง ์์๊ณ , ์ปดํฌ๋ํธ๊ฐ ๋์ผํ๊ฒ ์ ์ง๋์ง ์์ ์ผ์ผ์ด ๋ค ๋ง๋ค์ด์ผ ํ๊ฑฐ๋ ์.๐ฑ โ๏ธ ๊ทธ๋ด ๋๋ง๋ค ๋์์ธ ์์คํ ์ ๋ง๋ค์ด์ผ ํ ๊น? ๋ผ๋ ์๊ฐ์ ์๋์์ด ํ์ด์. ํ์ฌ ํ์ฌ์ ์ ์ฌํ๊ธฐ ์ ์๋ ๋์์ธ ์์คํ ์ด ์์๋๋ฐ์. ์ด๋ฅผ ๋์ฒดํ๊ธฐ ์ํด ์์ฒด์ ์ผ๋ก UX Writing ๊ฐ์ด๋๋ฅผ ๋ง๋ค์ด, ๊ทธ ์์ ๋์์ธ ์์คํ ์ ๋ น์ฌ๋ด๊ธฐ๋ ํ์ง์. โ๏ธ ํ์ง๋ง, ๋์์ธ ๊ฐ๊ฐ์ด ๋จ์ด์ง๋ ์ ๊ฐ ํด๋ด๊ธฐ์๋ ์ด๋ ค์ด ์ผ์ด์์ด์. ๋ฌผ๋ก , UX Writing ๊ฐ์ด๋๋ ์๋ฒฝํ๋ค๊ณ ํ ์ ์์์ด์. ์์๋ฐฉํธ์ผ๋ก ๋ง๋ค์๋ ์๋ฃ์ด๊ธฐ ๋๋ฌธ์ด์ฃ . ๊ทธ๋์ ๋ํ๋์ ์ ๋ง์ ๋ฐ๋ผ ๋์์ธ์ด ๋ฐ๋๊ณ , ๊ฐ๋ฐํ๊ธฐ ํธํ ๋ฐฉํฅ์ ๋ฐ๋ผ ๋์์ธ์ด ๋ฐ๋๊ธฐ๋ ํ์ด์. โ๏ธ ๊ทธ๋์ ๋์์ธ์ด ์ผ๊ด๋์ง ์์์ฃ . ์ด ํ์ด์ง์ ๋ค์ ํ์ด์ง์์ ๋์ผํ ๋ด์ฉ์ด ๋ํ๋๋๋ฐ, ๋์์ธ์ ์์ ๋ค๋ฅด๊ฒ ์ ์ฉ๋๋ ๊ฑฐ์์. ์ ๊ฐ ์ง์ ํ ์คํธ๋ ํ์๋๋ฐ, ์ฌ์ฉ์ฑ์ด ๋ง์ด ๋จ์ด์ง๊ณ , ๊ฐ์ ๋ด์ฉ์์๋ ๋ค๋ฅธ UI๋ฅผ ์ ๊ณตํด ์ ๋ขฐ๋๋ ๋จ์ด์ก์ด์. โ๏ธ ๋ํ, ๊ฐ์ ๋ด์ฉ์ด ํ์ด์ง์ ๋ฐ๋ผ UI๊ฐ ๋ฌ๋ผ์ง๋ฉด์ ๋นํจ์จ์ ์ธ ์์ ์ด ๋ง์ด ๋ฐ์ํ์ด์. ๋์์ด๋๋ 2๊ฐ์ UI ์ปดํฌ๋ํธ ์์ ์ ํด์ผ ํ๊ณ , ๊ฐ๋ฐ์๋ ๋์ผํ ๋ฆฌ์์ค์์๋ ๋ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ผ ํ์ฃ . โ๏ธ ๊ฐ๋ฐ์ด ๋ณต์กํ๋ค๋ ์ ์ ํ์ฅ์ฑ์๋ ๋ฌธ์ ๋ฅผ ์ผ์ผ์ผฐ์ด์. ๊ฐ์ UI๊ฐ ๋ค๋ฅธ ํ์ด์ง์ ๋์ฌ์์ ๋, ์ต์ ํ๋ ํ์ด์ง์ ๋ฐ๋ผ ์ ์ฒด๋ฅผ ๋ณ๊ฒฝํด์ผ ํ๋๋ฐ, ์ฝ์ง ์์๋ ๊ฑฐ์์. ๊ฒฐ๊ตญ ์ผ์ผ์ด ์ฐพ์์ ๋ณ๊ฒฝํ๋ ์ฆ, QA ์์ ์ ์๋นํ ๋ง์ ์๊ฐ์ ํ ์ ํ์ฃ . โ๏ธ ๋ค์ํ ๋ฌธ์ ์ ์ง๋ฉดํ๋ฉฐ '๋์์ธ ์์คํ '์ด ๋๋ฌด๋๋ ๊ฐ์ ํ์ด์. ํ์ง๋ง ๋ ๊ฐ์ ํ๋ ์ ์ด ์์๋๋ฐ์. ๋ฐ๋ก '์ฌ์ ์ ์ง'์์ฃ . ์ฌ์ ์ด ์ ๊ตด๋ฌ๊ฐ์ผ ๋์์ธ ์์คํ ์ด๋ ๋ญ๋ ๋ง๋ค์ด ์ ์งํ ํ ๋ฐ, ๊ทธ ํ๊ฒฝ์ด ๋ท๋ฐ์นจํด์ฃผ์ง ์์๋ ๊ฑฐ์์. ๊ทธ๋์ ๊ฒฐ๊ตญ ํฌ๊ธฐํ๊ฒ ๋์ฃ .๐ฅฒ โ๏ธ ๊ทธ๋ผ ๋ง์ฝ ๋์์ธ ์์คํ ์ด ์์๋ค๋ฉด, ์ฐ๋ฆฌ๋ ์ข ๋ ํจ์จ์ ์ด๊ณ ๋ฐ์ ์ ์ผ๋ก ์ฌ์ ์ ์ด๋์ด๊ฐ ์ ์์์๊น์? ์ ์์ ์๊ฒ '๊ทธ๋ ๋ค'๋ผ๊ณ ๋งํ ์ ์์ด์. ๋๋ฌด ์์ ์ ๋ฏฟ๋ ๊ฑฐ ์๋๋๊ณ ์? ๋ง์์. ๊ทธ๋ฅ ๋ฏฟ๋ ๊ฑฐ์ฃ ๋ญ. ๐ง โ๏ธ ์ฌํผ, ์ ๋ ํด๋ณด์ง ๋ชปํ ๋์์ธ ์์คํ , ์ด๋ป๊ฒ ๋ง๋ค์๋์ง ํ ๋ฒ ์ดํด๋ณผ๊น์? โ ๋ ๋น ๋ฅด๊ฒ ๋ ํจ์จ์ ์ผ๋ก 1. ๋์์ธ ํ์ผ๊ณผ ์ฌ๋ณผ ์ ๋ฆฌ โ๏ธ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋์์ธ์ ๊ณตํต์ ์ด ์์ ๊ฑฐ์์. ์ด ๊ณตํต์ ์ ๋ฐ๋ผ ํ๋๋ก ๋ฌถ๊ณ ๋๋จธ์ง๋ ๊ณผ๊ฐํ๊ฒ ์ ๋ฆฌํด๋ฒ๋ฆฌ๋ ๊ฑฐ์ฃ . ๊ทธ๋ ๊ฒ ๋๋ฉด ์ฌ์ฉํ ์ ์๋ ํ์ผ์ ์ ์ด์ง์ง๋ง, ํ์ฉํ ๋ฐฉ์์ ๋์ด์ง๋ ๊ฑฐ์์. ์ด๋ ๊ฒ ๋ฌถ์ ๋์์ธ ํ์ผ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฃ์๋๋ฐ, ํ๋๋ง ์ ๊ทธ๋ ์ด๋ ํ๋ฉด ์ ์ฒด๊ฐ ๋ค ์ ๊ทธ๋ ์ด๋ ๋๋ ๊ธฐ๋ฅ์ ํ์ฉํ๋ค๊ณ ํด์. 2. ๋ค์ด๋ฐ ๊ท์น ์ ์ โ๏ธ ํ์ผ์ด ์ ์ ๋ฆฌ๋ผ ์์ด๋ ๊ทธ ์์์ ์์ ๋นผ๋ผ ์ ์๋ ๊ธฐ์ ์ด ํ์ํด์. ์ด๋ฅผ ๋์์ฃผ๋ ๊ฒ์ด ๋ฐ๋ก 'ํ์ผ ์ด๋ฆ'์ด์ฃ . ๋ณดํต ํ์ผ ์ด๋ฆ์ผ๋ก ๊ฒ์ํ๊ธฐ ๋๋ฌธ์ ํธ๋ฆฌํ๊ฒ ํ์ผ์ ์ฐพ๊ณ ์ ์ฉํ ์ ์์ด์. 3. ์ฅ์ธ์ ๋๊ตฌ๋ฅผ ํํ์ง ์๋๋ค์ง๋ง โ๏ธ ์ค์ผ์น์ ํฐ ๋ฌธ์ ๋ '๊ณต๋ ์์ '์ด ๋ถ๊ฐ๋ฅํ ์ ์ด์์. ํ ์ฌ๋์ด ๋์์ธ ์ ๋ฌด๋ฅผ ํ๊ณ ์์ผ๋ฉด, ๋ค๋ฅธ ์ฌ๋์ ๊ฐ์ ํ์ฌ ๋์์ธ ์์ ์ ํ ์ ์๊ฒ ๋์ฃ . ๋ค๋ฅธ ํํ๋ก ์ ๋ฌด์ ๋ก๋๊ฐ ๊ฑธ๋ ค๋ฒ๋ฆฌ๋ ๊ฑฐ์์. ์ด๋ฅผ ํด๊ฒฐํ ์ ์๋ ๋ฐฉ์์ด ๊ฐ์ฅ ํ์ํ๋ค๊ณ ํด์. 4. ์ฐพ์๋ค, ํผ๊ทธ๋ง! โ๏ธ ์ต๊ทผ ์ด๋๋น์์ ์ธ์ํด์ ํ์ ๊ฐ ๋์๋ ์๋น์ค ๋ฐ๋ก, ํผ๊ทธ๋ง์ฃ . ํผ๊ทธ๋ง๋ ๊ณต๋ ์์ ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๋ง ํธ๋ฆฌํด์. ์ต๊ทผ 2022๋ ๋์์ธ ํด ์๋ฒ ์ด์์๋ ํผ๊ทธ๋ง๋ 1๋ฑ์ ์ฐจ์งํ๋๋ฐ์. ๋์์ธ ํด๋ก์จ ๊ทธ ์ธ๊ธฐ๊ฐ ์์ฃผ ๋๋์ ์ํฉ์ด์ฃ . ๋ํ, ์ค์ผ์น๊ฐ ํด๊ฒฐํ์ง ๋ชปํ ๋ฌธ์ ๋ฅผ ์ฒ! ์ฒ! ํด๊ฒฐํ๊ธฐ๋ ํ๊ตฌ์. 5. ๋ณธ๊ฒฉ ์คํฐ๋ โ๏ธ ํ์ง๋ง ๊ณง์ฅ ํด์ ๋ฐ๊พธ๋ ๊ฒ์ ์ด๋ ค์์. ์๋? ๋น์ฅ ์ ๋ฌด๋ฅผ ํด์ผ ํ๋๋ฐ, ์๋ก์ด ํด์ ์ ์ํ๋๋ผ ์๊ฐ์ ์์์ผ ํ๊ธฐ ๋๋ฌธ์ด์ฃ . ์ด๋ฅผ ์ํด ๋ฏธ๋ฆฌ ์คํฐ๋ํ๋ ๊ฒ์ ํ์๋ก ์๊ตฌ๋ผ์. ์ ์๋ ์ฅ์ ๊ณผ ๋จ์ ์ ๋น๊ตํ๋ค๊ณ ํ๋ค์. ๐ ํผ๊ทธ๋ง ์ฅ์ โข ๋์์ ์ฌ๋ฌ ๋ช ์ ๋์์ด๋๊ฐ ํ๋์ ๋์์ธ ํ์ผ์ ๋ค์ด์ ํจ๊ป ์์ ํ ์ ์๋ค.(๊ณต๋ ์์ ๊ธฐ๋ฅ) โข ๊ฐ๋ฐ์๋ ์ธ์ ๋ ๋ค์ด์ ๋์์ธ์ ์ดํด๋ณด๊ณ , ์ฝ๋ฉํธ๋ฅผ ๋จ๊ธฐ๊ฑฐ๋ ์ฝ๋๋ฅผ ๋ณผ ์ ์๋ค. (์ฝ๋ฉํธ ๊ธฐ๋ฅ) โข ๊ฐ๋จํ๊ฒ ๊ณ ํ๋ฆฌํฐ์ ํ๋กํ ํ์ ์ ๋ง๋ค ์ ์๋ค. (ํ๋ฆฌ์ ํ ์ด์ ๊ธฐ๋ฅ) โข ๋งํฌ๋ง ๊ณต์ ํ๋ฉด ๋๊ตฌ๋ ๋ค์ด์์ ์๊ฒฌ์ ๋จ๊ธธ ์ ์๋ค. (์น ๋งํฌ ์ฌ์ฉ ๊ธฐ๋ฅ) ๐ ํผ๊ทธ๋ง ๋จ์ โข ์ค์ผ์น์์ ๊ธฐ๋ณธ ์ ๊ณตํ๋ ๋ง๋ฒ๋ด์ด ์๋ค. โข ์ปฌ๋ฌ ์คํฌ์ดํธ๊ฐ ํด ๋ฐ์์ ์๋ํ์ง ์๋๋ค. โข ๋ธ๋ผ์ฐ์ ์ ์ด๋ฏธ์ง ๋๋๊ทธ ์ค ๋๋กญ์ด ์ ํ์ ์ด๋ค. โข Auto Layout ์ค์ ์ด ์ ํ์ ์ด๋ค. โข ํ๊ธ ์ ๋ ฅ ๋ฒ๊ทธ๊ฐ ์๋ค. 6. ์คํฐ๋ ๊ฒฐ๊ณผ๋? โ๏ธ ๋จ์ ์ด ์์์ง๋ง, ์ด ๋จ์ ์ ์์ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์๋ค๊ณ ํด์. ํนํ, Auto Layout ๊ธฐ๋ฅ์ ์ ๋ฐ์ดํธ๋ฅผ ํตํด ์ค์ผ์น๋ณด๋ค ๋ ์ ์ฐํ๊ณ ํธ๋ฆฌํ๊ณ ์. ์คํํธ์ ์ผ๋ก ์์ํด์ ๊ทธ๋ฐ์ง ๋ฒ๊ทธ๋, ๋ถ์กฑํ ๋ถ๋ถ๋ค์ ๋น ๋ฅด๊ฒ ์์ ํ๋ ๋ชจ์ต์ ๋ณด์ฌ์ฃผ๋๋ผ๊ณ ์. ์ด๋ฌํ ๊ฒฐ๊ณผ ๋์ ์ ์๋ ์ค์ผ์น๋ฅผ ๋์ ํ์ฌ ํผ๊ทธ๋ง๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๊ฒฐ์ ํ์ด์. โ ์ค์ผ์น์์ ํผ๊ทธ๋ง๋ก ์ด์ฌํ๊ธฐ 1. ์ค์ผ์น ํ์ผ์ ํผ๊ทธ๋ง์ ์ํฌํธ ํ๊ธฐ โ๏ธ ์ด๊ธฐ ์ ํ์ด ์ฌํ ๊ทธ๋ ๋ฏ ํผ๊ทธ๋ง๋ ์์ ์ ์ด์ง ์์๋์. ์ค์ผ์น ํ์ผ์ ์ํฌํธํด๋ ๋ง์ ๋ถ๋ถ์ด ๊นจ์ก๋ ๊ฑฐ์ฃ . ๋ง๋ฅ ์ํฌํธํ๋ฉด ๋ค ํด๊ฒฐ๋ ๊ฑฐ๋ผ ์๊ฐํ์ง๋ง ๊ทธ๋ ์ง ์์์ ์๊ฐ๋ณด๋ค ๋ง์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋๋ด์. ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ค์ผ์น ํ์ผ์ ์ ๋ฆฌํ๊ณ , ํ๋ฌ๊ทธ์ธ์ ๋์์ ๋ฐ์ ๋๋ต์ ์ธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ค๊ณ ํด์. 2. ๋ง์ด ์ฌ์ฉํ๋ ์ค์ผ์น ํ๋ฌ๊ทธ์ธ โ๏ธ ์ ์๋ ์ด์ฌ๋ฅผ ์ํด 3๊ฐ์ง ํ๋ฌ๊ทธ์ธ์ ๋ง์ด ์ฌ์ฉํ๋ค๊ณ ํด์. ํ์ง๋ง ๋ณด์กฐ์ ์๋จ์ผ๋ก ์ฌ์ฉํ์ ๋ฟ, ์๋๋๋ก ์ ์ฒด๊ฐ ์ ์ฉ๋ ๊ฒ์ ์๋๋ผ๊ณ ํด์. โข Symbol Organizer: ์ฌ๋ณผ์ ์๋์ผ๋ก ์ ๋ ฌ โข Unused Style Remover: ์ ์๋ ์คํ์ผ ์ค ์ฌ์ฉํ์ง ์๋ ์คํ์ผ ์ญ์ โข Symbol Instance Renamer: ์ฌ๋ณผ ์ธ์คํด์ค์ ์ด๋ฆ์ ๋ง์คํฐ ์ฌ๋ณผ ์ด๋ฆ์ผ๋ก ๋ณ๊ฒฝ 3. ๋ง์ด ์ฌ์ฉํ๋ ํผ๊ทธ๋ง ํ๋ฌ๊ทธ์ธ โ๏ธ ์์ ๋งํ๋ฏ, ์๋ฒฝํ๊ฒ ์ํ๋ ๋ฐ๋๋ก ํ๋ฌ๊ฐ์ง ์์์ด์. ๊ทธ๋ 4๊ฐ์ง ํผ๊ทธ๋ง ํ๋ฌ๊ทธ์ธ์ ๋์์ ๋ฐ์ ๊ฑฐ์ฃ . โข Select Layers: ์ด๋ฆ์ด๋ ํ์ ์ผ๋ก ์ํ๋ ์์ ์ ํ โข Rename It: ๋ ์ด์ด์ ์ด๋ฆ์ ๋ฐ๊พธ๋ ํ๋ฌ๊ทธ์ธ โข Clean Document: ์ค์ผ์น ํ์ผ์ ํผ๊ทธ๋ง๋ก ๊ฐ์ ธ์์ ๋, ์จ๊ฒจ์ง ๋ ์ด์ด๊ฐ ๊ฐ๋ ์์ด์ ํ ๋ฒ์ ์ง์ฐ๊ฑฐ๋ ์ ๋ฆฌํ ๋ ์ฌ์ฉ โข Design System Organizer: ์ปดํฌ๋ใดํธ๋ฅผ ์กฐ๊ธ ๋ ์ฝ๊ณ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ๋ ์ฌ์ฉ ________________ โ๏ธ ์ฌ๊ธฐ๊น์ง๊ฐ 1ํธ ๋ด์ฉ์ด์์. ์ ์ฒด์ ์ผ๋ก ์์ฝํด๋ณด์๋ฉด ๋ค์๊ณผ ๊ฐ์์. โข ์์คํ ๊ฐ์ด๋๋ ์๋น์ค ์ผ๊ด์ฑ์ ์ ์งํ๊ณ , ์ฌ์ฉ์์๊ฒ ์ ๋ขฐ๋ฅผ ์ฃผ๊ธฐ ์ํด ํ์ํ๋ค. โข ๋ํ, ๋์์ธ ์์ ์ ํจ์จ์ ์ด๋ฉฐ ํจ๊ณผ์ ์ผ๋ก ์คํํ๊ธฐ ์ํ ์๋จ์ด ๋๋ค. โข ์ค์ผ์น๋ก ๋์์ธ ์์ ์ ํ๋ค๋ณด๋, ํจ์จ์ ์ธ ์ ๋ฌด๋ฅผ ๋ฐฉํดํ๋ ๋ถ๋ถ์ด ์๊ฒจ ์ด๋ฅผ ๋์ฒดํ ์๋จ์ ์๊ฐํ๋ค. โข ์ค์ผ์น ๋์์ธ ํด์ด ๊ฐ์ง ๋จ์ ์ ๋ณด์ํ๊ณ , ์์ ๋ฅ๋ฅ ์ ํฅ์ํ๊ธฐ ์ํด ํผ๊ทธ๋ง๋ฅผ ์ฌ์ฉํ๋ค.