Weitere รคhnliche Inhalte
รhnlich wie 2012 UX Design Trend Report Part 1_SYS4U I&C (20)
2012 UX Design Trend Report Part 1_SYS4U I&C
- 1. 2012 UX Design Trend Report
Part 1
2012.12.04
UI/UXํ
๋ง์ํฌ ์ฃผ์
ยฉ 2012 SYS4U I&C All rights reserved.
- 2. ๋ชฉ์ฐจ
I. ์น ํธ๋๋ ๋ถ์
II. ์น ๋์์ธ ํธ๋๋ ๋ถ์
III. ๊ฒฐ๋ก
ยฉ 2012 SYS4U I&C All rights reserved.
- 3. I. ์น ํธ๋๋ ๋ถ์
1. ๋ฐ์ํ ์น๋์์ธ
2. ๊ทธ๋ฆฌ๋ ์์คํ
3. ํ
ํฌ๋๋ก์ง์ ์ํธ์ ๋ง๋จ
4. ์คํฌ๋กค
5. ์ฌ์
6. ๋ชจ๋ ์ธํฐํ์ด์ค
ยฉ 2012 SYS4U I&C All rights reserved.
- 4. 1. ๋ฐ์ํ ๋์์ธ
๋ฐ์ํ ์น๋์์ธ (Responsive Web Design)
๋ฐ์ํ ์น ๋์์ธ์ด๋?
๋ค์ํ ๋๋ฐ์ด์ค๋ค์ด ํ๋์ ์์ค๋ก ๋์คํ๋ ์ด ๊ท๊ฒฉ๊ณผ ์๊ด์์ด ๊ฐ ๋์คํ๋ ์ด์ ์ต์ ํ๋ ํ๋ฉด์ ์ ๊ณตํ
๋๊ฒ
์ฌ์ฉ์์ ์ฌ์ฉํ๊ฒฝ๊ณผ ํ๋ํจํด์ ์ ๊ธฐ์ ์ด๊ณ ์ ์ ํ๊ฒ ๋ฐ์ํ๋ ์น ์์๋ค์ ๋ํ ์ด์ฒด์ ์ธ ๋์์ธ
๋ฐ์ํ ์น ๋์์ธ์ ๋ฐ์คํฌํ/ํ๋ธ๋ /๋ชจ๋ฐ์ผ ํฐ ๋ณ๋ก ์ฌ์ด์ฆ๋ ๋ค๋ฅด์ง๋ง ์ผ๊ด์ฑ ์๋ ๋์์ธ๊ณผ ๊ฐ๋
์ฑ์ ๊ณ
๋ คํด ์ ์ฉํ๋ค. ์ปจ์
์ ์ฌํ, ๋ชจํฐ๋ธ๋ ๋
ผ๋ฆฌ์ , ๊ธฐ์ ์ ๊ฐ๋จํ ๊ฒ์ด ๋ฐ์ํ ์น ๋์์ธ์ ํน์ง์ด๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 5. 2. ๊ทธ๋ฆฌ๋ ์์คํ
๊ทธ๋ฆฌ๋ ์์คํ
(Grid System)
๋ฐ์ํ ์น์์ ๊ฐ์ฅ ์ค์ํ๊ฑด ๊ทธ๋ฆฌ๋ ์์คํ
์ด๋ค. ๊ทธ๋ฆฌ๋ ์์คํ
์ผ๋ก ์ธํด ์ ๋์ ์ผ๋ก ์ฌ์ด์ฆ์ ๋ง๊ฒ ์กฐ์
๋์ด ๋ค์ํ ํฌ๊ธฐ์์๋ ๋ณผ ์ ์๋ค.
๋ํ ์ค๋๋ ์ ๋์ฆ(๋ชจ๋ฐ์ผ ์ปจํ
์ธ )์ ๋ง์ถ๊ณ ์ ์ฐํ ๊ฐ๋ณ์ฑ์ ์ ๊ณตํ ์ ์๋ค
3. ํ
ํฌ๋๋ก์ง์ ์ํธ์ ๋ง๋จ
ํ
ํฌ๋๋ก์ง์ ์ํธ์ ๋ง๋จ (jQuery / CSS3 / HTML5 Animation)
๋ค์ํ ๋ธ๋ผ์ฐ์ (์ฌํ๋ฆฌ, ํฌ๋กฌ, ํ์ด์ดํญ์ค, ์ต์คํ๋ก๋ฌ ๋ฑ)์ ์
๊ทธ๋ ์ด๋์ ์ ๊ณต์ผ๋ก ์น์ ํ
ํฌ๋๋ก์ง๊ฐ ํฅ
์๋์๋ค.
jQuery๋ ์ฐฉ์ ์ค๋น์ค์ธ ๋ธ๋ผ์ฐ์ ํจ๊ณผ์ ์ฃผ๋ฅ์ด๋ ๋ถํํ๋ 100%์ ์ง์์ ํ์ง๋ ์๋๋ค. ๋ฐ๋ผ์ css3์
์์ ๋์ฒด๋ฐฉ์์ ์ฌ์ฉํ ๋ค๋ ๊ฒ์ ๋น์ ์ ์น์ฌ์ดํธ๊ฐ ๋๋ถ๋ถ์ ๋ฐฉ๋ฌธ์๋ค๊ณผ ํธํ์ด ๊ฐ๋ฅํ์ฌ ์์ธ์ ์ธ ๊ฒฝ
ํ์ ์ ๊ณตํ๋ค๊ณ ๋ณผ ์ ์๋ค.
์น ๋์์ด๋๋ค์ html๊ณผ css๋ฅผ ๋ณด๋ค ๋ค์ํ๊ฒ ์ด์ฉํ๋๋ฐ html๊ณผ css๋ ์ปดํจํฐ ์ฝ๋ฉ๋ง์ผ๋ก ๋ค์ํ ์ก์
์
๊ตฌํํด๋ธ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 6. 4. ์คํฌ๋กค
์คํฌ๋กค (Scrolling, Vertical Narratives)
๋ชจ๋ฐ์ผ ๋๋ฐ์ด์ค์ ์ฆ๊ฐ๋ก ๋ชจ๋ฐ์ผ, ํ๋ธ๋ ๋ฑ์๋ ์ฌ์ฉํ ์ ์๋ ์ธ๋ก ์คํฌ๋กค์ ๋ํ ์ค์์ฑ์ด ์ฆ๊ฐํ๊ณ ์
๋ค.
์ด๋ ๊ฒ ์น์ ๋ณด๋ ์คํฌ๋ฆฐ์ด ๋ค์ํ๊ฒ ๋ณํ๋๋ฉด์ ๋งจ ์์ ์ค์ํ ๋ฉ์ธ์ง๋ฅผ ๋ด์์ผ ํ๋ค๊ณ ํ๋ ๊ธฐ์กด์ ์๊ฐ
์ด ๋ชจํธํด์ก๋ค. ์ค์ ๋ก ์ธ๋ก ์คํฌ๋กค์ ์ด์ฉํ ํฅ๋ฏธ๋ก์ด ์ฌ์ดํธ๋ค์ด ๋์ด๋๊ณ ์๊ณ , ์น ๋์์ด๋์ ์๋ก์ด ์
๋๋ค์ ์ฟ๋ณผ ์ ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 7. 5. ์ฌ์
์ฌ์
๋๊ฐ์ (์ฌ์ )์ ์ด์ฉํ ๋์์ธ์ด ๋์ด๋๊ณ ์๋ค. ์ด๋ ์ ํต์ ์ธ ์น ๋ ์ด์์(header, content column,
sidebar)๋ฅผ ๊นจ๊ณ
์ข ๋ ๋
ํนํ๊ณ ๊ทธ๋ฆฌ๋๋ฅผ ๊ฐ๋ก์ง๋ฅด๋ ์์ ์๋ก์ด ์๋๋ฅผ ํ๊ณ ์ ํ๊ธฐ ๋๋ฌธ์ด๋ค.
์ฌ์ ์ ๊ทธ๋ฆฌ๋์ ์ด๊ธ๋๋ค๊ณ ๋ง ์๊ฐํ์ง ๋ง๊ณ ์๋ก์ด ๋์ ์ ํจ์ผ๋ก์จ ์ถฉ๋ถํ ๋ค์ํ ๋์์ธ์ ๋ํ ๊ฒฝํ
์ ํ ์ ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 8. 6.๋ชจ๋ ์ธํฐํ์ด์ค
๋ชจ๋ ์ธํฐํ์ด์ค
๋ชจ๋ ์ธํฐํ์ด์ค๋?
ํ๊ฐ์ง ์ผ์ ์ํํ๋ ํ๋ก๊ทธ๋จ์์ ์ฌ๋ฌ๊ฐ์ง ์ธํฐํ์ด์ค๋ฅผ ํตํด ์ ๋์ ์ผ๋ก ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฒ์ ๋งํ๋ค.
์ดํ๋ฆฌ์ผ์ด์
์ ์ํฅ์ผ๋ก ๋ชจ๋์ฑ์ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ์ง ์น๋์์ธ์ ์ฌ์ ํธํ๊ธฐ ์์ํ๊ณ , ๋๋๊ฒ๋ ์ฐ๋ฆฌ๋
ํ์ด์ค๋ถ๊ณผ ํธ์ํฐ๊ฐ์ ์ฑ์์ ์น๊ณผ ๊ด๋ จํ ์ปจํ
์ธ ์ ์ ๊ทผํ๊ณ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ๊ทธ๋ฌ๋ฉด์ ๋ฐ์คํฌํ
๊ณผ ์คํฌ๋ฆฐ, ํญ, ์์ดํฐ๊ณผ ๊ฐ์ ํธ๋๋๋ฐ์ด์ค ์ฌ์ด์ ๊ฒฝ๊ณ๊ฐ ๋ชจํธํด ์ง๊ณ ์๋ค.
ํธ์ํฐ ํ ํ์ด์ง ์์์ ๋ค๋ฅธ ํ์ด์ง๋ก ๋์ด๊ฐ์ง ์์๋ ์ฐ๋ฆฌ๋ ๋ชจ๋ ๊ฒ์ ๋ค ํ ์ ์๋ค. ์๋ฅผ ๋ค๋ฉด, ํ๋ก
์์ ๋ณด๊ณ , ํ๋ก์๋ฅผ ๋ณด๊ณ , ๋ค๋ฅธ ์ฌ๋๋ค์ ์์์ ๋ณด๊ธฐ๋ ํ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 9. II. ์น ๋์์ธ ํธ๋๋ ๋ถ์
1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
ยฉ 2012 SYS4U I&C All rights reserved.
- 10. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
doubledot.co.kr
์ฅ์
๋ ์ด์์์ด ๊น๋ํ์ฌ ๋ณด๊ธฐ ํธํ๋ค. ์ ์ฒด์ ์ผ๋ก ๊ทธ๋ ์ดํค์ ์ฌ์ฉํ์๊ณ ์ปจํ
์ธ ์ ๋ง์ฐ์ค ์ค๋ฒ๋์์ ๋ ๋ง
๋ธ๋ฃจ๊ณ์ด์ ์์ ์ฌ์ฉํ์ฌ ์ ์ ๊ฐ ์์ ์ด ์ ํํ ์์ญ์ ๋ช
ํํ ์์ ๊ฐ ์๋ค.
๋จ์
์ด๋ฏธ์ง ์์์๋ ๋ํ๋์ง ์์ง๋ง ๋ชจ๋ ์ปจํ
์ธ ๊ฐ ๊ณ์ ์์ง์ฌ์ ์์ ์ด ๋ถ์ฐ๋๊ณ ์ ์ ๊ฐ ์ด๋ค๊ฒ ์
์ ํํด์ผ ํ ์ง ๋ชจ๋ฅด๊ฒ ๋ ์๋ ์๋ค.์ ์ฒด์ ์ธ ๊ทธ๋ ์ดํค์ ํฐํธ๋ ๊ทธ๋ ์ดํค์ผ๋ก ์ฌ์ฉํ์ฌ ๊ฐ๋
์ฑ์ด ๋จ
์ด์ง๋ค
ยฉ 2012 SYS4U I&C All rights reserved.
- 11. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.nike.com/jumpman23/cp3vi/
์ฅ์
ํ๋ฉด์ ์ญ๋์ ์ธ ์ธ๋ฌผ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์นํ์ฌ ์คํฌ์ธ ์ ํ์ฌ์ดํธ์ ๋๋์ ์์ด๋ ธ๋ค. ์ฌ์ ๋ ์ด์์์ ์ฌ์ฉํ์ฌ
์ญ๋์ฑ์ ๊ทน๋ํ ์์ผฐ๋ค.
๋จ์
ํฐํธ๊ฐ ๊ฐ์ด๋ฐ ๋ฐฐ์น ๋์ด์์์๋ ๋ถ๊ตฌํ๊ณ ์ด๋ฏธ์ง์ ๋นํด ๋์ ์ ๋์ง ์๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 12. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
smarttv.samsung-peru.com
์ฅ์
ํ ํ๋ฉด์ ํ๋์ ์ํ์ด๋ฏธ์ง๋ง์ ๋ฐฐ์นํ์ฌ ์ํ์ ๋ํ ์ง์ค๋๋ฅผ ๋ํ๋ค. ๋์ ๊ณต๊ฐ์ ๊น๋ํ ํฐํธ๋ฅผ ์ฌ์ฉ
ํ์ฌ ๊ฐ๋
์ฑ์ ๋ํ๋ค. ์ ์ฒด์ ์ธ ์ ๋ฐฐ์ด๊ณผ ๋๋์ด ์ข๋ค.
๋จ์
์ ์ฒดํ๋ฉด์ ๋นํด ๋ฉ๋ด๊ฐ ์๋์ ์ผ๋ก ์๊ณ ๊ฐ์ด๋ฐ ํฐํธ๋ ์์ ๋๋์ด๋ค
ยฉ 2012 SYS4U I&C All rights reserved.
- 13. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
restaurant-h.com
์ฅ์
background color๋ฅผ ๋ณด๋ผ์์ ์ฌ์ฉํ๊ณ ๊ทธ์ ์ด์ธ๋ฆฌ๋ ์ผ๋ฌ์คํธ ์ด๋ฏธ์ง๋ฅผ ์ด์ฉํด ํฌ์ธํธ๋ฅผ ์ฃผ์๋ค.
ํ๊ธ์จ ์์ฃผ์ ํฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ณ๊ฒ ์ ๋ณด๋ฅผ ์ ๋ฌ ํ์๋ค. ๋ถ๋ด ์์ด ๊ธ์ ์ฝ์ ์ ์๋ค.
๋จ์
left ๋ฉ๋ด๊ฐ ๋์ ์ ๋์ง ์์์ ์ ๊ทผํ๊ธฐ ์ด๋ ต๋ค. ๋ํ ํฐํธ์ปฌ๋ฌ์ BG์ปฌ๋ฌ๊ฐ ๋น์ทํด์ ๊ตฌ๋ถํ๊ธฐ ์ด๋ ต๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 14. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.canon_ci.co.kr
์ฅ์
๊ฐ๋ ฌํ ๋ ๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ ๋ค์ ์์ ์ ์ก์๋ค. ๋ฐฐ๊ฒฝ๊ณผ ๋๋น๋๋ ํฐ์์ผ๋ก ํฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋
์ฑ์ ๋
ํ๋ค. ์ ์ฒด์ ์ผ๋ก ์นดํซ ํจํด์ ์ฌ์ฉํ์ฌ ์ง๊ฐ์ด ๊ทธ๋๋ก ์ ๋ฌ ๋๋ ๋ฏ ํ๋ค. ์ง๊ฐ๊ณผ ์๊น์ด ์กฐํ๊ฐ ์๋์๋ค.
๋จ์
๊ฐ๊ฐ์ ์ปจํ
์ธ ๊ฐ ๋ถ์ฐ๋์ด ๋ฐฐ์น๋์๊ณ , ๊ทธ๊ฒ์ด ๊ฐ๊ฐ ์์ง์์ด ์๊ธฐ ๋๋ฌธ์ ์ ์ ๋ค์ด ํ ์ปจํ
์ธ ์ ์ฃผ๋ชฉํ ์
์์ด ์์ ์ด ๋ถ์ฐ๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 15. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.hanafn.com
์ฅ์
์ ์ฒด์ ์ผ๋ก ๊ทธ๋ฆฐํค์ ์ฌ์ฉํ์ฌ ์ฐจ๋ถํ๊ณ ์ ๋ขฐ๊ฐ ์๋ ๊ธ์ต์ด๋ฏธ์ง๋ฅผ ์ ์ด๋ ธ๋ค.
๋ฐ๋ํํ์์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๊ณ ๊ทธ ์์ ํฐํธ๋ฅผ ๋ฃ์ด ์ ์ฒด์ ์ผ๋ก ์ ๋ฆฌ๋์ด์๋ ๋๋์ ์ค๋ค.
๋จ์
๋ฉ์ธ ์ด๋ฏธ์ง๋ฅผ ์ ์ธ ํ๊ณ ๋๋จธ์ง ์ด๋ฏธ์ง๋ ๊ทธ๋ ์ดํค์ ์ฌ์ฉํด์ ๋์ ์ ๋์ง ์๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 16. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.hongikdmd.com
์ฅ์
๋ฐ๋ํ ํ์์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ์ฌ ๊น๋ํ ์ด๋ฏธ์ง ๋ฐฐ์น๊ฐ ๋๋ณด์ธ๋ค. ๋ํ ๋ ํํธ ๋ฉ๋ด์ ๋ก๊ณ ๋ ๋ฐฐ๊ฒฝ์๊ณผ ๋
์กฐ๋ฅผ ์ด๋ฃจ์ด์ ๋์ ์ ๋๋ค. ์ปจํ
์ธ ํ๋์ฉ์ ์ ํ ํ ๋๋ง๋ค ๊ทธ์ ๋ํ ์ค๋ช
์ด ๋๋กญ๋ค์ด ๋์ด์ ๋์ค๊ธฐ
๋๋ฌธ์ ์ปจํ
์ธ ์ ๋ํด ์ฌ์ ์ ๋ณด๋ฅผ ์ป๊ณ ์ปจํ
์ธ ๋ฅผ ๋ณผ ์ ์๋ค.
๋จ์
ํ๋ฉด ์ ์ฒด๊ฐ ์๊ฐ์ด ๋ค๋ฅธ ์ ๊ฐ๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์นํ์๊ธฐ ๋๋ฌธ์ ์์ ์ด ๋ง์ด ๋ถ์ฐ๋๋ ๊ฒฝํฅ์ด ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 17. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.hongikdmd.com
์๋ธํ์ด์ง
๊น๋ํ ๊ทธ๋ฆฌ๋์ ์ ๊ตฌ์ฑ์ด ์ข๋ค. ์ต์๋จ์ ์ด๋ฏธ์ง๊ฐ ํฌ๊ฒ ๋ฐฐ์น๋์ด ์์ ์ ์ฌ๋ก์ก๋๋ค
ยฉ 2012 SYS4U I&C All rights reserved.
- 18. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.kodex.com
์ฅ์
์ ์ฒด์ ์ผ๋ก ํ์ดํ๋ฅผ ์ด์ฉํ์ฌ ๋์์ธํ๋ค. ๋น ๋ฅด๊ฒ ๋ณํํ๋ ํฌ์ํํฉ์ ํ์ดํ๊ฐ ์ ๋ํ๋ด ์ค ๊ฒ ๊ฐ
๋ค. ์ฌ๋ฐฑ์ด ๋ง์์ ๋ณด๋ ์ฌ๋์ด ๋ต๋ตํจ์ ์ ๊ฒ ๋๋๋ค.
๋จ์
์ ์ฒด์ ์ผ๋ก ๊ฐ์ง ์ด๋ฏธ์ง๋ก๋ง ์ฌ์ฉ์ ํ๋ค ๋ณด๋ ๋ฌด๊ฒ๊ณ ๋จ์กฐ๋ก์ด ๋๋์ ๋ฐ๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 19. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.nikechosenseries.com
์ฅ์
๋ฉ๋ด๊ตฌ์ฑ์ด ๋
ํนํด์ ์ ์ ๋ค๋ก ํ์ฌ๊ธ ํฅ๋ฏธ๋ฅผ ์ ๋ฐ์ํจ๋ค. ๋ฉ๋ด๋ง๋ค ์ด๋ฏธ์ง๋ฅผ ๋ฐฐ์นํจ์ผ๋ก์จ ํฐํธ๋ง์ผ๋ก ๊ตฌ
์ฑ๋ ๋ฉ๋ด๋ณด๋ค ๋ ์์๋ณด๊ธฐ ์ฝ๋ค. ๋ฉ๋ด๊ฐ ๊ธฐ๋ณธ์ํ๋ ํ๋ฐฑ์ด์ง๋ง ์ ํํ์ ๋๋ง ์ปฌ๋ฌ๋ก ๋ํ๋๊ฒ ๋๊ณ ์คํฌ
ํธ๋ผ์ดํธ๋ฅผ ๋ฐ๋ ํจ๊ณผ๋ฅผ ์ค์ผ๋ก์จ ์ฌ์ดํธ์ ์ฌ๋ฏธ๋ฅผ ์ด๋ ธ๋ค.
๋จ์
๋ฉ๋ดํ๋ฉด์ ๋น์ฃผ์ผ์ ์ข์ง๋ง ๊ทธ์ ๋นํด ํฐํธ๊ฐ ๋์ ์ ๋์ง ์๋๋ค. ํฐํธ์ปฌ๋ฌ์ ๋ฐฐ๊ฒฝ์ ์ปฌ๋ฌ๊ฐ ์ ๊ตฌ๋ถ
๋์ง ์์ ๊ฐ๋
์ฑ์ด ๋จ์ด์ง๋ ๋ฉด์ด ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 20. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
shopping.naver.com
์ฅ์
์ ์ฒด์ ์ผ๋ก ๊น๋ํ ๊ตฌ์ฑ์ ๋ณด์ฌ์ค๋ค. ํ๋์ ์ด๋ฏธ์ง์ ํฌ์ธํธ๋ฅผ ์ฃผ๋ ๊ธ์จ๋ง์ ์ฌ์ฉํด์ ํ๋ฉด์ ๊ตฌ์ฑํ์ฌ
๋ณด๊ธฐ ํธํ๊ณ ํฐํธ์ ๊ฐ๋
์ฑ๋ ์ข๋ค. ์๋จ์ ๋ค์ด๋ฒ ํน์ ์ ๋
น์ ๋ค๋น๊ฒ์ด์
๋ฐ๊ฐ ์์ ์ ํ๋์ ์ฌ๋ก์ก๋๋ค.
๋จ์
๋จ์กฐ๋ก์ด ๊ตฌ์ฑ ์ด์ฌ์ ์กฐ๊ธ ์ง๋ฃจํ ๋ฉด์ด์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 21. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
desk.cmiscm.com
์ฅ์
๊ฐ์ข
์ง์
์ ์ข
์ฌํ๋ ์ฌ๋๋ค์ ์ฑ
์์ ๋ณด์ฌ์ฃผ๋ ์ฌ์ดํธ๋ก ๊ตฌ์ฑ์ด ํฅ๋ฏธ๋กญ๋ค. ์ฑ
์๋ชจ์์ ์์ด์ฝ์ผ๋ก ๊ฐ์์
์ฑ
์๋ชจ์ต์ ํ์ํํ์๊ณ ๊ฐ์๊ฐ์์ ์์ด์ฝ์ ๋ฐฐ์นํ์ฌ ๊ฐ๊ฐ์ ํน์ฑ์ ์ด๋ ธ๋ค. ์ ์ฒด์ ์ผ๋ก ๊ทธ๋ ์ดํค์ด์ง
๋ง ๋ํ์ฌ์ง๋ง ์ปฌ๋ฌ๋ฅผ ์ฃผ์ด ๋์ ์ ๋๊ฒ ํํํ์๋ค.
๋จ์
๋ฉ์ธ๋ฉ๋ด์์ bg์ปฌ๋ฌ์ ํฐํธ ์ปฌ๋ฌ๊ฐ ์ ์ฌํ์ฌ ๊ตฌ๋ถํ๊ธฐ ํ๋ ์ ์ด ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 22. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
desk.cmiscm.com
์๋ธํ์ด์ง
์๋ธ๋ฉ๋ด์์๋ ๊ฐ๊ฐ์ ์ปจํ
์ธ ๋ง๋ค ๊ณ ์ ์ ์ปฌ๋ฌ๋ฅผ ์ฃผ์ด์ ๊ตฌ๋ณ์ ์ฝ๊ฒ ํ๋ค. ํ์ง๋ง ๋ฉ๋ด๊ฐ ํ๋จ์ ์์นํ
์ฌ ์ ๊ทผํ๊ธฐ ์ด๋ ค์ด ๋จ์ ์ด ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 23. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
itstimefor.skype.com
์ฅ์
์ปฌ๋ฌ ๊ตฌ์ฑ์ด ์ข์์ ํ๋์ ๋ค์ด์จ๋ค. ํนํ ์ค์นด์ด ๋ธ๋ฃจ์ ์ค๋ ์ง์ ๋๋น๊ฐ ํ์คํ์ฌ ๋์ ๋ ๋๋ ๊ฒ ๊ฐ๋ค.
๋ฉ์ธ์ ์ฐ์ฌ์ง ํฐํธ๊ฐ ๊ทธ๋ฆผ์ผ๋ก ๋ํ๋์ ๋ ์์๋ณด๊ธฐ๊ฐ ์ฝ๋ค.
๋จ์
์๋จ์ ๋นํด ํ๋จ์ bg์ปฌ๋ฌ๊ฐ ํฐ์์ด๋ผ์ ๊ณต๊ฐ์ด ๋ง์ด ๋น์ด ๋ณด์ธ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 24. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
nissaninnovationgarage.com
์ฅ์
๊ทธ๋ฆฌ๋ ๊ตฌ์ฑ์ ๋ง์ด ๋ณผ ์ ์๋ ๋ฐ๋ํํ์์ด์ง๋ง ์ด๋ฏธ์ง๊ฐ ๋
ํนํ๋ค. ์ด๋ป๊ฒ ๋ณด๋ฉด ์ด์ค๋ฌ์ธ ์ ์๋ ์ฐจ๊ณ
๋ฌธ ์ด๋ฏธ์ง๋ฅผ ์๋ง๊ฒ ๋ฐฐ์นํ์ฌ ์ฌ๋๋ค๋ก ํ์ฌ๊ธ ๊ถ๊ธ์ฆ์ ์ ๋ฐ์ํค๊ฒ ๋ง๋ค์๋ค. ์ธ๋ป ๋ณด๋ฉด ๋ฌด์์ธ์ง ๋ชจ๋ฅผ ๋ฐ
์ค ์ธ๋ฐ ์ฐจ๊ฐ ๋ฐฐ์น ๋์ด์๋ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ค์ผ๋ก์จ ์ฌ๋๋ค์๊ฒ ์ด๊ฒ์ด ๋ฌด์์ธ์ง๋ฅผ ์ ํํ ์ธ์งํ ์ ์๊ฒ
๋ง๋ค์๋ค.
๋จ์
๋ง์ฐ์ค๊ฐ ์ค๋ฒ ๋์์ ๋ ๋ฐ์ค ์์ ํฐํธ์ ๊ฐ๋
์ฑ์ด ๋จ์ด์ง๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 25. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
testofownership.com
์ฅ์
๋์์ํ๋ฉด์ด ์ต์๋จ์ ์๋ ๊ตฌ์ฑ์ด ๋
ํนํ๋ค. bg์ปฌ๋ฌ์ ํฐํธ๊ฐ ๋๋น๋๋ ์์ด๋ผ์ ๋์ ์ ๋๋ค. ์๋ธํ์ด
์ง์ ๊ทธ๋ํ๊ฐ ๋ฐฐ์น๊ฐ ์๋์๊ณ ์์ด ๋์ ์ ๋์ด์ ์ ๋ณด๋ฅผ ์ป๊ธฐ ์ฝ๋ค.
๋จ์
๋์์ ํ๋ฉด์ด ๋๋ฌด ์ปค์ ๋ค์ ๋ณด๊ธฐ์ ๋ถ๋ด์ค๋ฝ๋ค. ๊ตฌ์ฑ์ด ๋๋ฌด ๋จ์กฐ๋ก์์ ์ง๋ฃจํ๊ฒ ๋๊ปด์ง ์ ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 26. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
testofownership.com
์๋ธํ์ด์ง
bg์ปฌ๋ฌ์ ํฐํธ๊ฐ ๋๋น๋๋ ์์ด๋ผ์ ๋์ ์ ๋๋ค. ์๋ธํ์ด์ง์ ๊ทธ๋ํ๊ฐ ๋ฐฐ์น๊ฐ ์๋์๊ณ ์์ด ๋์
์ ๋๋ค. ์ซ์ํฌ๊ธฐ๊ฐ ์ปค์ ๋น ๋ฅธ ์๊ฐ์ ์ ๋ณด๋ฅผ ์ป์ ์ ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 27. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.domanistudios.com
์ฅ์
๋ฐฐ๊ฒฝ์ ํ๋์ ์ด๋ฏธ์ง๋ก ์ฌ์ฉํ์๊ณ ๋ชจ๋ ์ปจํ
์ธ ๋ ๊ฐ์ด์ ๋ฐฐ์นํ์ฌ ์์ ์ ํ๊ณณ์ ๋ชจ์๋ค. ์์์ ์ปจํ
์ธ
๋ฅผ ๋ฐฐ์นํ์ฌ ์ ์ฒด์ ์ธ ๋๋์ด ๋ถ๋๋ฌ์ ๋ณด์ธ๋ค. ์ปจํ
์ธ ์ปฌ๋ฌ๊ฐ bg์ปฌ๋ฌ์ ์ ์กฐํ๋ฅผ ์ด๋ฃจ์๋ค.
๋จ์
๋ฉ๋ด์ ํฐํธ๋ ๊ฐ์ด๋ฐ ์ปจํ
์ธ ์ ๋นํด ๋์ ์ ๋์ง ์๋๋ค. ๋ฉ๋ด๋ฅผ ์ ํํ์ ๋ ๋ฐ๋ถ๋ถ์ ์๊ธฐ๋ ํฌ์bar๋
๋ฉ๋ด๊ฐ ์ ํ๋์๋ค๋ ๋๋์ด ๋ํ ๊ฒ ๊ฐ๋ค. ๋ํ ๋ก๊ณ ์ด๋ฏธ์ง๊ฐ ๋์ ์ ๋์ง ์๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 28. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.domanistudios.com
์ฅ์
๋ฐฐ๊ฒฝ์ ํ๋์ ์ด๋ฏธ์ง๋ก ์ฌ์ฉํ์๊ณ ๋ชจ๋ ์ปจํ
์ธ ๋ ๊ฐ์ด์ ๋ฐฐ์นํ์ฌ ์์ ์ ํ๊ณณ์ ๋ชจ์๋ค. ์์์ ์ปจํ
์ธ
๋ฅผ ๋ฐฐ์นํ์ฌ ์ ์ฒด์ ์ธ ๋๋์ด ๋ถ๋๋ฌ์ ๋ณด์ธ๋ค. ์ปจํ
์ธ ์ปฌ๋ฌ๊ฐ bg์ปฌ๋ฌ์ ์ ์กฐํ๋ฅผ ์ด๋ฃจ์๋ค.
๋จ์
๋ฉ๋ด์ ํฐํธ๋ ๊ฐ์ด๋ฐ ์ปจํ
์ธ ์ ๋นํด ๋์ ์ ๋์ง ์๋๋ค. ๋ฉ๋ด๋ฅผ ์ ํํ์ ๋ ๋ฐ๋ถ๋ถ์ ์๊ธฐ๋ ํฌ์bar๋
๋ฉ๋ด๊ฐ ์ ํ๋์๋ค๋ ๋๋์ด ๋ํ ๊ฒ ๊ฐ๋ค. ๋ํ ๋ก๊ณ ์ด๋ฏธ์ง๊ฐ ๋์ ์ ๋์ง ์๋๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 29. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.fedex.com
์ฅ์
์ ์ฒด์ ์ผ๋ก ์ธํฌ๊ทธ๋ํฝ ์ฌ์ฉํด์ ์๋ฃ๋ฅผ ์๊ฐ์ ์ผ๋ก ํํํ์ฌ ํจ๊ณผ์ ์ธ ์ ๋ฌ์ด ์๋ ๊ฒ ๊ฐ๋ค.
๋จ์
bg์ปฌ๋ฌ๊ฐ ํ์์ด์ด์ ํํ ๋๋์ ์ฃผ๋ ๊ฒ ๊ฐ๋ค. ์๋จ์ ์ฐ์ฌ์ง ๋ฒํผ์ ๊ธ์จ๊ฐ ๋ช
ํํ ๋ณด์ด์ง ์๋๋ค. ๋ฐ๋
ํ๊ทธ๋ฆฌ๋๋ ์ข์ผ๋ ๊ตฌ์ญ์ ๋๋๋ ์ ๋๋ฌธ์ ์ปจํ
์ธ ๋ค์ด ์กฐํ๋กญ๊ฒ ๋ณด์ด์ง ์๋๋ค.
.
ยฉ 2012 SYS4U I&C All rights reserved.
- 30. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.fedex.com
์๋ธํ์ด์ง
์ซ์๋ฅผ ํฌ๊ฒ ์ฌ์ฉํด์ ๊ฐ์กฐ๋ ๋๋์ ๊ฐํ๊ฒ ์ค๋ค. ์งง์ ์๊ฐ์ ํ์คํ ์ ๋ณด์ ๋ฌ์ด ์ฉ์ดํ ๊ฒ ๊ฐ๋ค. ์ผ๋ฌ์ค
ํธ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํด ๊น๋ํจ์ด ๊ทน๋ํ ๋ ๊ฒ ๊ฐ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 31. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.milwaukeepolicenews.com
์ฅ์
๊ตญ๋ด์ ๊ณต๊ณต๊ธฐ๊ด ์ฌ์ดํธ์๋ ๋ค๋ฅด๊ฒ ์๋นํ ์คํ์ผ๋ฆฌ์ฌ ํ๊ฒ ๊ตฌ์ฑ๋์๋ค. ํ๋จ์๋ ์ญ๋์ ์ธ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉ
ํด์ ๊ฒฝ์ฐฐ์ ๋ชจ์ต์ ์ ๋ํ๋ด์๊ณ , ์คํฌ๋กค์ ๋ด๋ฆด ๋๋ง๋ค ์ด๋ฏธ์ง์ ์์ง์์ ์ค์ ์ฌ๋ฏธ์ ์ธ ์์๋ ๋ฃ์๋ค.
ํฐํธ์ปฌ๋ฌ๋ ๋ธ๋์ ์ฌ์ฉํด์ ๊ณต๊ณต๊ธฐ๊ด์ ๋ณด์์ ์ธ ์ด๋ฏธ์ง๋ฅผ ์ ๋ํ๋๋ค.
๋จ์
์ด๋ฏธ์ง์ ๋นํด ๋ฉ๋ด์ ํฐํธ๋ ์๋์ ์ผ๋ก ์๊ฒ ๊ตฌ์ฑ๋์ด ์ ๋ณด์ด์ง ์๋ ๋จ์ ์ด ์๋ค. ๋ฐฐ๊ฒฝ์ฌ๋ฐฑ์ด ๋๋ฌด ๋ง์
๋น์ด ๋ณด์ด๋ ๋๋์ด ๊ฐํ๋ค.
.
ยฉ 2012 SYS4U I&C All rights reserved.
- 32. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.milwaukeepolicenews.com
์๋ธํ์ด์ง
์ด๋ฏธ์ง์ ํฐํธ์ ๋ฐฐ์น๊ฐ ์ ์ด๋ฃจ์ด์ก๋ค. ๊น๋ํ ๊ทธ๋ฆฌ๋ ๊ตฌ์ฑ์์ ํฐํธ๋ฅผ ๋ฐฐ์นํ์ฌ ์ฝ๊ธฐ ํธํ๊ณ ๋์ ๋ชฉ๊ณผ ๋ณธ
๋ฌธ์ ํฌ๊ธฐ๊ฐ ์ ์ ํ์ฌ ๋ณด๊ธฐ ์ข๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 33. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.moma.org
์ฅ์
๊ฐ์ด๋ฐ ์์ ์ค์ฌ์ผ๋ก ๊ฐ ๊ตฌ์ญ์ด ์ค์ ๋๋ ๋ฉ๋ด๊ตฌ์ฑ์ด๋ค. ๊ฐ ๊ตฌ์ญ์ ์ ์ผ๋ก ์์๋ฅผ ๋ํ๋ธ ๊ฒ์ด ๋์ ๋๋ค.
๋ฉ๋ด๋ง๋ค ๊ณ ์ ์ ์์ด ์์ด์ ๊ตฌ๋ถ์ด ์๋๋ค. ์ ์ฒด์ ์ธ ์ปฌ๋ฌ๋ฅผ ํ์คํ
ํค์ผ๋ก ์ฌ์ฉํด์ ํธ์ํ ๋๋์ ๋ฐ์
์ ์๋ค.
๋จ์
๋ฉ๋ด๊ฐ ์ฐ๋ฐ์ ์ผ๋ก ํผ์ณ์ ธ์ ์ฐ๋งํ ๋๋์ด ์๋ค. ๋ํ ๋ฉ์ธ ๋ฉ๋ด๋ฐ๊ฐ ํ๋จ์ ๋ฐฐ์น๋์ด ์ฒ์ ๋ค์ด์จ ์ฌ๋์
์ ๊ทผํ๊ธฐ ์ด๋ ค์ด ๋จ์ ์ด ์๋ค.
.
ยฉ 2012 SYS4U I&C All rights reserved.
- 34. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.moma.org
์๋ธํ์ด์ง
์ด๋ฏธ์ง๋ฅผ ์ผ๋ ฌ๋ก ๋ฐฐ์นํ ์ผ๋ฐ์ ์ธ ๊ตฌ์ฑ์ด๋ค. ํ์ง๋ง ๋๋ฌด ์์ ๋ก์ด ๋ฐฐ์น ๋๋ฌธ์ธ์ง ๋ชฐ๋ผ๋ ์ ๋ฆฌ๊ฐ ์๋
๋ณด์ด๋ ๋๋์ด๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 35. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.moma.org
์๋ธํ์ด์ง
์ด๋ฏธ์ง ํ๋์ ๊ทธ์ ๋ฐ๋ฅธ ์ค๋ช
์ ๊ฐ๋ตํ๊ฒ ๋ํ๋ด์ ๊น๋ํจ์ด ๋๋ณด์ธ๋ค. ์ข์ฐ ํ์ดํ ์ปฌ๋ฌ๋ ์ ์ฒด์ ์ธ
์กฐํ๋ฅผ ์ ์ด๋ฃจ๋ ๊ฒ ๊ฐ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 36. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.usatoday.com
์ฅ์
๋ธ๋๊ณผ ๋ธ๋ฃจ์ ์ปฌ๋ฌ์กฐํ๊ฐ ์ ์ด๋ฃจ์ด์ ธ ์๋ค. ๋ํ ๋ฉ๋ด๋ง๋ค ์์ ๊ฐ์๊ฐ์์ bar๋ฅผ ๋ฃ์ด ๊ณ ์ ์ ์์ญ์ ์
๋ํ๋๋ค. ์ฌ๋๋ค์ด ์๊ธฐ ์ฌ์ด ๊ตฌ์ฑ์ผ๋ก ์ปจํ
์ธ ๋ฅผ ํจ์จ์ ์ผ๋ก ๋ฐฐ์นํ์๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 37. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.usatoday.com
์๋ธํ์ด์ง
๊ฒ์์์ด์ฝ์ ์ ํํด์ผ๋ง ๊ฒ์๋ฐ๊ฐ ๋์ค๋ ๊ฒ์ด ์กฐ๊ธ ๋ถํธํ๋ค. ์ปจํ
์ธ ์ ์ค์๋๊ฐ ์กฐ๊ธ ๋ ๋ํ๋๊ฒ์ด ์
์ฝ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 38. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.usatoday.com
์๋ธํ์ด์ง
์๋ธํ์ด์ง ๋ํ bar์ ์ปฌ๋ฌ์ ๋ฐ๋ผ ๋ณํํ์ฌ ๊ฐ์ ์ด๋ค ์์ญ์ ๋ณด๊ณ ์๋์ง ํ์คํ ๊ตฌ๋ถ์ด ๊ฐ๋ฅํ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 39. 1. ๊ฐ ์ฌ์ดํธ์ ์ฅ๋จ์
www.kbrockstar.com
์ฅ์
์๋ก์ฐ๋ฅผ ํฌ์ธํธ ์ปฌ๋ฌ๋ก ์ฌ์ฉํ์ฌ ๋์ ์ ๋๊ณ ๋ฐ๋ปํ ๋๋์ ์ค๋ค. ๋ฑ๋ฑํ์ง ์์ ๊ธ์จ์ฒด๋ฅผ ๋ง์ด ์ฌ์ฉํ์ฌ
๊ฐ๋ณ๊ฒ ์ฝ์ ์ ์๋ค. ๋ฐฐ๊ฒฝ์ปฌ๋ฌ์ ๊ฐ๊ฐ์ ์ปจํ
์ธ ์ปฌ๋ฌ๊ฐ ์กฐํ๋กญ๊ฒ ๊ตฌ์ฑ๋์ด์๋ค.
๋จ์
ํฌ๊ฒ๋ ๋ฐ๋ํ ํ์์ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ์์ง๋ง ํฌ๊ธฐ๊ฐ ์์ด ํ๊ณ ์ ๋ ฌ๋์ด์์ง ์์์ ์ ๋ฆฌ๋ ๋๋์ ์กฐ๊ธ
๋ ํ๋ค. ํ ๊ณต๊ฐ์ ๋๋ฌด ๋ง์ ์ปจํ
์ธ ๊ฐ ์์ด์ ์กฐ๊ธ ๋ต๋ตํด ๋ณด์ธ๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.
- 40. III. ๊ฒฐ๋ก
1. ๊ฒฐ๋ก
ยฉ 2012 SYS4U I&C All rights reserved.
- 41. 1. ๊ฒฐ๋ก
1. ๋ชจ๋๊ทธ๋ฆฌ๋
๋ฐ๋ํ์ฒ๋ผ ์ผ์ ํ ๊ฐ๊ฒฉ์ผ๋ก ๋๋์ด์ง ๊ณต๊ฐ์ ์ ๋ณด๋ฅผ ํจ์จ์ ์ผ๋ก ๋ฐฐ์นํด์ ๋ํ๋ด๋ ๋ชจ๋ ๊ทธ๋ฆฌ
๋๋ฅผ ํ์ฉํ ๋์์ธ์ด ๋ง์์ก๋ค.
2. ํธ์ง ๋์์ธ ํ์
์ปค๋ค๋ ๋ฐฐ๊ฒฝํ๋ฉด๊ณผ ํ์ดํฌ๋ฅผ ์ด์ฉํ์ฌ ์งง๊ณ ๊ฐ๊ฒฐํ ์ํํธ๋ฅผ ์ฃผ๋ ํธ์ง ๋์
์ธ๊ฐ์ ๋๋์ด ์ฃผ๋ ๋์์ธ์ด ๋ง์์ก๋ค.
3. ํฅ๋ฏธ,๊ฐ์ฑ
์ ํต์ ์ธ ์น ๋ ์ด์์(header, content column, sidebar)๋ฅผ ๊นจ๊ณ ํฅ๋ฏธ๋ฅผ ์ ๋ฐ์ํค๋ ์ฌ๋ฏธ์ ์ธ ์
์๊ฐ ๊ฐ๋ฏธ๋ ๋์์ธ์ด ๋ง์์ก๋ค.
ยฉ 2012 SYS4U I&C All rights reserved.