2014ë…„ 1ì›” 27ì¼
by aduris
0 comments

2014ë…„ 주요 웹디ìžì¸ 트렌드 18ì„ 

 

2014ë…„ì—” ì–´ë–¤ 웹디ìžì¸ 트렌드를 보게 ë  ê±°ë¼ ìƒê°í•˜ì‹œëŠ”지? í•„ìžëŠ” 다른 것들보다 ì¢€ë” ì‹¬í”Œí•˜ê³ , ê¹”ë”하고, ìž‘ì€ í™”ë©´ 사ì´ì¦ˆì— íŠ¹í™”ëœ ê²Œ 유행할 ê±°ë¼ ë³¸ë‹¤.

ì´ ì»¬ë ‰ì…˜ì€ ì „ì²´ì ìœ¼ë¡œ 관찰과 ê²½í—˜ì— ì˜í•œ 추측, 그리고 지난 몇 달간 í•„ìžê°€ 엮어 본 다른 ë§Žì€ ê¸€ë“¤ì— ê¸°ë°˜í•´ 작성ë˜ì—ˆë‹¤. 그런 ê³ ë¡œ 다른 글들보다 ì¢€ë” ì •í™•í•  것임!

놓친 트렌드가 ìžˆì„ ìˆ˜ 있으니, ì—¬ëŸ¬ë¶„ì˜ ìƒê°ê³¼ 예ìƒì„ 아래 댓글로 달아 주시길.

 

1. 플랫(ìž…ì²´ê°ì„ 뺀) UI는 ê³„ì† ì„±ìž¥ì„¸

 

산세리프 í°íŠ¸ì˜ íŒ¬ì¸ ë‚˜ë¡œì„œëŠ” 현재 장ì‹ì ì¸ 것보다 깔ë”í•œ ê²ƒì´ íŠ¸ë Œë“œëž€ 걸 알릴 수 있어 기ì˜ë‹¤. 윈ë„ìš°8ì€ ì´ ì ì— 있어 매우 ì˜í–¥ë ¥ì´ 컸고, ê·¸ 다ìŒìœ¼ë¡œ ì• í”Œì´ iOS7ì„ ëŸ°ì¹­í•˜ë©°Â ìŠ¤íì–´ëª¨í”¼ì¦˜ì„ ë²„ë ¸ë‹¤. 플랫 ë””ìžì¸ì—는 여전히 ë§Žì€ ìž ìž¬ë ¥ì´ ìžˆë‹¤.

 

Windows 8

Apple iOS7

Skibuddy 

 

2. ëª¨ë°”ì¼ í¼ìŠ¤íŠ¸(모바ì¼ë¶€í„° ìƒê°í•˜ê¸°)

ìš” 몇년간 스마트í°ê³¼ 타블렛 사용ì˜Â ê¸‰ì¦ìœ¼ë¡œÂ ë§Žì€ 웹사ì´íŠ¸ë“¤ì—ì„œ ëª¨ë°”ì¼ íŠ¸ëž˜í”½ì´ ë°ìŠ¤í¬íƒ‘ íŠ¸ëž˜í”½ì„ ì¶”ì›”í•˜ê³ Â ìžˆë‹¤. 2014ë…„ì—ë„ ëŠ˜ì–´ë‚˜ëŠ” 모바ì¼Â ì ìœ ìœ¨ì€Â ë””ìžì´ë„ˆë“¤ì´ ë” ìž‘ì€ í™”ë©´ì—ì„œì˜ ì‚¬ìš©ìž ê²½í—˜(UX)ì„ ìž¬ê³ í•˜ê²Œë” í•  것ì´ë‹¤(물론 ë” ì»¤ì§„ í™”ë©´ë„ ê³ ë ¤í•´ì•¼ í•  것ì´ë‹¤). 모바ì¼ì—ì„œ ì´ìš© 가능한 ì‚¬ìš©ìž ë² ì´ìŠ¤ì— ì ì‘í• Â í•„ìš”ì„±ì€ í•œ íšŒì‚¬ë¥¼Â ì¢€ë” ë¯¼ì²©í•˜ê²Œ, 조ì§ë‚´Â í˜ì‹ ì„ 추ë™ì¼€ë” í•  수 있다.

 

물론 ì‹¤ì œë¡œëŠ”Â ëŒ€ë‹¤ìˆ˜ì˜ íšŒì‚¬ì—서 ’ëª¨ë°”ì¼ í¼ìŠ¤íŠ¸’ê°€ ì ìš©ì´ 잘 안 ë˜ê³  있다. ì ì–´ë„ ì•„ì§ì€ 여전히 ‘ëª¨ë°”ì¼ ì„¸ì»¨ë“œ’ì´ì§€ë§Œ, 반ì‘형과 ì ì‘형웹ì„ 수용한 ê³³ì—서는 투ìžìˆ˜ìµë¥ ì´ í¬ê²Œ 오를 수 있다.

 

3. 여전히 긴 스í¬ë¡¤

2012ë…„ì— ìŠ¤í¬ë¡¤ë§ 웹사ì´íŠ¸ë¥¼ íƒêµ¬í–ˆì„ ì ì—”Â ì•„ì§ ìŠ¤í¬ë¡¤ë§ 웹사ì´íŠ¸ê°€Â ìœ í–‰ì˜ 초기 단계였지만 그 뒤로는 ë§Žì´ ë³´ì¸ë‹¤. 스í¬ë¡¤ë§ì´Â ë§¤ìš° 쉽기 때문ì´ê¸°ë„ 하고, ë””ìžì´ë„ˆë“¤ì´ 모바ì¼ê³¼ 타블렛 ê¸°ê¸°ë“¤ì„ ê³ ë ¤í•˜ê³  ë§ˆìŒ ì†ìœ¼ë¡œ 스í¬ë¡¤(swipe)ì„ ìƒê°í•˜ê¸° 때문ì´ê¸°ë„ 하다.

 

패럴렉스 스í¬ë¡¤(Parallax Scrolling), 가로 스í¬ë¡¤, 컬럼-기반 스í¬ë¡¤, 무한 스í¬ë¡¤ì€ ëª¨ë‘ 2014ë…„ê³¼ 앞으로 ê³„ì† ë” ë³´ê²Œ ë  ê²ƒë“¤ì´ë‹¤. 다만 특히 무한 스í¬ë¡¤ 관련해서 경계할 ì ì´ 몇 가지 있다.

 

4. HTML5 장ì 

HTML5ê°€ 주는 기ì¨ì— 대해 ë‚´ê°€ 떠드는 걸 듣기보다 Codepenì„ ë°©ë¬¸í•´Â ì˜ˆì œë¥¼Â ë”°ë¼í•´ ë³´ë©° ë­ê°€ 가능한지 보길 권한다. 아니면 HTML5ì— CSS3와 jQuery를 잘 ì„žì–´ 만든 창ì˜ë ¥ 있는 ì—ì´ì „ì‹œ 사ì´íŠ¸ë“¤ì„ 보길 바란다.

 

5. HTML5 ë‚˜ìœ ì 

ì´ë¯¸ 나는 웹디ìžì¸ì„ 조악하게 만드는 것, ìžì œë ¥ 없는 ì´ë“¤ì´ ì‚¬ìš©ìž ê²½í—˜ì— ë°˜í•˜ëŠ” 범죄를 저지르는 ê²ƒì— ëŒ€í•´ ìƒì„¸ížˆ 불í‰í•œ ë°” 있다. í•  수 있다는 ê²ƒì´ ê³§ 해야 한다는 ê²ƒì„ ì˜ë¯¸í•˜ì§€ëŠ” 않는다.

 

예를 들어 ë‹¹ì‹ ì˜ í¥ë¯¸ë¡œìš´ 새 웹사ì´íŠ¸ì— 들어가는 ë°ì— 1ë¶„ì´ ê±¸ë¦°ë‹¤ë©´, ‘기다려 주세요’ë¼ëŠ” 로딩 ì•„ì´ì½˜ì´ 아무리 ë²ˆë“œë¥´ë¥´í•´ë„ ê·¸ê±´ ìž˜ëª»ëœ ê²ƒì´ë‹¤. 기다리는 ê²ƒì€ ì–¸ì œë‚˜ 짜ì¦ë‚˜ëŠ” ì¼ì´ë‹¤. 나는 브래드 í”„ë¡œìŠ¤íŠ¸ì˜ “í¼í¬ë¨¼ìŠ¤ëŠ” ë””ìžì¸ì´ë‹¤“ì— ë™ì˜í•œë‹¤.

 

ê¹”ë”í•œ ì‚¬ìš©ìž ê²½í—˜ì„ ì œë¼ê³ Â í”Œëž˜ì‹œ ì‹œì ˆì˜ ë²ˆì§€ë¥´ë¥´í•¨ìœ¼ë¡œ íšŒê·€í•˜ëŠ”Â ê²ƒì€ ì–´ë–¤ ì‹ìœ¼ë¡œë“  ì¼ì–´ë‚˜ì§€ 않기를 바란다.

 

6. 아주 소소한 UX

디테ì¼ì— 주목해 웹사ì´íŠ¸ë¥¼ 다른 것과 구별ë˜ê²Œ 만들 수 있다. 과하지 않게 ê°ê°ì„ 만족시켜주는 메뉴, 트랜지션(transition) 효과, 마우스오버 효과 등 아주 소소한 UX(micro UX) 효과가 웹사ì´íŠ¸ì— 활기를 불어넣어줄 수 있다. 예를 들어 ë°ì¼ë¦¬ ë¹„ìŠ¤íŠ¸ì§€ì˜ ì‚¬ëž‘ìŠ¤ëŸ¬ìš´ 진행 표시기를 ë³´ì‹œë¼.

 

 

7. í…스트를 ë” ì ê²Œ

웹ì— í…스트를 잔뜩 쓰는 ë°©ì‹ì´Â í›¨ì”¬ 줄어드는 듯 하다. ì¼ë¶€ 앱들과 웹사ì´íŠ¸ë“¤ì—서는 ëˆˆì— ë³´ì´ëŠ” í…스트가 ê±°ì˜ ì—†ê³  사용ìžì—게 정보를 전달하기 위해 ì´ë¯¸ì§€ì™€ ì•„ì´ì½˜ì— ì˜ì¡´í•˜ê¸°ë„ 한다.

 

ì¼ë¶€ 사례ì—서는 ì´ ë°©ì‹ì´ 잘 ìž‘ë™í–ˆì§€ë§Œ, ë³´í†µì€ í…스트를 완전히 제거하는 ê²ƒì€ ë³„ë¡œ ë„ì›€ì´ ì•ˆ ë˜ëŠ” 것 같다. 예를 들어 스냅챗(Snapchat) 홈페ì´ì§€ëŠ” 10개가 안 ë˜ëŠ” 단어를 사용하고 ìžˆëŠ”ë° ë°©ë¬¸ê°ë“¤ì´ ì´ê²ŒÂ ë­”지 ì•Œ 수 있으려면 비디오를 ë³´ë„ë¡ ìš”êµ¬í•˜ê³  있다.

 

ì˜ë£Œ 대쉬보드 컨셉

ELI – ì´ëŸ° ì‹ì˜ 배치는 í¬íŠ¸í´ë¦¬ì˜¤ 사ì´íŠ¸ì²˜ëŸ¼ ë³´ì´ê²Œ 한다.

Snapchat

 

8. 최소한ì˜(미니멀한) 네비게ì´ì…˜(메뉴바)

기본만 남긴 네비게ì´ì…˜ì˜ ìœ í–‰ì€ ê³„ì† í¼ì§€ëŠ” 듯 하다. 부분ì ìœ¼ë¡œëŠ” 모바ì¼ìš©ìœ¼ë¡œ 압축ì ì¸ 네비게ì´ì…˜ ë””ìžì¸Â ìˆ˜ìš”ì— ì˜í–¥ 받아, ì•„ì´ì½˜, 롤다운(rolldown), 페ì´ì§€ 스í¬ë¡¤ì„ 내리면 줄어드는 네비게ì´ì…˜ì— í¬ì»¤ìŠ¤ë¥¼ ë‘” 사ì´íŠ¸ë¥¼ ë§Žì´ ë³¼Â ìˆ˜ 있다.

 

미디엄Medium

스마트 홈 

 

9. CSSê°€ ì´ë¯¸ì§€ 대체

CSS를 쓸 수 ìžˆëŠ”ë° ì™œ ì´ë¯¸ì§€ë¥¼ 쓰는가? 매력ì ì¸ CSS ì²´í¬ë°•ìŠ¤ 세트를 ì›ì¹˜ ì•Šì„ ìžê°€ 누구란 ë§ì´ë‡¨?

 

10. 비디오 / 움ì§ì´ëŠ” ë°°ê²½

ì´ê±´Â ë‹¨ì—°ì½” 훨씬 ë” ë§Žì•„ì§ˆÂ ê±°ë¼ ìƒê°í•œë‹¤. ê°€ë””ì–¸ì§€ì˜ Firestormì´ ê·¸ ì¢‹ì€ ì˜ˆë¡œ, 2014ë…„ì—는 (컨í…츠 사ì´íŠ¸ë³´ë‹¤)Â ë¸Œëžœë“œë“¤ì´ ë” ë§Žì´ ë‹¤ì´ë‚˜ë¯¹í•œ ë°°ê²½ì„ í™œìš©í•  ê±°ë¼ ë³¸ë‹¤.

 

The House of Eyewear

 

11. í’부한 컨í…츠 경험

Firestormì—ì„œ ê³„ì† ë˜ëŠ” 것ì´ë‹¤. ì¼ë¶€ 언론 출íŒê³„는 í…스트, ì´ë¯¸ì§€, 비디오, ì¸í„°ëž™í‹°ë¸Œí•œ 기능들, ì ì ˆí•œ 길ì´ì˜ 스í¬ë¡¤ ë“±ì„ ì„žì€Â ì˜¨ë¼ì¸ 컨í…츠 경험 관련 쪽으로 ì´ë™í•´ 가고 있다.

 

ESPN’s Grantland

 

12. í•œ 페ì´ì§€ë¥¼Â ìµœëŒ€í•œÂ ì‚¬ìš©

ì ì  ë§Žì€ ì‚¬ì´íŠ¸ë“¤ì´ 새로운 페ì´ì§€ë¥¼ 로딩하는 ê²ƒì„ í”¼í•˜ëŠ” 대신 현재 페ì´ì§€ì— ë‚´ìš©ì„ ì¶”ê°€ì ìœ¼ë¡œ 보여주는 걸 선호하고 있다. ë¼ì´íŠ¸ë°•ìŠ¤, 오버레ì´, 확대/위치가 바뀌는 타ì¼ì€ ëª¨ë‘ í‰ê· ì ì¸ 사용ìžì˜ íƒìƒ‰ì—ì„œ í´ë¦­ 수를 줄여줄 수 있다.

 

Stories by H&M 

 

13. 다양해진 타ì´í¬ê·¸ë¼í”¼

웹í°íŠ¸ê°€ ë¶€ìƒ ì¤‘ì´ê³ , ë””ìžì´ë„ˆë“¤ì€ ì „ì— ì—†ì´ í° í°íŠ¸ë¥¼ 좋아하며 여러 í°íŠ¸ë¥¼ ì„žì–´ 매치하는 게 유행하고 있다. ë§ë¶™ì—¬Â ë°˜ì‘형 타ì´í¬ê·¸ë¼í”¼ëŠ” ë°˜ì‘형 웹디ìžì¸ì—ì„œ í° ë¶€ë¶„ì„ ì°¨ì§€í•´ì•¼ 한다.

 

14. 단색 ë””ìžì¸

2ê°œ 색ìƒê³¼ ê·¸ 색조로 충분할 ê²ƒì— ì™œ 3 가지 ìƒ‰ì„ ì“°ëŠ”ê°€? 최근 매력ì ì¸ ë‹¨ìƒ‰ì¡°ì˜ íŒ”ë ˆíŠ¸ë“¤ì„ ì¢€Â ë³´ì•˜ë‹¤.

 

Qatar Airways 

 

15. 다양한 색들

다시, ë¬´ì§€ê°œìƒ‰ì„ ë‹¤ 쓸 수 ìžˆëŠ”ë° ì™œ 2가지 ìƒ‰ì„ ì“°ëŠ”ê°€? 여러 ìƒ‰ì„ ì“´ë‹¤ê³  í•´ì„œ ê¼­ 현란하거나 ì§‘ì¤‘ì„ ë°©í•´í•˜ëŠ” ê±´ 아니다. 다색 ë””ìžì¸ì€ 특히 플랫 ë””ìžì¸ê³¼ 잘 어울리는 듯 하다.

 

컬러풀한 웹사ì´íŠ¸ì™€ ì•±ì„ í•œ 번 보시길.

 

Coloured Lines

 

16. ì¹´ë“œ/타ì¼

ë‚˜ì¤‘ì— ìƒìˆ í•  ìƒê°ì´ì§€ë§Œ ì¼ë‹¨ 왜 카드가 ‘ì›¹ì˜ ë¯¸ëž˜’ì¸ì§€ì— 대한 ê°œê´€ì„ ë³´ì‹œê¸¸. 나는 카드가 과거ì´ë©° 현재ì´ê¸°ë„ 하다고 ìƒê°í•˜ê²Œ ë다.

 

Etch

Pravda

Silktricky

 

17. ë” í¬ê³  ë” ì¢‹ì€ ì´ë¯¸ì§€í™”

í…ìŠ¤ì³ íŒ¨í„´ì— ë°˜ëŒ€ë˜ëŠ” 커다란 사진과 ë°°ê²½ ì´ë¯¸ì§€ê°€Â ì ì  ì¼ë°˜í™”ë˜ëŠ” 듯 í•œë°, 확실히 레티나 디스플레ì´ì—ì„œ 좋아 ë³´ì¸ë‹¤. Awwwardsì˜ ìµœì‹  ‘ì˜¤ëŠ˜ì˜ ì‚¬ì´íŠ¸’ 갤러리를 ë³´ë©´ 무슨 뜻ì¸ì§€ ì•Œ 것ì´ë‹¤.

 

언론 ì¶œíŒ ìª½ë„ ì „ë¡€ ì—†ì´ í° ì´ë¯¸ì§€ë“¤ì„ ì“°ê³  있다

 

Protest

 

18. 위치가 ê³ ì •ëœ ë‚´ìš©/네비게ì´ì…˜

스í¬ë¡¤ì„ ë‚´ë ¸ì„ ë•Œ 네비게ì´ì…˜(ì´ë‚˜ 다른 컨í…츠 박스)ì´ íŽ˜ì´ì§€ì— ê³ ì •ë˜ì–´ 있는 경우를 ë§í•œë‹¤. 네비게ì´ì…˜ì˜ 높ì´ê°€ 짧아질 ë•Œë„ ìžˆê³ Â í™•ëŒ€ë  ìˆ˜ 있는 ìž‘ì€ ì•„ì´ì½˜ì´ ë Â ë•Œë„ 있다. 새로 ë””ìžì¸ë˜ëŠ” 웹사ì´íŠ¸ë“¤ì—ì„œ í”히 ë³´ì´ë°, 예를 들어 Awwwards를 ê³„ì† ë³´ìž.

 

 

출처 : http://blog.jinbo.net/taiji0920/2778

2013ë…„ 7ì›” 1ì¼
by gdkim
0 comments

ì •ë³´ ìŠ¤íŠ¸ë¦¼ìœ¼ë¡œì„œì˜ ì„¸ì»¨ë“œ 스í¬ë¦°

by gemong on 2013/06/27

Main-Second Screen[요약] 세컨드 스í¬ë¦° 서비스는 현재 양방향성 ê¸°ëŠ¥ì— ì´ˆì ì„ 맞추고 있지만, 프로그램 ì—°ë™ ì •ë³´ì™€ ê´‘ê³  ë“±ì„ ìžë™ 노출하는 ‘정보 ìŠ¤íŠ¸ë¦¼â€™ì˜ ìŠ¤í¬ë¦°ìœ¼ë¡œì„œ ë” ê°€ëŠ¥ì„±ì´ ìžˆë‹¤ê³  ë´„. âœ

 

최근 TVì˜ ë¶€ê°€ 서비스 스í¬ë¦°ìœ¼ë¡œì„œ ì•„ì´íŒ¨ë“œ 등 ëª¨ë°”ì¼ ë‹¨ë§ê¸°ë¥¼ 세컨드 스í¬ë¦°ìœ¼ë¡œ 활용하는 서비스가 ë§Žì´ ë“±ìž¥í•˜ê³  있습니다. 지박스(Zeebox), 샤잠(Shazam), 넥스트가ì´ë“œ(NextGuide), 코넥티비(ConnecTV), 와치위드(Watchwith) 등 여러 서비스가 활발한 ì‚¬ì—…ì„ ì „ê°œí•˜ê³  있고, 심지어 ’세컨드 스í¬ë¦° 소사ì´ì–´í‹°(2nd Screen Society)‘ë¼ëŠ” 단체까지 만들어져 있습니다.

보통 ì´ëŸ° ì„œë¹„ìŠ¤ë“¤ì€ í•œêµ­ì—ì„œ 제대로 사용해 ë³¼ 기회가 ê±°ì˜ ì—†ê¸° ë•Œë¬¸ì— ë‰´ìŠ¤ 기사를 통한 ê°„ì ‘ ê²½í—˜ì— ì˜ì¡´í•˜ì—¬ 대략ì ì¸ ê²½í–¥ì„ ì‚´íŽ´ë³´ë©´ ì´ë ‡ìŠµë‹ˆë‹¤. 오디오 ì¸ì‹ 등으로 현재 방송 프로그램(ë˜ëŠ” ê´‘ê³ ) 위치를 ìžë™ìœ¼ë¡œ 정확하게 파악하여 프로그램과 ì—°ë™ëœ 관련 정보를 서비스하고, ë°˜ì‘, 소셜 등 참여를 ì ê·¹ 유ë„하는 ì–‘ë°©í–¥ 서비스를 강조하고 있습니다. 특히 마케터들ì—ê² TVì— íš¨ê³¼ì ìœ¼ë¡œ ì–‘ë°©í–¥ 광고를 진행할 수 있는 솔루션으로 í° ê¸°ëŒ€ë¥¼ 하고 있습니다.

 

세컨드 스í¬ë¦°ì˜ 가장 í° ë¬¸ì œì ì€ 비디오 ìŠ¤íŠ¸ë¦¼ì˜ ë‹¨ì ˆ

세컨드 스í¬ë¦°ì˜ ìž ìž¬ë ¥ì€ ë©”ì¸ ìŠ¤í¬ë¦°ì˜ 비디오 ì˜ì—­ì„ 방해하지 ì•Šê³  부가ì ì¸ 디스플레ì´ê°€ 가능하ë„ë¡ ìŠ¤í¬ë¦°ì´ 분리ë˜ì—ˆë‹¤ëŠ” ì ê³¼ TVì˜ ê°€ìž¥ í° ì• ë¡œì‚¬í•­ì¸ ì–‘ë°©í–¥ ì¸í„°íŽ˜ì´ìŠ¤ì˜ 문제를 비êµì  쉽게 í•´ê²°í•  수 있다는 ë° ìžˆìŠµë‹ˆë‹¤. 하지만 ê·¸ ë‘ ê°€ì§€ 문제가 ì •ë§ í•´ê²°ëœ ê²ƒì¼ê¹Œìš”. 첫 번째 문제ì—ì„œ ë©”ì¸ ìŠ¤í¬ë¦° 시청 방해는 세컨드 스í¬ë¦°ì—ì„œë„ ë§ˆì°¬ê°€ì§€ë¡œ ì¼ì–´ë‚  수 있습니다. ì´ë²ˆì—” í™”ë©´ì„ ë°©í•´í•˜ëŠ” ê²ƒì´ ì•„ë‹ˆë¼, ì‹œì„ ì„ ë°©í•´í•©ë‹ˆë‹¤. 아래 ê·¸ë¦¼ì„ ë³´ì‹œì£ .

Second Screen

세컨드 스í¬ë¦°ì„ 보기 위해서는 TVì—ì„œ ì‹œì„ ì„ ë–¼ì•¼ 합니다. TVì—ì„œ ì‹œì„ ì„ ê³ ì •í•˜ê¸° 위해 ì—„ì²­ë‚œ ë…¸ë ¥ì„ í•˜ëŠ” í˜„ìž¬ì˜ ë°©ì†¡ í¬ë§·ì€ 세컨드 스í¬ë¦°ê³¼ ê¶í•©ì´ 그리 잘 맞지 않는다고 ìƒê°í•©ë‹ˆë‹¤. 특히 ìƒëŒ€ì ìœ¼ë¡œ ëª°ìž…í˜•ì¸ ë“œë¼ë§ˆ ê°™ì€ ê²½ìš°ë¼ë©´, 세컨드 스í¬ë¦°ìœ¼ë¡œì˜ 시선 단절, 즉 비디오 ìŠ¤íŠ¸ë¦¼ì˜ ë‹¨ì ˆì€ ìš©ë‚©ë˜ì§€ ì•Šì„ ê²ƒìž…ë‹ˆë‹¤. ì´ê²ƒì€ 고스란히 ë‘ ë²ˆì§¸ ë¬¸ì œì— ì˜í–¥ì„ ì¤ë‹ˆë‹¤. 세컨드 스í¬ë¦°ì˜ ì–‘ë°©í–¥ ì¸í„°íŽ˜ì´ìŠ¤ê°€ 아무리 잘 갖춰진들, 주목ë˜ì§€ 않으면 무슨 ì†Œìš©ì´ ìžˆê² ìŠµë‹ˆê¹Œ.

물론 ìž ê¹ ì–¸ê¸‰í–ˆë“¯ì´, í˜„ìž¬ì˜ ë°©ì†¡ í¬ë§·ì´ 세컨드 스í¬ë¦°ì„ 전혀 고려하지 않기 ë•Œë¬¸ì— ê·¸ë ‡ìŠµë‹ˆë‹¤. ì´ê±¸ 바꿔 ë§í•˜ë©´, 미래 방송 í¬ë§·ì´ 세컨드 스í¬ë¦°ì„ 고려하여 ì œìž‘ë  ìˆ˜ 있다면, 시선 ë¶„ë°°ì˜ íƒ€ì´ë°ê³¼ ì–‘ë°©í–¥ì˜ ì»¨í…트 ì œê³µì´ ìœ ê¸°ì ìœ¼ë¡œ ì´ë£¨ì–´ì§ˆ ìˆ˜ë„ ìžˆì„ ê²ƒìž…ë‹ˆë‹¤. 컴ìºìŠ¤íŠ¸ì™€ ì§€ë°•ìŠ¤ì˜ ì˜ˆÂ ê°™ì€ ë°©ì†¡ì‚¬ì™€ 세컨드 스í¬ë¦°ì˜ 제휴가 앞으로 ë”ìš± 심화하여, 프로그램 제작 단계ì—까지 긴밀한 협조를 하게 ëœë‹¤ë©´ 가능한 ì–˜ê¹ë‹ˆë‹¤.

 

ì •ë³´ ìŠ¤íŠ¸ë¦¼ìœ¼ë¡œì„œì˜ ê°€ëŠ¥ì„±

그렇게 프로그램과 완벽히 ì—°ë™ë˜ëŠ” 세컨드 스í¬ë¦°ì„ 가정해 봅시다. 그럼 비디오 ìŠ¤íŠ¸ë¦¼ì˜ ë‹¨ì ˆê³¼ ì–‘ë°©í–¥ì„±ì˜ ê·¹ëŒ€í™”ê°€ ìžì—°ìŠ¤ëŸ½ê²Œ ì¼ì–´ë‚ ê¹Œìš”. ì¼ë¶€ ìž¥ë¥´ì˜ í”„ë¡œê·¸ëž¨ì—서는 ì´ê²Œ 효과ì ìœ¼ë¡œ ìž‘ìš©í•  ìˆ˜ë„ ìžˆìŠµë‹ˆë‹¤. 예를 들어 시청ìžì˜ 실시간 참여로 ì´ë¤„지는 퀴즈 í”„ë¡œê·¸ëž¨ì„ ìƒìƒí•´ë³´ë©´, 사회ìžê°€ “ìž, 지금 ë‹µì„ ëˆŒëŸ¬ì£¼ì„¸ìš”!â€ë¼ëŠ” êµ¬ë ¹ì— ë§žì¶° 시청ìžë“¤ì´ 세컨드 스í¬ë¦°ì„ ì¼ì œížˆ 터치하는 ê²Œìž„ì— ì°¸ì—¬í•  수 ìžˆì„ ê²ƒìž…ë‹ˆë‹¤. 하지만 ëŒ€ë‹¤ìˆ˜ì˜ ë°©ì†¡ì€ ì—¬ì „ížˆ ì¼ë°©ì ì¸ 비디오 ìŠ¤íŠ¸ë¦¼ì˜ í¬ë§·ì„ 벗어나지 ì•Šì„ ê²ƒìž…ë‹ˆë‹¤. 시청ìžê°€ TVì— ê¸°ëŒ€í•˜ëŠ” 바가 그렇기 때문입니다. ì‚¬ëžŒë“¤ì˜ ì‹œì²­ 행태가 ì–´ëŠ ë‚  ê°‘ìžê¸° 린-ë°±(lean-back)ì—ì„œ 린-í¬ì›Œë“œ(lean-forward)ê°€ ë  ê²ƒì´ë¼ëŠ” 순진무구한 ì „ë§ì— 대한 신빙성 있는 근거는 ì–´ë””ì—ë„ ì—†ìŠµë‹ˆë‹¤.

TVì—ì„œì˜ ì†Œë¹„ëŠ” ì–‘ë°©í–¥ì´ ì•„ë‹ˆë¼ ì»¨í…트 ìŠ¤íŠ¸ë¦¼ì˜ ìˆ˜ë™ì  시청ì´ë¼ëŠ” ë” ìžì—°ìŠ¤ëŸ¬ìš´ ë³¸ëŠ¥ì  ì†Œë¹„ì— ì´ˆì ì„ 맞춰야 합니다. 그런 ì˜ë¯¸ì—ì„œ, 세컨드 스í¬ë¦°ì˜ ì„œë¹„ìŠ¤ë„ â€˜ì •ë³´ 스트림’ì´ë¼ëŠ” 컨셉으로 접근해 보는 ê²ƒì€ ì–´ë–¨ê¹Œ ìƒê°í•´ 봅니다. 세컨드 스í¬ë¦°ì€ TVì˜ ë³´ì¡° 스í¬ë¦° ê°œë…으로, TV ì•ž íƒìž ì •ë„ì— ì„¸ì›Œì ¸ TV 스í¬ë¦°ì— ë°©í•´ë˜ì§€ 않게 ì ì ˆížˆ ì‹œì„ ì„ ë¶„ë°°í•˜ëŠ” ìœ„ì¹˜ì— ìžˆê³ , ê±°ê¸°ì— ì‚¬ìš©ìžê°€ êµ³ì´ (양방향으로) 무슨 ëª…ë ¹ì„ ë‚´ë¦¬ì§€ ì•Šì•„ë„ í”„ë¡œê·¸ëž¨ê³¼ 완벽히 ì—°ë™ëœ 관련 ì •ë³´ê°€ 방송 ìœ„ì¹˜ì— ì‹±í¬ë˜ì–´ ìžë™ìœ¼ë¡œ í르는 것입니다.

Aux Screen

ì´ ì •ë³´ ìŠ¤íŠ¸ë¦¼ì€ í”„ë¡œê·¸ëž¨ê³¼ ê´€ë ¨ëœ ì •ë³´ë¥¼ 간략한 형태로, 예를 들면 키워드나 헤드ë¼ì¸ 수준ì˜-í° í°íŠ¸ë¡œ í‘œí˜„ëœ ì •ë³´ë¥¼ ê°€ë…성 있게 ë³´ì—¬ì¤ë‹ˆë‹¤. 특정 ë°°ìš°ê°€ 나오는 장면ì—ì„  최근 ê·¸ ë°°ìš°ì˜ ë‰´ìŠ¤ 헤드ë¼ì¸ì´, 특정 ìƒí’ˆì´ 나오는 장면ì—ì„  해당 ìƒí’ˆì˜ 브랜드와 가격ì´, ê´‘ê³  시간ì—는 í¬ë¡œìŠ¤ 스í¬ë¦°-TV 스í¬ë¦°ê³¼ 세컨드 스í¬ë¦° ì–‘ìª½ì„ ìœ ê¸°ì ìœ¼ë¡œ 활용한- ê´‘ê³  캠페ì¸ì„ 진행합니다. 물론 열애설 헤드ë¼ì¸ì— ê¹œì§ ë†€ë¼ íƒœë¸”ë¦¿ì„ í„°ì¹˜í•´ ìžì„¸í•œ 뉴스를 ë³¼ ìˆ˜ë„ ìžˆê² ì£ . ì–‘ë°©í–¥ì„±ì´ ë°°ì œëœ ê²ƒì´ ì•„ë‹ˆë¼ ì–µì§€ë¡œ 드러내지 ì•Šì„ ë¿ìž…니다. ë˜í•œ, 새로운 ê´‘ê³  ì¸ë²¤í† ë¦¬ê°€ 창출ë˜ëŠ” íš¨ê³¼ë„ ìžˆìŠµë‹ˆë‹¤. ì •ë³´ ìŠ¤íŠ¸ë¦¼ì˜ ë¹ˆ ìŠ¬ë¡¯ì— ê´‘ê³ ê°€ 채워질 수 있다는 ì–˜ê¹ë‹ˆë‹¤.

조금 ë” ì§„ë„를 나가 봅시다. ‘정보 ìŠ¤íŠ¸ë¦¼â€™ì„ ìœ„í•œ TVì˜ ë³´ì¡° 스í¬ë¦°ìœ¼ë¡œì„œ 세컨드 스í¬ë¦°ì„ 사용하는 대신ì—, TV ìžì²´ì˜ í¼íŒ©í„°ê°€ ë³´ì¡° 스í¬ë¦°ì„ 수용하는 방향으로 발전하면 어떨까 ìƒìƒí•´ 봅니다. ì´ëŸ° ì‹ìœ¼ë¡œìš”.

Dual Screen

TV 스í¬ë¦°ì˜ ì˜†ì— ë³´ì¡° 스í¬ë¦°ì„ 장착하는 ê²ë‹ˆë‹¤. ì‹œì„ ì˜ ë‹¨ì ˆê°ì´ 훨씬 ì ê³ , í™”ë©´ë„ í¬ê¸° ë•Œë¬¸ì— ë” ë§Žì€ ì •ë³´ë¥¼ 표현할 수 있는 장ì ì´ 있습니다. TV 옆으로 확장하는 것ì´ë¼ 잘 안 ë³´ì¼ ìˆ˜ë„ ìžˆìœ¼ë‹ˆ ê°ë„를 êº¾ì„ ìˆ˜ 있게 만들면 ë” ì¢‹ê² ì£ ?

ì—¬ëŸ¬ë¶„ì˜ ìƒê°ì€ 어떠신가요?

출처:http://digxtal.com/idea/20130627/second-screen-info-stream/

2013ë…„ 5ì›” 23ì¼
by wkk711
0 comments

Responsive Web Designì„ ìœ„í•œ Test-Tool

Screenqueri.es

 

브ë¼ìš°ì €ì—ì„œ ê° ìž¥ì¹˜ì˜ ì‹œë®¬ë ˆì´ì…˜ì„ í•  수 있다.

 

 

Responsive Web Design Test Tool

브ë¼ìš°ì €ì—ì„œ ê° ìž¥ì¹˜ì˜ ì‹œë®¬ë ˆì´ì…˜ì„ í•  수 있다.

 

 

Responsivepx

브ë¼ìš°ì €ì—ì„œ í¬ê¸°ë¥¼ 변경하여 표시를 확ì¸í•  수 있다.

 

 

Ish

 

브ë¼ìš°ì €ì—ì„œ ê° í¬ê¸°ì˜ 표시를 확ì¸í•  수 있다.

 

 

Responsive Tools For Web Designer & Developers

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다. ì¡°ìž‘ë„ ê°€ëŠ¥.

 

 

Responsive Roulette

 

 

브ë¼ìš°ì €ì—ì„œ ê° í¬ê¸°ì˜ 표시를 확ì¸í•  수 있다.

 

 

The Responsinator

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다.

 

 

Juice’r

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다. ì¡°ìž‘ë„ ê°€ëŠ¥.

 

 

Screenfly

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다. ì¡°ìž‘ë„ ê°€ëŠ¥.

 

 

Responsive Design Testing

 

 

ê° í¬ê¸°ë¥¼ 표시 목ë¡ì—ì„œ 확ì¸í•  수 있다.

 

 

Deviceponsive

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다.

 

 

ResponsiveTest

 

 

ê° ìž¥ì¹˜ì˜ í‘œì‹œë¥¼ 확ì¸í•  수 있다.

 

 

resizeMyBrowser

 

 

ì„ íƒí•œ í¬ê¸°ì˜ 별ë„ì˜ ì°½ 열기 가능하다.

 

 

2013ë…„ 5ì›” 15ì¼
by ssuy
0 comments

icons times

http://iconstimes.com/

 

여러 글 대신 ì•„ì´ì½˜ìœ¼ë¡œ 기사를 대신해 보다 쉽고 빠르게 뉴스를 ë³¼ 수 있는 icons times입니다.

허핑턴 í¬ìŠ¤íŠ¸(Huffington Post), 뉴욕타임즈(New York Times), 월스트리트저ë„(Wall Street Journal) 등 훌륭한 ë§¤ì²´ì˜ ê¸°ì‚¬ë“¤ì„ ìˆ˜ì§‘í•˜ì—¬ ê·¸ì— ë§žëŠ” 그래픽으로 ë””ìžì¸ 합니다.

 

ì´ê³³ì€ ì´ 6ê°€ì§€ì˜ ì¹´í…Œê³ ë¦¬(ì „ì²´, 비즈니스, 엔터테ì¸ë¨¼íŠ¸, 스í¬ì¸ , í…Œí¬ë†€ë¡œì§€ 그리고 세계뉴스)ë¡œ 뉴스가 분류ë˜ì–´ìžˆìŠµë‹ˆë‹¤. ê° ì•„ì´ì½˜ 하단ì—는 ì§§ì€ ì„¤ëª… ê¸€ì´ ì í˜€ìžˆìŠµë‹ˆë‹¤.

ì•„ì´ì½˜ë“¤ë„ ì§ê´€ì ì´ê³  재미있습니다 ^^

í„°ì¹˜ê¸°ë°˜ì— ì¹´ë“œì„¼ì„œë¥¼ 활용한 예

2013ë…„ 4ì›” 24ì¼ by 강명수 | 0 comments

SCION GhostGlass 2013

R&D성 터치스í¬ë¦°ì„ ì´ìš©í•œ ì¹´ë“œ 센서를 ì´ìš©í•œ 거네요

SCION: GhostGlass 2013 from JUXT on Vimeo.

Samsung Smart Grid 2012 – Making Films

2013ë…„ 4ì›” 17ì¼ by alexis | 0 comments

IL 44 – SPECIAL ANNIVERSARY ISSUE

2013ë…„ 4ì›” 1ì¼ by alexis | 0 comments

LO STATO DELL’ITALIA
Come siamo, come potremmo essere e soprattutto come vorremmo essere. Inchiesta ottimista sul futuro del nostro Paese.
+
L’INGORGO Sonetto rap per la crescita scritto da JOVANOTTI in esclusiva per IL

illustrations by Giacomo Gambineri
photo by Massimo Siragusa

 

 

2013ë…„ 3ì›” 25ì¼
by aduris
1 Comment

Free Mobile UI Kits and Website Wireframes Templates

Free Mobile UI Kits and Website Wireframes Templates

User interface kits are much more commonplace today than in previous years. Designers love to use pixel-perfect graphics when creating layout mockups or wireframes. This is especially true when it comes to mobile apps and mobile website layouts.

I have gone through Dribbble shots looking to collect all of the best freebie UI kits and wireframes. These include buttons, switches, forms, and a slew of other handy graphics. All of the freebies are offered in PSD or AI format and you can generally find the download links in the first comment. Be sure to check out a few examples and see if you can apply these GUI kits into your next project.

iOS/Browser Frames

iPhone iPad wireframes kit freebie

iPhone4 PSD

black white iPhone4 PSD model

iPhone UI PSD

iPhone custom blue texture tabbar interface kit

Wireframe/Blueprint Kit

wireframing blueprint kit design freebie download

Printable iPhone5 Templates

print iPhone 5 wireframe template sketches

Clean Wireframe Kit

clean white minimalist user interface kit elements

Free Calendar PSD

mobile calendar user interface kit freebie

Toggle Switch UI

freebie PSD switches download mobile iPhone interface

Slimer PSD UI Kit

green slimer user interface kit freebie

UI Design Mini Nav

mini icons navigation PSD freebie download

Icons Template

freebie iPhone icons homepage screen template wireframe

iPhone Sketches AI

iPhone app prototyping wireframes kit

Soft User Interface Kit

soft ui kit freebie download retina display

Dark Slider UI PSD

freebie PSD download slider knobs dribbble shot

iPhone Golden Ratio Grid System

free psd download iPhone grid system rule of thirds

Minimal Light User Interface

white minimalist ui kit design freebie

iOS Toggle PSD

freebie psd ios iphone icon switches

Free iPhone UI PSD

iphone cash register screen numbers input ios

Stopwatch

freebie iPhone psd user interface

iPhone4 Vector Illustration

freebie Illustrator vector artwork design

Light GUI Switches

graphical user interface mobile ios interface

Slider UI PSD

mobile iPhone slider user interface psd

Galaxy S III PSD

freebie Android devices Samsung Galaxy psd template

Android 4.0 UI

Android smartphone 4 user interface graphics

App Icon Freebie

free download psd app icon template outdoors

ICS Power Control

Android mobile user interface psd freebie

Login Freebie

iPhone iOS mobile user interface login screen

Mobile Downloads

user interface kit downloads freebie psd

iOS Retina Slider

iPhone iOS retina display graphics slider bar

Blue UI Kit

freebie psd user interface kit design

Bright Grey UI Kit

freebie downlaod user interface psd

Black UI Kit

black user interface kit design freebie psd

Magico UI Kit PSD

purple user interface kits design

Clean UI Kit

user interface clean elements kits

Lavender UI Kit

purple lavender user interface kit design freebie

Clean UI Kit Freebie

orange bright dark user interface kit elements

Smooth User Interface

mobile design user interface setup freebie psd

iOS SMS GUI Template

iPhone iPad texting iMessage sms template graphics

Mobile App Dashboard

mobile design user interface freebie psd

Path for iPad GUI PSD

iOS App Store Interface Path social network

Final Thoughts

As more designers are releasing freebies on the web it will be difficult to keep up. But don’t let yourself fall behind just because of data overload! This collection of UI kits is the perfect first step towards creating your next mobile app or responsive website layout. Be sure to keep searching around the web for new releases to find the best user interface kits for your needs.

2013ë…„ 3ì›” 25ì¼
by alexis
0 comments

Create data-driven site visuals

Data-Driven Documents

2013ë…„ 3ì›” 22ì¼
by alexis
1 Comment

CSS3 í¬í† ìƒµ 플러그ì¸

í¬í† ìƒµÂ  셰잎과 블랜딩 ì˜µì…˜ê°’ì„ CSS3 코드로 변환해 주는 í¬í† ìƒµ í”ŒëŸ¬ê·¸ì¸ ìž…ë‹ˆë‹¤.

í¬í† ìƒµì—ì„œ ë²„íŠ¼ì„ ë‹¤ 만들고 새로 ìƒì„±ëœ CSSPsë²„íŠ¼ì„ ëˆ„ë¥´ë©´

웹과 ì—°ë™ë˜ì–´ ì´ë¯¸ì§€ì™€ 코드가 뜹니다.

 

현재 ì ìš©í• ìˆ˜ 있는 효과는 stroke, gradient, Inner shadow, Inner glow, Outer glow, Drop shadow 입니다.

ìƒ‰ìƒ ë¸”ëžœë“œ 모드는 ì ìš©ì´ 안ë˜ë„¤ìš”. ë…¸ë§ë¡œ ì§€ì •ì„ í•´ì•¼ 합니다.

Proudly powered by WordPress | Theme: Yoko by Elmastudio

Top