웹2.0 시대를 맞아보하효 기타 간단한 팁들 검색 결과

해당 글 74

http://taogi.net/special/sewolho/background/

 

지난 몇 달간 대화형(인터랙티브) 세월호 타임라인을 만드느라 혼신의 힘을 쏟아부었다. 요즘에 진보넷에서는 전에 어디서 본 적 없는 걸 만드느라고.. 내가 고생이 많다; 결과물은 노멀(?)한데 디자인 때문에 정말 머리를 쥐어뜯었음.. =ㅅ= 아 나는 디자이너가 아닌데 ㅠㅠ 게다가 개발자가< 모바일 하지 말자더니 오픈 직전에 모바일 만들자고 해서.. 아오.. 근데 하고나니 다 잘 했다는 생각이 듦<

 

기존에 세월호 참사를 다룬 타임라인들이 이미 많다. 오마이뉴스의 4월 16일 세월호, 죽은 자의 기록 산 자의 증언, 한겨레의 세월, 哀 - 세월호 최초 100시간의 기록, 다음의 세월호, 72시간의 기록 등. 이미 만들어진 타임라인이 세월호 참사를 전후해 참사 자체의 타임라인은 이미 충실히 기록했기 때문에 같은 작업을 할 필요는 없었고 사실 애초의 기획 의도도 시간순으로 세월호 가라앉는 직전직후의 일을 보는 것보다, 세월호가 침몰하기까지 얼마나 많은 책임자들의 행위들이 중첩되었는가를 보여주는 데에 촛점을 맞췄다. 단순히 청해진해운 족치고 해경 해체하는 것으로 마무리 지을 일이 아니라는 거다.

 

그래서 참사 직후부터 관계기관에 정보 공개를 요청하며 다양한 데이터를 수집해온 정보공개센터랑 데이터를 같이 작업했다. 덕분에 다양한 데이터를 볼 수 있었다 그 데이터들을 잘 모아서 각 타임라인에도 자료로 넣어놨다.

 

내용적으로도 그렇지만 이 타임라인의 장점은 행위주체를 클릭해, 우리가 크게 구분한 네 원인에서 각 행위주체가 어떤 책임이 있는가를 한눈에 확인할 수 있다는 점이다. 또 메뉴바의 한국해양구조협회  관계도를 통해 해피아라고 불리던 이 곳의 인적 구성과 각인들의 소속 단위를 한눈에 볼 수 있다는 게 장점이다. 특히 후자는 내가 보고 싶어서 웹에서 검색을 열심히 해도 찾을 수 없었던 거임 ㅎㅎ 전자도 물론 내가 보고 싶어서 만들었지만 ㅋ

 

사용자 삽입 이미지

 

가장 큰 장점은 데이터와 소스를 전부 깃허브를 통해 공개해 누구나(까지는 아니고 개발자들만;;) 소스와 데이터를 수정해 자기만의 타임라인을 만들 수 있다는 점이다. 이 하나의 타임라인을 만들기 위해 많은 시간을 들였지만, 우리 외에도 많은 이들이 세월호 참사를 바라보는 자신만의 관점으로 타임라인을 만들 수 있다면 좋을 것이다. 아니, 세월호만이 아니라 어떤 주제로든.

 

그래서 그동안 멈췄던, 타임라인 제작 플랫폼 '따오기'도 재시동을 걸고 있다. 누구나 자기 주제로 타임라인을 쉽게 만들 수 있게 말이다. 그래서 '따오기 스핀오프'라고 링크하고 따오기를 살짝 홍보해봤는데.. 사실 스핀오프는 아님. [세월호는 왜.]는 정말 세월호 컨텐츠에 특화되게 만들었기 때문에 기술적으로도 코딩을 새로 할 수밖에 없었다. 따오기를 만들다가 나온 게 아니란 말임; 하지만 타임라인에 대한 우리의 기술적 관심이 향후 따오기에도 어느 식으로든 반영이 될 수밖에 없고 그런 관심에서 세월호를 타임라인으로 만들 구상을 했던 거니까, 주객이 전도된 것까진 아니다; ㅎ

 

그나저나 이미지 중간 부분에 화살표에도 표시해놨는데, 그건 키보드 방향키로도 좌우로 움직일 수 있단 뜻으로 올려봐봤음. ㅎㅎ 더 많은 이야기는 손님이 오셨기 또래 나중에 다시; 미디어스에 보도도 됐다< 먼저 알리지 않았는데 인터뷰 요청이 와서 짱 좋았긔 캬캬

 

아참 처음 시작할 때 애니메이션 너무 좋다 ㅇ<-< 볼 때마다 혼자 캬~ 이럼 ㅋ 막판에 해달라고 해서 개발하는 규만이 매우 고통스러워함 원래는 미끌어져 들어오는 애니메이션이었는데 바꿔달라구 해가지고. 글고 방금 온 손님께서 오프닝 애니메이션과 소리가 함께 있음 좋겠다고 했다 오오 좋은 생각임 소리 찾아봐야긔


BGM으로 이 음악을 사서 넣고 싶었지만 사운도 자동 재생에 반대하는 내부의 의견에 부딪혀, 나 혼자 [세월호는 왜.] 사이트를 열며 동시에 재빠르게 이 음악을 플레이시키며 감상함< =ㅅ=; ㅋㅋㅋ 나 혼자 타임라인 [세월호는 왜.]에 뙇 어울리는 배경음악을 찾았다고 좋아했으되... 훙 아까비

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기
2014/10/06 17:14 2014/10/06 17:14

댓글을 달아 주세요

  1. ou_topia 2014/10/06 20:26

    얼마 전 북마트를 한 사이트였는데, 님께서 만드셨군요. 넘 조아요. 고생했어요.

  2. 2014/10/06 23:33

    싸이트 간지나네요. ^^
    만드시느라 정말 수고하셨습니다.

    • 앙겔부처 2014/10/07 00:41

      실은 연님 보시라구 쓴 글임요 쿄쿄쿄쿄 페북 트위터로는 이미 공개한 거라;) 연님 칭찬에 고래 등 터진다 ㅋㅋㅋ 연님 칭찬은 앙겔도 춤추게 합니당

  3. 꽃개 2014/10/09 09:55

    저도 살펴봤어요. 참 잘 만드셨어요. 굉장히 고생하셨다는 게 다 보이는데 제 폰에선 제대로 안 보이더라고요. 제 폰은 윈도우즈폰...컥.

최근에 좋았던 이미지들, 그림폰트들

category 웹web 왑wab 2014/03/18 16:20

* 저작권에 걸리지 않는, 이라고 제목을 썼다가 뭐 꼭 그런 얘기가 아니라 제목을 바꿈<

 

http://vintageprintable.com/

말이 필요 없음 너무 예쁨 ㅇ<-< 여기는 아예 저작권이 없는 퍼블릭 도메인이다. 프린트할 수 있는 고해상도의 이미지를 제공하는데 옛날 도감류를 스캔한 것들이 너무 좋아서 미춰 버릴 것 같아 ㅜㅜ 예전에 보리출판사의 세밀화로 그린 도감 시리즈를 엄청 좋아했는데 그거보다 더 좋다 그 누런 종이가 나를 감싸안아

 

그 중에 고래 보고 귀여워가지구 ㅇ<-<

 

사용자 삽입 이미지

 

이 고래를 보고 우리 이가라시 다이스케 선생의 [해수의 아이]에서 봤던 장면이 떠올라서 찾아봤는데 생각보단 안 비슷하긔. 눈빛이 닮았다고 생각했는데, 고래가 되기 전, 고래가 돼가는 오른쪽 아래 그림

사용자 삽입 이미지

 

암튼 저 사이트 보다 보면 하루가 다 감.. 저기만 그런 게 아니고 아래에 들 곳들도 전부 그렇다. 고퀄의 이미지 모아놓은 사이트들 하염없이 보다보면 하루가 다 감. 근데 그런 이미지 한 번 봐도 아 어디서 봤는데 어디서 봤더라? 기억이 안 나고 저장해 놔도 마찬가지로 기억이 안 나서 일일이 뒤져봐야 함.. -_- 암튼< 여기 사이트에 ebook도 제공하는데, 나도 만들어봐야겠다 오프라인에서 태블릿으로 언제든지 볼 수 있게

 

저작권 문제없는 고퀄리티 사진을 구할 수 있는 사이트 10곳

이분이 소개해 주신 무료 초고해상도 사이트들 보다가 하루가 다 가곤 한다..< 사이트에는 다른 무료 디자인 소스도 엄청 많다.

 

클래식 사진들 https://twitter.com/History_Pics

 

여긴 최근에 알았는데 참 좋다< 여기는 이미지가 무료인 건지는 알 수가 없는 것이 출처나 저작권 표시가 따로 없는데, 영화에서 캡쳐한 것도 있어서 그런 것은 곤란해... -_- 나는 대체로 images.google.com 에서 url 검색을 통해 사진 출처를 추적하길 즐기는데, 저작권 확인보다 주로 원출처가 너무 궁금해서...; 암튼 저기 사진들도 사용하고 싶으면 그렇게 찾아보면 될 듯. 구글이 반드시 다 알려주는 게 아니긴 한데 대체로 쓸만하다.

 

그림폰트 http://moorstation.org/typoasis/designers/klein/index.htm

그림폰트만 있는 건 아닌데 난 영문폰트는 대체로 필요 없는 처지라..< 이 분은 최근엔 작업을 안 하시는 모양인데 다행히 지난 작업들은 다 볼 수 있다. 해당 사이트의 상위 페이지에서는 다른 작가들의 작품도 볼 수 있는데 몇 개 보다가 맘에 드는 게 없어서 이 분 것만 보다가 그것도 하루가 다 가도 다 볼 수가 없어서 다 못 봄. 예시로 올리고 싶은 게 엄청 많지만 저 사이트에서 보기로 하고< 하나만 올려 보면

 

사용자 삽입 이미지

AfricaArt라는 폰트임 앙 너무 예뻠 나 기절 ㅇ<-< 막 

 

막 하다가 귀찮았는지 같은 폰트군에서도 완성도 떨어지는 것들도 있는데 ㅋㅋ 이쁜 거 디게 많다. 언제 써먹을까.. 막 콜럼버스 침략 전 북/남 아메리카 그림문자같은 것도 있고 다양햄.

 

빠리 꼬뮌―프랑스 내전 때 사진 (저작권은 문의해야)

찾아보지도 않고 빠리 꼬뮌 때 이미지 등 자료 당근 없을 줄 알았는데 찾자마자 뙇 나옴 =ㅅ= 노스웨스턴 대학? 거기서 소장한 걸 디지털화해서 계속 올리고 있다고. 사진 뿐 아니라 포스터, 팜플릿, 책, 뉴스 등등등 자료가 많다. 그냥 저작권 풀어주지.. =_= 나도 문의하고 써야 하냐긔!! 일개 개인인데!! 

 

별도

별도로 나도 지금 물고기 폰트 만들까 생각중인데, 그림은 다른 빈티지 사이트에서 다운받아서 트레이싱해서 낱낱이 쪼갰다. 통짜 이미지를 올려본다 다음에 폰트로 만들어볼테야

 

사용자 삽입 이미지

아 근데 그대로 쓰긴 좀 그래 보임 정돈이 돼얄 듯... =_=

 

참 정보공유연대에서 오늘부터 3주간 저작권 강좌를 여는데 유익한 시간이 될 거임 특히 담주에 '활동가는 알아야 할 저작권법'이 큰 도움이 될 듯 나도 듣고 싶지만 선약이 있어서 -ㅁ- 남들이 정리해 준 걸 읽어야지.

 

그리고 아무 상관 없지만< 웨스 앤더슨님의 팔레트... 너무 좋다 ㅇ<-<

The Grand Budapest Hotel.

Sam: I love you, but you don&#8217;t know what you&#8217;re talking about.

Margot takes a bath.

http://wesandersonpalettes.tumblr.com/

 

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기
2014/03/18 16:20 2014/03/18 16:20

댓글을 달아 주세요

국정원, 불법 도감청의 역사

category 웹web 왑wab 2014/03/03 18:02

가로로 스크롤하시면 되고요< 네모 상자 안을 클릭한 채라면 방향키(←→)로 좌우로 왔다갔달 수 있다. 새탭에서 보려면: http://act.jinbo.net/secrets/nis_timeline (※ 모바일은 아직 지원이 앙됨 =ㅅ=)

 

진보넷에서 '따오기'라는 타임라인 서비스를 준비하고 있는데1​ 그 샘플로, 또 국정원 개혁(또는 해체) 논의가 국정원의 감청 권한 강화로 프레임이 바뀌며 말려드는 데 대한 문제 의식으로 만들어봤다. 그런데 다행인지 불행인지 2월 국회에서는 국정원 개혁인지 권한 강환지고 나발이고 국정원 개혁한다고 만들었던 특위가 2월 말로 끝나버렸다.

 

하지만 국정원의 감청 권한 강화는(특히 휴대전화 감청) 이미 17대 국회부터 논의가 나와 18대 19대 계속해서 나왔고, 또 한참 안기부-국정원의 불법 감청으로 한반도가 시끌하던 2005년 "안기부 X-파일 사건" 때도 국정원은 미안하다며 근데 휴대전화 감청하게 해달라고(자세한 건 위 타임라인 참조) 프레임 바꿔치기를 시도한 바 있다. 이 시도는 앞으로도 계속 될 것이다. 국정원 개혁 특위를 잇는 6인협의체를 설치하느니 마느니 지지부진 저러고 있던데, 언제든지 튀어나올 이슈로 잠복해 있다.

 

국정원은 서울시 남매 간첩 조작 사건으로 또 화려하게 조명을 받고 있는데, 통비법 관련한 국정원의 불법 도감청 역사 타임라인을 만든다고 [남산의 부장들]이라는 책도 사봤는데, 간첩 조작 사건, 고문치사 사건을 보면 도감청 따위 그냥 아무것도 아니게 느껴질 정도였다. 그렇다고 정말 아무것도 아닌 것은 아니다. 촘촘한 감시망이 아무것도 아닐 수가 없다.

 

그런 의미에서 유행 따르듯 이 이슈는 지났다,고 할 건 아니고, 짧게 (바리가) Q&A를 구성해 통비법의 그간의 쟁점들을 단박에 이해할 수 있게 정리해 준 문서를 읽어두면 가내 두루두루 도움이 될 것만 같다. 그런 느낌으로다가...<

 

새 탭에서 보기

 

이건 요즘 유행하는 immersive를 해보자(멀티미디어 기사를 위한 15가지 체크 포인트 참조)고 ㅋㅋ 그랬는데 =ㅅ= 구성은 괜찮은데< 디자인할 시간이 없었어... 하지만 괜찮아... 어차피 아무도 안 봐< 이러고 있음 ㅎ 이건 모바일도 잘 되긔. 간단한 코드니깐여★

 

아 사실 따오기가 너무 늦게 되가지구... 아우... 기술적인 문제가 나오고 또 나오고 해결하면 또 나오고 그래가지구 오픈이 늦는데다 주민등록폐지로 진보넷이 너무 바빠서 ;ㅅ; 그래도 나중에 다시 쓸 수 있어서 그냥 끝까지 해 봤는데 실은 애니메이션도 하나 기획했는데 그걸 못 해서 개아쉽다. 그런 거에요 'ㅅ'

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기
  1. 따오기는 이집트 신화의 죽음의 신이자 도서관의 신인 ‘토트’의 상반신이 따오기란 새라는 점에서 착안했어요. 토트는 그리스문자로 Θωθ 이렇게 쓰는 거라 완전 귀엽기까지 합니다!라고 2012년에 이미 공지 나감...ㄱ-; 일정이 계속 미뤄졌지만 그런 건 불문에 부치기로 한다 ㄱ-텍스트로 돌아가기
2014/03/03 18:02 2014/03/03 18:02

댓글을 달아 주세요

  1. 꽅개 2014/03/04 11:18

    오호 대단해요. 정말 대단해.짝짝짝짝. 수고하셨습니다.

  2. 바리 2014/03/04 13:12

    너 진짜 사랑한다

  3. 윤삼 2014/03/09 15:04

    우와~ 진짜 대단해요!
    특히 저 타임라인 탐나네요! 조속한(?) 모바일 지원을 응원합니다!! 데헷~

    • 무한한 뎡야 2014/03/10 12:24

      빈말이 아니길 바래욤.. 베타테스터 접선할 거거든요 ㅋㅋ 근데 바쁘셔서 아마 안 되겠지 먼저 끝내야만 하는 게 있으니까 논tothe문

  4. 비밀방문자 2014/03/11 22:41

    관리자만 볼 수 있는 댓글입니다.

2014년 주요 웹디자인 트렌드 18선

category 웹web 왑wab 2014/01/27 16:45

저자의 허락을 얻어 2014년 1월 13일 Econsultancy에 실린 18 pivotal web design trends for 2014을 번역한 글. 컴퓨터 앞에 앉아 있을 시간을 보장받은 활동가로서 웹기술 동향을 우리끼리 팔로업하지 말고 많은 사람들과 나눌 수 있게 노력해 보자...고 생각해 왔는데 막상 한글로 하자니...() 번역 지적 달콤하게 받음

 

앞으로 공유하고자 하는 것에서 웹디자인은 극히 일부이고, 이 글에서도 디자인과 더불어 어떤 식으로 컨텐츠를 생산할 것인가 힌트도 볼 수 있다. 링크도 보시길(영어지만)


 

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를 계속 보자.

 

 

글쓴이 Chris Lake은 Econsultancy의 Director of Content 이자 기업가이고 오랜 인터넷광이다. (TwitterGoogle+Linkedin)

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기
2014/01/27 16:45 2014/01/27 16:45

댓글을 달아 주세요

  1. 김기현 2014/05/07 15:21

    좋은 글 감사합니다~!

  2. 가가멜 2014/10/02 06:03

    내용일 알차네요~

    잘 읽고 갑니다 ^^