๐Ÿ—จ๏ธ ๋‹คํฌํ…Œ๋งˆ ๋””์ž์ธ์— ํ•„์š”ํ•œ 8๊ฐ€์ง€ ๊ฟ€ํŒ ๐Ÿ—จ๏ธ 1. '์ˆœ์ˆ˜ํ•œ ๊ฒ€์ •์ƒ‰' ์„ ํ”ผํ•˜์„ธ์š”. ์™„์ „ ๊ฒ€์€ ๋ฐฐ๊ฒฝ์— ์™„์ „ ํฐ ๊ธ€์”จ๋Š” ๊ณ ๋Œ€๋น„๋กœ ๋ˆˆ์„ ํ”ผ๋กœํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๊ตฌ๊ธ€์˜ ๋จธํ„ฐ๋ฆฌ์–ผ ๊ฐ€์ด๋“œ๋Š” ๋‹คํฌํ…Œ๋งˆ ๋ฐฐ๊ฒฝ์œผ๋กœ #121212๋ฅผ ์“ฐ๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 2. ๊ณ ์ฑ„๋„ ์ปฌ๋Ÿฌ๋ฅผ ํ”ผํ•˜์„ธ์š”. ๋ฐ์€ ํ™”๋ฉด์—์„œ๋Š” ์ฑ„๋„ ๋†’์€ ์ปฌ๋Ÿฌ๊ฐ€ ๋ณด๊ธฐ ํŽธํ•˜์ง€๋งŒ, ์–ด๋‘์šด ํ™”๋ฉด์—์„œ๋Š” ์‹œ๊ฐ์  ๋–จ๋ฆผ์„ ์œ ๋ฐœํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๋…์„ฑ์ด ์ข‹์€ ๋ฐ์€ ํ†ค์˜ ์ปฌ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ƒ‰์ƒ์„ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. 3. ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์ƒ‰์ƒ ๋Œ€๋น„ ํ‘œ์ค€์„ ์ง€์ผœ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹คํฌ ํ…Œ๋งˆ์—์„œ๋„ ํŽธํ•˜๊ฒŒ ์ƒ‰์ƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ ์ ˆํ•œ ๋Œ€๋น„๊ฐ€ ์œ ์ง€๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ๊ธ€์˜ ๋จธํ„ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ฐ€์ด๋“œ๋Š” ๋ฐฐ๊ฒฝ ๋Œ€๋น„ ๊ธ€์ž์˜ ์ƒ‰์ƒ ๋Œ€๋น„๋ฅผ 15.8:1๋กœ ๊ถŒ์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ์–ด๋ ต๋‹ค๋ฉด, Color Contrast Tools(uxpro.cc/toolbox/accessibility/color-accessibility) ์„ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. 4. ํ…์ŠคํŠธ์— 'On' ์ปฌ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. ํ…์ŠคํŠธ์˜ ์ƒ‰์ƒ์— ๋”ฐ๋ผ ํ™œ์„ฑํ™” ์ƒํƒœ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๊ฐ•์กฐ๋˜๋Š” ํ…์ŠคํŠธ๋Š” 87%, ๋ณดํ†ต์˜ ํ…์ŠคํŠธ๋Š” 60%, ๋น„ํ™œ์„ฑํ™”๋œ ํ…์ŠคํŠธ ์ƒํƒœ๋Š” 38% ํฐ์ƒ‰์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 5. ๋ผ์ดํŠธํ…Œ๋งˆ์™€ ๋‹คํฌํ…Œ๋งˆ๋ฅผ ๊ฐ™๊ฒŒ ๋งŒ๋“ค๋ ค๊ณ  ํ•˜์ง€ ๋งˆ์„ธ์š”. ๊ฐ™์€ ์ปฌ๋Ÿฌ๋„ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋А๋‚Œ์„ ์ค๋‹ˆ๋‹ค. ์ฆ‰, ๋‹คํฌํ…Œ๋งˆ๋กœ ๋งŒ๋“  ํ™”๋ฉด์€ ๋ผ์ดํŠธํ…Œ๋งˆ์™€ ์ ˆ๋Œ€ ๊ฐ™์€ ๋А๋‚Œ์„ ์ค„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‘ ๊ฐ€์ง€ ํ…Œ๋งˆ๋ฅผ ๋™์ผ์‹œํ•˜๋ ค๋Š” ๊ฒƒ๋ณด๋‹ค ๊ฐ ํ…Œ๋งˆ์˜ ์žฅ์ ์„ ์‚ด๋ฆฌ๋Š” ๋ฐฉํ–ฅ์ด ์ข‹์Šต๋‹ˆ๋‹ค. 6. '๊นŠ์ด'๋ฅผ ์ „๋‹ฌํ•˜์„ธ์š”. ์œ„๋กœ ๋– ์˜ค๋ฅผ ์ˆ˜๋ก ์ƒ‰์ƒ์ด ๋ฐ์•„์ง€๊ณ , ๊นŠ์–ด์งˆ์ˆ˜๋ก ์–ด๋‘์›Œ์ง‘๋‹ˆ๋‹ค. ํ•˜๋‹จ์— ๊น”๋ฆฌ๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ์–ด๋‘ก๊ฒŒ, ๋ฐ˜๋Œ€๋กœ ์ƒ๋‹จ์˜ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ๊ฒŒ ์กฐ์ ˆํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. 7. ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•œ๋‹ค๋ฉด ๋‹คํฌ ํ…Œ๋งˆ๋กœ๋ถ€ํ„ฐ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์„ธ์š”. ์‹œ์Šคํ…œ์ด ๊ฐ•์ œ๋กœ ๋‹คํฌ ํ…Œ๋งˆ๋กœ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ์œ ์ง€ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๋ณ„๋กœ ์ข‹์€ ์•„์ด๋””์–ด๋Š” ์•„๋‹™๋‹ˆ๋‹ค. '๋ชจ๋“œ ์Šค์œ„์น˜'์™€ ์˜ต์…˜ ํŒจ๋„์„ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์Šค์Šค๋กœ ํ…Œ๋งˆ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์„ธ์š”. 8. ๋ผ์ดํŠธ, ๋‹คํฌํ…Œ๋งˆ ๋ชจ๋‘ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜์„ธ์š”. ๊ฐ๊ฐ์˜ ํ…Œ๋งˆ๊ฐ€ ์‹ค ๊ธฐ๊ธฐ์—์„œ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ํ…Œ์ŠคํŠธํ•˜๊ณ , ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ ๊ฐ๊ฐ ์ˆ˜์ •์„ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ํ•ด๊ฐ€ ์ง„ ํ›„ ์‹ค๋‚ด๋“ฑ์—์„œ ์‚ฌ์šฉํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

8 Tips for Dark Theme Design

Medium

8 Tips for Dark Theme Design

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2021๋…„ 9์›” 26์ผ ์˜คํ›„ 12:49

๋Œ“๊ธ€ 0




    ๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

    ์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

    1

    K๋ฆฌ๊ทธ ํ”„๋กœ๊ทธ๋ž˜๋จธ ์ปคํ”ผํ•œ์ž” ๊ฐœ๋ฐœ์ž

    ๊ฐœ๋ฐœ์ž์˜ ์žฅ์•  ๊ณต์œ  ๋ฌธํ™”

    2

    ์„๋ฏผ ์ปค๋ฆฌ์–ด ์ฝ”์น˜

    ์œ„๋กœ

    3

    ์žฅํ™์„ ์ŠคํŽ˜์ด์Šค์˜ค๋””ํ‹ฐ ๋ถ€๋Œ€ํ‘œ/CPO

    < ๋‡Œ๋ฅผ ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ฐ”๊พธ๋Š” 3๊ฐ€์ง€ ๋ฐฉ๋ฒ• >

    4

    ๋‹ฌ๋ ˆ Apollo GraphQL Software Engineer

    Dependabot์„ ํ†ตํ•œ ์•ˆ์ „ํ•œ ์˜์กด์„ฑ ๊ด€๋ฆฌ

    5

    ๋ ˆ๋“œ๋ฒ„์Šค๋ฐฑ๋งจ ๋ฆฌ์„œ์ฒ˜ ์•ค ๋ผ์ดํ„ฐ

    โŸช์Šคํ† ๋ฆฌ๋ฅผ ๋งŒ๋“œ๋Š” ์‚ฌ๋žŒ๋“คโŸซ

    ์ถ”์ฒœ ํ”„๋กœํ•„