한 입에 쏙, 한 눈에 쏙 : 정보 관계를 만드는 법칙

한 입에 쏙, 한 눈에 쏙~


한 입에 쏙 들어가는 음식이 먹기 좋듯, 한 눈에 쏙 들어오는 글이 읽기 좋다.

김밥은 한 입에 먹기 좋다. 밥 두 공기를 한 끼에 다 먹으려면 부담스럽지만, 김밥이라면 가능할 수 있다. 입에 쏙쏙 한 개 씩 넣다 보면 금세 사라진다. 나만 그런가?


화면에 글이 너무 많이 보이면 부담스럽다. 이걸 언제 다 읽나 싶어 질린다. 읽고 싶은 마음이 싹 사라진다. 스크롤할 때 빠르게 움직이는 글자들을 보고 있으면 멀미가 난다.


긴 글은 한 눈에 쏙 들어오는 크기로 잘라서 보여주는 게 좋다. 글을 읽는 부담을 덜어준다. 앱과 웹 디자인을 책과 잡지같은 인쇄물 디자인과 달리, 긴 글을 감췄다가 사용자가 읽고 싶을 때 보여주는 방식으로 할 수 있다.


스크롤의 압박이...




한 줄 요약으로 글을 읽고 싶게 만든다. 일명 낚시!





한 줄 요약을 누르면 자세한 내용이 메롱하고 나오는 방식이던,






읽을 글만 창을 띄워 보여주는 방식이던,


긴 글을 읽기 좋은 크기로 잘라 보여주는 아이디어는 당신의 몫입니다.




페이지 좋아요. 나도 당신이 좋아요.
http://www.facebook.com/appartiste

개발자를 위한 디자인 법칙을 올리고 있습니다.

드럼 세탁기인가? : 정보 관계를 만드는 법칙

드럼 세탁기인가?

아이콘 크기를 조절할 때 가로 세로 비율을 고정한다. 사물의 테두리 모양을 그려 아이콘을 만들기 때문에 그리는 대상의 가로 세로 비율은 중요하다. 간혹 아이콘을 칸에 맞춰 넣기 위해 가로로 늘리거나, 세로로 늘리기도 한다. 조금 늘리는 것 뿐인데 뭐 어떠랴. 

사람은 가로 세로 비율을 통해 사물을 알아본다. 항상 보고 생각하던 비율이 아니면 어색함을 느끼거나 다른 사물로 착각한다.

연필은 가늘고 긴 사각형일 때 연필로 보이고, 카메라는 가로로 긴 사각형일 때 카메라로 보인다.


말뚝인가? 아닌데 연필인데!!


드럼 세탁기구나... 아니거든 카메라거든!!




http://www.facebook.com/appartiste

개발자를 위한 디자인 법칙을 올리고 있습니다.

빼는 것이 디자인이다 : 정보의 관계를 만드는 법칙

빼는 것이 디자인이다.

디자인을 했는데 성에 안 찬다. 그래서 경계선도 넣어 보고 버튼과 글자에 그림자도 넣어 보고, 바탕에 여러 색을 칠한다. 그런데 뭔가 하면 할수록 디자인은 더욱 마음에 들지 않는다. 블랙홀이 되었다. 방 한 구석에 있는 먼지가 잔뜩 쌓인 장식이 주렁 주렁 달린 크리스마스트리 같다. 친구들이 놀고 간 후 난장판이 된 부엌같다. 하아...

디자인에 시각적인 효과를 넣기 전에 그것이 꼭 필요한 것인지 생각한다. 무엇을 더할까 생각하기 전에 무엇을 뺄까를 생각한다. 중복된 요소는 합치고, 중요하지 않은 효과와 장식은 과감히 없앤다.

뺀다는 것은 쉬운 일이 아니다. 이 기법을 배우느라 얼마나 고생했는데, 이 효과 넣느라 시간도 많이 걸렸는데, 다 안다. 기껏 배운 표현 기법 지금 디자인에 안 써먹으면 언제 써먹어 볼까. 하지만 중요한 건 앱의 사용 목적이다.

잠깐 볼 땐 화려한 장식의 디자인이 좋을 수 있다. 하지만 오래 보고 자주 봐야 할 땐 깔끔해서 담백한 디자인이 더 좋다.

코드 소스를 리펙토링 하는 것과 같다. 중복된 코드는 합치고 불필요한 코드는 없애고, 반복되는 코드는 함수로 만든다. 역시 단순 명료해서 이해하기 쉬운 코드 소스가 좋다.   

말하지 않아도 알아요 : 정보의 관계를 만드는 법칙

말하지 않아도 알아요.

배치로 정보의 관계를 표현한다. 관계가 깊은 정보는 가깝게 놓고 옆에 둔다. 관계가 약한 정보는 멀리 둔다. 그것만으로도 정보의 관계가 표현된다. 정보를 놓는 순서, 방향, 간격이 정보의 관계를 만든다. 배치가 잘 된 디자인은 훑어만 봐도 내용을 짐작할 수 있다. 직관적인 디자인이라고 한다.

사용자는 내용을 꼼꼼히 읽고 싶어 하지 않는다. 특히 읽어야 하는 정보가 많으면 더욱 그렇다. 매일 코드 소스를 읽는 개발자도 그렇지 않은가. 글을 계속 읽다 보면 머리가 딩딩거린다. 배치가 중요한 이유다.

<>무슨 내용인지 모르겠지만, 배치된 모양을 보니 정보의 관계가 짐작 된다.

설명 말아요 보여줘요 : 정보의 관계를 만드는 법칙

설명하지 마세요. 보여주세요.

명료한 디자인은 정보의 관계가 한 눈에 보인다. 사람은 놀라운 학습 능력과 직관력을 가지고 있다. 처음 보는 디자인도 정보의 관계만 이해하면 바로 사용할 수 있다.

난해한 디자인은 정보의 관계가 복잡하다. 정보의 관계를 설명하는 정보까지 더해져 더욱 지저분해 보인다.

레이아웃은 글과 그림 등의 디자인 요소를 배치하는 작업이다. 연관된 정보들은 같아 보이게, 관련 없는 정보들은 달라 보이게 레이아웃을 한다. 사용자가 앱을 쉽게 이용할 수 있도록 정보의 관계를 명료하게 디자인한다.

단순 명료한 디자인을 만드는 레이아웃 법칙을 알아본다.

정보의 관계를 알기 쉽게 디자인 요소를 정리 배치한다.