[๋ฒ์ญ] 2015๋
์น ๋์์ธ ๋ํฅ
Web Design Trends To Look Out For In 2015
์๋ฌธ : http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015
1. ๋ฐ์ํ์ด ์๋๋ฉด ๊ทธ๋ฅ ์ง์๋ ๊ฐ๋ฒ๋ ค!
(์ถ์ฒ : nichemarketmedia.net)
์๋ง ์ฌ๋ฌ๋ถ์ ์ง์ ๊ฐ ํ์๊ฐ ์์ ๊ฒ์
๋๋ค. ํน์ ๋ฐ์ํ ๋์์ธ์ ์ฌ์ฉํ์ง ์์ ์ข์ ์ด์ ๋ฅผ ๊ฐ์ง๊ณ ์๋์? ๊ทธ๋ ์ง ์์ ๊ฑฐ์์. ์ง๋ ๋ช ๋
๋์ ๋ฐ์ํ ๋์์ธ์ ์ผ๋ฐ์ ์ธ ์น๋์์ธ๊ณผ ํน์ ์๋ํ๋ ์ค ํ
๋ง์ ์๋ก์ด ํ์ค์ผ๋ก ๊ตณํ์ก์ต๋๋ค. ๋ฌผ๋ก ๊ทธ๊ฒ์ ๊ตฌํํ๋๋ฐ์๋ ์ฌ์ ํ ๋ช ๊ฐ์ง ๋
ผ์์ด ์์ง๋ง ์๋ฌด๋ "๋ฐ์ํ ๋์์ธ์ ์ ๊ฑฐํ์"๋ผ๊ณ ๋ ํ์ง ์์ต๋๋ค. ์ฌ์ค ์ ์ ๋ ๋ง์ ์น์ฌ์ดํธ๋ค์ด ๋ฐ์ํ์ ๋์
ํ๋ ๋ฐฉํฅ์ผ๋ก ๊ฐ๊ณ ์์ต๋๋ค. 2014๋
์๋ ํ์ค์ด ๊ทธ๋ฌ๊ณ ์๋ง 2015๋
์๋ ๋ค๋ฅธ ๋ฐฉํฅ์ผ๋ก ๊ฐ์ง๋ ์์ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค. ์ด์ ๋ ํ๋์ ๊ฒฝํฅ์ด๋ผ๊ธฐ ๋ณด๋ค๋ ์๋ก์ด ํ์ค์ผ๋ก ๊ณ ๋ ค๋ ์ ์์ต๋๋ค.
2. ๊ณ ์คํธ ๋ฒํผ (Ghost Buttons)
(์ถ์ฒ : http://www.unionroom.com/)
๊ณ ์คํธ ๋ฒํผ์ Diviํ
๋ง์์ ๋์๋๋ ๋์์ธ ํน์ง์
๋๋ค. ์ด๊ฒ์ ์๊ณ ์คํ์ผ๋ฆฌ์ฌํ๋ฉฐ ๊ธฐ๋ถ์ข๊ฒ ๋ง๋๋ ๋ฏธ๋ฌํ ํ๋ฒ ์ ๋๋ฉ์ด์
์ ๊ฐ์ง๊ณ ์์ต๋๋ค. 2015๋
์๋ ์ด๋ฌํ ์ถ์ธ๋ฅผ ๊ณ์ ์ง์ผ๋ณด๊ธธ ๋ฐ๋๋๋ค. ํนํ ์ด๋ป๊ฒ ํฐ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง์ ์์๊ณผ ํจ๊ป ๋์์ธ๋๋์ง ์ดํด๋ณด์ธ์. ์ด๊ฒ์ 4๋ฒ ํญ๋ชฉ์์ ์ธ๊ธํ ๊ฒ์
๋๋ค.
3. ํ์ดํฌ๊ทธ๋ผํผ์ ๊ฐ์กฐ(Bigger Emphasis on Typography)
(์ถ์ฒ :http://www.paul-rand.com/)
์ ํต์ ์ผ๋ก ์น์ฌ์ดํธ์ ์ฌ์ฉ๋๋ ์๋ฆ๋ค์ด ์์ฒด์ ๊ธ๊ผด์ ๋น์ฉ์ด ๋ง์ด ๋ค์์ต๋๋ค. ํ์ดํฌ๊ทธ๋ผํผ ๋์์ธ์ ๋ง์ด ์น์ฐ์น ๋์์ธ์ ๋ ํฐ ์์ฐ์ ์๊ตฌํ๋ ๊ฒฝํฅ์ด ์์์ ์๋ฏธํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ง๊ธ์ ๋ฌ๋ผ์ง๊ณ ์์ต๋๋ค. ํ์
-ํท์ ์ ์ ๊ฐ๋นํ ์ ์๋ ์์ค์ด ๋์ด๊ฐ๊ณ ์๊ณ (์ฌ์ง์ด ๊ตฌ๊ธํฐํธ๋ ๋ฌด๋ฃ) ์ด๊ฒ์ ์ ์์์ฐ์ ๊ฐ์ง๊ณ ํ์ดํฌ๊ทธ๋ผํผ ๊ธฐ์ ์ ์น์ ์ ์ฉํ๋ ค๋ ๋์์ด๋๋ค์๊ฒ ๋ ๋ง์ ์์ ๋ฅผ ์ฃผ๊ฒ๋์์ต๋๋ค.
4. ํฌ๊ณ , ์๋ฆ๋ค์ด ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง์ ๋์์(Large, Beautiful Background&Videos)
(์ถ์ฒ : http://www.dehaus.be)
์ฐ๋ฆฌ์ ์ฃผ๋ ฅ ์์์ธ ํฌ๊ณ ์๋ฆ๋ค์ด ์ด๋ฏธ์ง์ ์์์ ํฐ ์ธ๊ธฐ๋ฅผ ๋์๊ณ ์์ผ๋ก๋ ๊ทธ๋ด ๊ฒ์
๋๋ค. ๋น์ ์ ์ฌ์ดํธ๋ฅผ ๋๋ณด์ด๊ฒ ๋ง๋ค๊ธฐ ์ํ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ ์ค ํ๋๋ ์ค์ํ ์ปจํ
์ธ ๋ฅผ ๋๋๋ฌ์ง๊ฒ ๋ํ๋ด๋ ๊ฒ์
๋๋ค. ์ด๋ฌํ ๊ฒฝํฅ์ ํฐ ๋์์ธ ์คํ์ผ/์ฒ ํ์ ์ ๋ชฉ์ํค๋ ํ๋ฅญํ ๋ฐฉ๋ฒ์
๋๋ค. ์ด๊ฒ์ ๊ต๋ฌํ๊ฒ ๋๊ปด์ง์ง ์์ผ๋ฉด์๋ ๊ฐํ๊ณ ์ฐ์ํ๊ฒ ํฉ๋๋ค.
5. ์คํฌ๋กค์ ์ด์ฉํ ํด๋ฆญ(Scrolling Over Clicking)
๋ชจ๋ฐ์ผ ์น์ด ์ง์์ ์ธ ์ฑ์ฅํ๊ณ ์น ๋์์ธ์ด ๋ ํจ๊ณผ์ ์ด๊ณ ์ฆ๊ฑฐ์ด ๋ชจ๋ฐ์ผ ๊ฒฝํ์ ๋ฐฉํฅ์ผ๋ก ๊ณ์ ๊ธฐ์ด๋ค๋ฉด ์์ผ๋ก ์คํฌ๋กค ํด๋ฆญ์ด ์ง๋ฐฐํ ๊ฒ์
๋๋ค. ์ด๊ฒ์ ๋ ์ง๊ด์ ์ด๋ฉฐ ์ฝ๊ฒ ํ ์ ์๊ณ , ๋ก๋ฉ ์๊ฐ์ด ์ค์ด๋ญ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์์ ์น์ฌ์ดํธ ์ฌ์ด์์ ๋ ๋์ ์ธ ์ํธ์์ฉ์ด ์ด๋ค์ง๊ฒ ํฉ๋๋ค.
6. ์นด๋ ๋์์ธ์ ๊ณ์๋๋ค(Card Design Will Continue - Get Better)
(์ถ์ฒ : http://www.pinterest.com/)
โ์นด๋โ๋์์ธ, ์๋กญ์ง๋ ์์ง๋ง ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ์ ์ํ๋ ๋์์ด๋๋ฅผ ์ํ ์ข์ ๋๊ตฌ๋ผ๋ ๊ฒ์ ์
์ฆํ์ต๋๋ค. ์นด๋๋ ๋ชจ๋์ ์ ์งํ๊ณ ๋ธ๋ผ์ฐ์ ์ ๋ง์์์ ๋ฐ์ดํ๋ฅผ ๋์ ๋ถํ๊ฑฐ๋ ํผ๋์ํค๋ ์ผ ์์ด ์ข
๋ ฌ๋ก ์ฌ๋ฐฐ์ด ํ๊ธฐ์ ์ข์ ๋ฐฉ๋ฒ์
๋๋ค. ๋ ์ ์ํ๊ฒ ๋ณด์ฌ์ฃผ๊ณ , ์คํฌ๋กค ๋ค์ด์ผ๋ก ๋ ๋ง์ด ๋ณผ ์ ์์ต๋๋ค. ์ฆ ์นด๋๋ ๋จ์ํ๊ณ ๊นจ๋ํ๊ณ ๋ค์ฌ๋ค๋ฅํฉ๋๋ค. ์๋ฐํ๊ฒ ๋งํ๋ฉด ์น์์ ํ์ํ ๊ฒ์ด์ฃ . 2014๋
๋ถํฐ 2015๋
๊น์ง ๋ ๋ง์ด ๋ณผ ์ ์๊ธธ ๊ธฐ๋ํฉ๋๋ค.
7. ํ๋ซ๋์์ธ์ ์ฑ์ฅํ๋ค. - ๋ฉํฐ๋ฆฌ์ผ ๋์์ธ (Flat Design is Growing Up - Material Design)
(์ถ์ฒ : http://www.google.com/design/)
ํ๋ซ๋์์ธ์ ์ง๋ 1-2๋
๋์ ๋ง์ ๊ฒ์ ์ด๋ฃจ์๊ณ 2015๋
์๋ ํ๋ซ๋์์ธ์ ๊ฐ์ธ๋ ์ฌ์ ํ ๊ฒ์ผ๋ก ๋ณด์ฌ์ง๋๋ค. ํ๋ซ๋์์ธ์ ๋ฉํฐ๋ฆฌ์ผ ๋์์ธ์ ํตํด ์ฑ์ฅํ ๊ฒ์
๋๋ค. ๋ฉํฐ๋ฆฌ์ผ ๋์์ธ์ด๋ ๋ฌด์์ผ๊น์?
๋ฉํฐ๋ฆฌ์ผ ๋์์ธ์ ๊ตฌ๊ธ์์ ๋ชจ๋ฐ์ผ์ ์ํ(๊ทธ๋ฆฌ๊ณ ์ผ๋ฐ์ ์ธ ๋์์ธ์์) ์๋ก์ด ๋ฐฉํฅ์ ๋ฐํํ ๊ฒ์
๋๋ค. โ๋ฉํฐ๋ฆฌ์ผ์ด๋ ๊ทธ๋ค์ ๋ง์ ์ธ์ฉํ๋ฉด ๋ฉํํฌ์ด๋ค.โ ๋ฉํฐ๋ฆฌ์ผ ๋ฉํํฌ๋ ๊ณต๊ฐ์ ์ค๋ช
ํ๊ธฐ ์ํ ํตํฉ์ด๋ก ์ด๋ฉฐ, ์ด๋๋ฐฉ์์ ๋งํฉ๋๋ค. ๋ฉํฐ๋ฆฌ์ผ์ ์ด๊ฐ์ผ๋ก ๋๊ปด์ง๋ ์ฌ์ค์ ๋ฐํ์ผ๋ก ํฉ๋๋ค. ์ด๊ฒ์ ์ข
์ด์ ์ํฌ์ ์ฐ๊ตฌ์์ ์๊ฐ์ ์ป์์ต๋๋ค.
8. ๋ง์ดํฌ๋ก์ธํฐ๋ ์
(Microinteractions)
๋ฉํฐ๋ฆฌ์ผ ๋์์ธ ์ดํ์ ํธ๋ ๋๋ผ๊ณ ๋งํ ์ ์๊ฒ ์ต๋๋ค. ๋ง์ดํฌ๋ก์ธํฐ๋ ์
์ ๋ฌด์์ผ๊น์? ์ด๊ฒ์ ์ฌ์ฉ์์๊ฒ ์ ํ(๋๋ ์น์ฌ์ดํธ ๋ชจ๋)๋ด์ ๊ฒฝํ์ด๋ ์๊ฐ์ ๋ณด์ฌ์ค๋๋ค. ์ด๊ฒ์ ๋จ๋
์ผ๋ก ์ฌ์ฉํ ์ ์๋ ๊ฒฝ์ฐ์ ์ฐ์
๋๋ค. ํ๊ฐ์ง ์๋ก ์น์ฌ์ดํธ์ ์ด๋ฉ์ผ ๊ฐ์
ํ์
์ฐฝ์
๋๋ค. ๋ง์ดํฌ๋ก์ธํฐ๋ ์
์ ์คํฌ๋ฆฐ ์ ๋ค๋ก ํ๋๋ ์ฑ์ง์ด ์๊ณ , ์ ์ ์ธ ๊ทธ๋ํฝ์ ๊ฐ์ฑ ์๊ณ ์พํํ๊ฒ ๋ํ๋ผ ์ ์์ต๋๋ค. ๋ง์ดํฌ๋ก์ธํฐ๋ ์
์ ์ฌ์ฉ์์๊ฒ ์ผ(๊ฒฝํ)์ ์ฃผ์ด ํ๋ฐํ๊ฒ ์ด์ง์ํค๋ ์ญํ ์ ํฉ๋๋ค. ํนํ ์ด๊ฒฝ์ฐ ๋ ๋ง์ ์ด๋ฉ์ผ ๊ฐ์
์ ์๋ฅผ ์๋ฏธํฉ๋๋ค.
+ ์ฝ๊ฒ ์๊ฐํ๋ค๋ฉด, ๋ง์ดํฌ๋ก ์ธํฐ๋ ์
์ ์ฐ๋ฆฌ๊ฐ ์ด๋ฉด์ ๋๋ผ๋ ์๊ฐ์ ์ธ ๋ฐ์๋ค์ด๊ณ , ์ฐ๋ฆฌ๊ฐ ๋๋ฌด ์ต์ํด์ ธ์ ์ธ์์ ๋ชป ํ ์๋ ์์ต๋๋ค. ์๋ฅผ๋ค๋ฉด, ์์ดํฐ ๋ฒจ/์ง๋ ๋ฒํผ์ด๋ค. ๋ฒํผ์ ์๋๋ก ๋ด๋ฆฌ๋ฉด(์ผ๋ฐ๋ชจ๋ -> ์ง๋๋ชจ๋) ์์ดํฐ์ด ์๊ฐ์ ์ผ๋ก ๋จ๋ฆผ์ ์ค๋๋ค. (์ฐ๋ฆฌ๋ ์ด๊ฐ์ผ๋ก ๋จ๋ฆผ์ ์ธ์งํ๊ณ , ํธ๋ํฐ์ด ์ง๋๋ชจ๋๋ก ์ค์ ๋์๋ค๋ ์ฌ์ค์ ์ธ์ํฉ๋๋ค.) ๋๋ ์ด ํจ๊ณผ๋ฅผ ์ ์ด์ฉํ๋ค๋ฉด ์น์ ๋์ฑ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๋ง๋ค ์ ์์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.(์ฐ๋ฆฌ wit in web ์ฒ๋ผ)
9. ์๋ก ์์ฉํ๋ ์ด์ผ๊ธฐ (Interactive Storytelling)
(์ถ์ฒ : http://www.theguardian.com)
๋น์ ์ด ๋ชจ๋ ๊ฒ์ ๋์์ ๋ง๋ค ๋ ์ฌ๋ฌ๋ถ์ ๋ฌด์์ ์ด๋ป๊ฒ ํด์ผ ํ ๊น์?
๋ํํ ์คํ ๋ฆฌํ
๋ง์ ์ฌ์ฉ์๊ฐ ํ๋์ ํตํด, ์ด์ผ๊ธฐ์ ์ฃผ์ธ๊ณต์ด ๋์ด ๋ช
๋ น์ ์คํํ๊ฑฐ๋, ์ด์ผ๊ธฐ์ ํ์ด ๋๊ฐ๋ ์ญํ ๋ก์จ ๊ทน์ ์ธ ์คํ ๋ฆฌ๋ฅผ ๋ง๋ค๊ฑฐ๋ ์ํฅ๋ ฅ์๋ ๋์งํธ ์ํฐํ
์ด๋จผํธ์ ํ ํํ์
๋๋ค. (์ํคํผ๋์ ์๋ฃ)
๋ด๊ฐ ์๋ฏธํ๋ ๊ฒ์ ๋น์ ์ ํ์ด์ง ๋ ์ด์์๋ถํฐ ํฐํธ ์ ํ๊น์ง ์ฆ, ๋น์ ์ ์น ์นดํผ๋ค๊ณผ ์คํ ๋ฆฌ์ ์งํ์ ํตํด ๋ฐ์ํ๋ ํ์ด์ง๋ก ๋ฌ์ฌ ๊ธฐ๋ฒ์
๋๋ค. ์ด๋ฌํ ํ์ด์ง์ ์ปจ์
๊ณผ ๊ฐ์น๋ฅผ ์ฌ๋๋ค์๊ฒ ํ๋์ ์ผ๋ก ๋ณด์ฌ์ค์ผ๋ก์จ ์์ง์ ์ธ ์คํ ๋ฆฌ๋ฅผ ๋งํ ์ ์์ต๋๋ค.
10. ๊ฐ์ธํ๋ ์ฌ์ฉ์๊ฒฝํ
์ฟ ํค๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ ๋ฐฉ๋ฌธ์๋ค์๊ฒ ๊ด๋ จ ์ปจํ
์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ์๋ก์ด๊ฒ์ด ์๋๋๋ค. ํ์ง๋ง ํ์
๊ณผ ๊ฐ์ ์คํธ์ค๋ฌ์ด ๋์ ๊ดํ๋ค์ ์ด ๊ธฐ์ ๋ค์ด ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ๋คํ๋ฆญ์ค๋ ์ฌ๋ฌ๋ถ์ด ์ต๊ทผ์ ๋ดค๋ ๊ฒ์ ๋ค์ ๊ธฐ์ตํ ์ ์๋๋ก ์ฟ ํค๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ ํ๋ธ๋ ๊ทธ๋ ๊ฒ ํฉ๋๋ค.