최근 글 목록
-
- 지치지 않고 오랫동안 인간다움을 지키...
- 뎡야핑
- 01/24
-
- 10월 7일의 진실
- 뎡야핑
- 2023
-
- 슬램덩크 단행본 비교 : 오리지널판, ...
- 뎡야핑
- 2023
-
- AI 기계번역을 통한 비용 절감? 남의 ...
- 뎡야핑
- 2023
-
- 유튜브 4년 차, 구독자 3800명 유튜버...
- 뎡야핑
- 2023
저자의 허락을 얻어 2014년 1월 13일 Econsultancy에 실린 18 pivotal web design trends for 2014을 번역한 글. 컴퓨터 앞에 앉아 있을 시간을 보장받은 활동가로서 웹기술 동향을 우리끼리 팔로업하지 말고 많은 사람들과 나눌 수 있게 노력해 보자...고 생각해 왔는데 막상 한글로 하자니...() 번역 지적 달콤하게 받음
앞으로 공유하고자 하는 것에서 웹디자인은 극히 일부이고, 이 글에서도 디자인과 더불어 어떤 식으로 컨텐츠를 생산할 것인가 힌트도 볼 수 있다. 링크도 보시길(영어지만)
2014년엔 어떤 웹디자인 트렌드를 보게 될 거라 생각하시는지? 필자는 다른 것들보다 좀더 심플하고, 깔끔하고, 작은 화면 사이즈에 특화된 게 유행할 거라 본다.
이 컬렉션은 전체적으로 관찰과 경험에 의한 추측, 그리고 지난 몇 달간 필자가 엮어 본 다른 많은 글들에 기반해 작성되었다. 그런 고로 다른 글들보다 좀더 정확할 것임!
놓친 트렌드가 있을 수 있으니, 여러분의 생각과 예상을 아래 댓글로 달아 주시길.
산세리프 폰트의 팬인 나로서는 현재 장식적인 것보다 깔끔한 것이 트렌드란 걸 알릴 수 있어 기쁘다. 윈도우8은 이 점에 있어 매우 영향력이 컸고, 그 다음으로 애플이 iOS7을 런칭하며 스큐어모피즘을 버렸다. 플랫 디자인에는 여전히 많은 잠재력이 있다.
Windows 8
Apple iOS7
Skibuddy
요 몇년간 스마트폰과 타블렛 사용의 급증으로 많은 웹사이트들에서 모바일 트래픽이 데스크탑 트래픽을 추월하고 있다. 2014년에도 늘어나는 모바일 점유율은 디자이너들이 더 작은 화면에서의 사용자 경험(UX)을 재고하게끔 할 것이다(물론 더 커진 화면도 고려해야 할 것이다). 모바일에서 이용 가능한 사용자 베이스에 적응할 필요성은 한 회사를 좀더 민첩하게, 조직내 혁신을 추동케끔 할 수 있다.
물론 실제로는 대다수의 회사에서 '모바일 퍼스트'가 적용이 잘 안 되고 있다. 적어도 아직은 여전히 '모바일 세컨드'이지만, 반응형과 적응형웹을 수용한 곳에서는 투자수익률이 크게 오를 수 있다.
2012년에 스크롤링 웹사이트를 탐구했을 적엔 아직 스크롤링 웹사이트가 유행의 초기 단계였지만 그 뒤로는 많이 보인다. 스크롤링이 매우 쉽기 때문이기도 하고, 디자이너들이 모바일과 타블렛 기기들을 고려하고 마음 속으로 스크롤(swipe)을 생각하기 때문이기도 하다.
패럴렉스 스크롤(Parallax Scrolling), 가로 스크롤, 컬럼-기반 스크롤, 무한 스크롤은 모두 2014년과 앞으로 계속 더 보게 될 것들이다. 다만 특히 무한 스크롤 관련해서 경계할 점이 몇 가지 있다.
HTML5가 주는 기쁨에 대해 내가 떠드는 걸 듣기보다 Codepen을 방문해 예제를 따라해 보며 뭐가 가능한지 보길 권한다. 아니면 HTML5에 CSS3와 jQuery를 잘 섞어 만든 창의력 있는 에이전시 사이트들을 보길 바란다.
이미 나는 웹디자인을 조악하게 만드는 것, 자제력 없는 이들이 사용자 경험에 반하는 범죄를 저지르는 것에 대해 상세히 불평한 바 있다. 할 수 있다는 것이 곧 해야 한다는 것을 의미하지는 않는다.
예를 들어 당신의 흥미로운 새 웹사이트에 들어가는 데에 1분이 걸린다면, '기다려 주세요'라는 로딩 아이콘이 아무리 번드르르해도 그건 잘못된 것이다. 기다리는 것은 언제나 짜증나는 일이다. 나는 브래드 프로스트의 "퍼포먼스는 디자인이다"에 동의한다.
디테일에 주목해 웹사이트를 다른 것과 구별되게 만들 수 있다. 과하지 않게 감각을 만족시켜주는 메뉴, 트랜지션(transition) 효과, 마우스오버 효과 등 아주 소소한 UX(micro UX) 효과가 웹사이트에 활기를 불어넣어줄 수 있다. 예를 들어 데일리 비스트지의 사랑스러운 진행 표시기를 보시라.
웹에 텍스트를 잔뜩 쓰는 방식이 훨씬 줄어드는 듯 하다. 일부 앱들과 웹사이트들에서는 눈에 보이는 텍스트가 거의 없고 사용자에게 정보를 전달하기 위해 이미지와 아이콘에 의존하기도 한다.
일부 사례에서는 이 방식이 잘 작동했지만, 보통은 텍스트를 완전히 제거하는 것은 별로 도움이 안 되는 것 같다. 예를 들어 스냅챗(Snapchat) 홈페이지는 10개가 안 되는 단어를 사용하고 있는데 방문객들이 이게 뭔지 알 수 있으려면 비디오를 보도록 요구하고 있다.
의료 대쉬보드 컨셉
ELI - 이런 식의 배치는 포트폴리오 사이트처럼 보이게 한다.
Snapchat
기본만 남긴 네비게이션의 유행은 계속 퍼지는 듯 하다. 부분적으로는 모바일용으로 압축적인 네비게이션 디자인 수요에 영향 받아, 아이콘, 롤다운(rolldown), 페이지 스크롤을 내리면 줄어드는 네비게이션에 포커스를 둔 사이트를 많이 볼 수 있다.
미디엄Medium
스마트 홈
CSS를 쓸 수 있는데 왜 이미지를 쓰는가? 매력적인 CSS 체크박스 세트를 원치 않을 자가 누구란 말이뇨?
이건 단연코 훨씬 더 많아질 거라 생각한다. 가디언지의 Firestorm이 그 좋은 예로, 2014년에는 (컨텐츠 사이트보다) 브랜드들이 더 많이 다이나믹한 배경을 활용할 거라 본다.
The House of Eyewear
Firestorm에서 계속 되는 것이다. 일부 언론계는 텍스트, 이미지, 비디오, 인터랙티브한 기능들, 적절한 길이의 스크롤 등을 섞은 온라인 컨텐츠 경험 관련 쪽으로 이동해 가고 있다.
ESPN's Grantland
점점 많은 사이트들이 새로운 페이지를 로딩하는 것을 피하는 대신 현재 페이지에 내용을 추가적으로 보여주는 걸 선호하고 있다. 라이트박스, 오버레이, 확대/위치가 바뀌는 타일은 모두 평균적인 사용자의 탐색에서 클릭 수를 줄여줄 수 있다.
Stories by H&M
웹폰트가 부상 중이고, 디자이너들은 전에 없이 큰 폰트를 좋아하며 여러 폰트를 섞어 매치하는 게 유행하고 있다. 덧붙여 반응형 타이포그라피는 반응형 웹디자인에서 큰 부분을 차지해야 한다.
2개 색상과 그 색조로 충분할 것에 왜 3 가지 색을 쓰는가? 최근 매력적인 단색조의 팔레트들을 좀 보았다.
Qatar Airways
다시, 무지개색을 다 쓸 수 있는데 왜 2가지 색을 쓰는가? 여러 색을 쓴다고 해서 꼭 현란하거나 집중을 방해하는 건 아니다. 다색 디자인은 특히 플랫 디자인과 잘 어울리는 듯 하다.
컬러풀한 웹사이트와 앱을 한 번 보시길.
Coloured Lines
나중에 상술할 생각이지만 일단 왜 카드가 '웹의 미래'인지에 대한 개관을 보시길. 나는 카드가 과거이며 현재이기도 하다고 생각하게 됐다.
Etch
Pravda
Silktricky
텍스쳐 패턴에 반대되는 커다란 사진과 배경 이미지가 점점 일반화되는 듯 한데, 확실히 레티나 디스플레이에서 좋아 보인다. Awwwards의 최신 '오늘의 사이트' 갤러리를 보면 무슨 뜻인지 알 것이다.
Protest
스크롤을 내렸을 때 네비게이션(이나 다른 컨텐츠 박스)이 페이지에 고정되어 있는 경우를 말한다. 네비게이션의 높이가 짧아질 때도 있고 확대될 수 있는 작은 아이콘이 될 때도 있다. 새로 디자인되는 웹사이트들에서 흔히 보이데, 예를 들어 Awwwards를 계속 보자.
글쓴이 Chris Lake은 Econsultancy의 Director of Content 이자 기업가이고 오랜 인터넷광이다. (Twitter, Google+, Linkedin)
최저임금 삭감법 폐기 100만 서명 + 삭감되는 최저임금 계산기능 추가 | 2018/06/01 |
I.역감시.U | 2015/12/18 |
집회시위 제대로 하자! 집회시위 매뉴얼 앱이 나왔어요!! 광고물 ㄱ-;; | 2015/10/07 |
타임라인으로 탐구하는 세월호 참사의 구조적 원인과 행위자들: [세월호는 ... | 2014/10/06 |
최근에 좋았던 이미지들, 그림폰트들 | 2014/03/18 |
연말 정산 기간이라 진보넷에 기부금 영수증 발급 문의가 온다고 해서 회원들에게 영수증 발급을 거절한다는 메일을 보내기로 했다...< 훼이크고 우리는 연말 정산되는 단체가 아님. 그게 될라면 (조건이 달라졌을 수도 있는데 최근에 확인은 안 해 봄) 총 후원회비의 절반 이상이 개인이 내는 것이어야 하는데 일단 그게 조건 미달임. 본인은 개인 회원을 열심히 조직해 봐야지 생각했으나 망했음< 여튼저튼 일단 조건 자체가 안 돼서 못 하고 있었지만 미래에는 됐으면 좋겠다고 생각하고 있었는데 내가 모르는 새에 지정기부금 단체로 지정을 받기 위한 조건이 추가되었다.
정관에 정치적 중립의 의무 규정이 들어가야 한다.
- 확인 결과 법인인 어떤 단체의 주무관청인 어떤 부가 개수작 부린 거였음. 그럼 안 된다는 변호사의 자문을 받음. 암튼 실재한 일이고, 일반적으로 그런 의무는 없지만 글은 그냥 남겨둠.
... 뭐?
말의 해를 맞이하여 고전 짤을 넣어봤다.
진보넷은 이름부터 시망했다 ㅋㅋㅋㅋㅋㅋㅋㅋ 부숴버리겠어. 주무관청과 기획재정부장관과 법 개정한 놈들을 부숴버리고 싶다 'ㅅ' 회원들에게 안내 메일을 보내야 하는데 저 짤을 쓰고 싶구나 근데 말의 핸데 말을 부수면 안 되지 그러니까 아이러니한 현실을 풍자...가 안 됨<
너희 단체는 왜 연말정산이 안 돼니!라는 비난을 종종 받아왔는데 이제 당당히 말할 수 있겠다 우리 단체는 정치적으로 치우쳐서 안 된다긔! 다시 이런 비난을 들으면 그땐 널 부숴버리겠어< ㅋㅋㅋㅋ
이런 짤도 있었네 귀여워서 올려봄 ㅎㅎㅎㅎ
유튜브 4년 차, 구독자 3800명 유튜버의 채널 분석feat. 유튜브 스튜디오 |... | 2023/05/04 |
구글 문서(독스)에서 pdf로 내보내기 했는데 왜 굴림체로 저장됨? 😫[구글 ... | 2023/04/28 |
평생 정보인권만 하겠다는 피의 연합 스티커 제작기 | 2023/02/23 |
줌zoom 첫 오퍼레이팅(호스트) 후기 | 2021/08/31 |
유튜브 채널 업데이트 예정작 | 2018/12/07 |
댓글 목록
관리 메뉴
본문
좋은 글 감사합니다~!부가 정보
관리 메뉴
본문
내용일 알차네요~잘 읽고 갑니다 ^^
부가 정보