비워둬 비워둬 : 개발자 디자인 법칙

비워둬 비워둬
막힌 데 없이 활짝 트인 풍경을 보면 마음이 후련하다. 흐름을 막는 의미없는 정보를 싹 걷어내어 사용자에게 시원한 느낌을 주자.
디자인을 하다가 빈 공간이 보이면 무엇으로 채울까 걱정한다. 빈 공간을 그냥 두지 못한다. 그림이던 글이던 색상이던 무엇으로든 채우려 한다. 연습장을 꽉꽉 채워 쓰며 열심히 공부해서 일까. 비어가는 접시를 보면 슬퍼서 일까. 빈 공간을 의미없는 정보로 채운다.
빈 공간은 덜 채운 공간이 아니다. 디자인에서 빈 공간은 중요하다. 디자인에 흐름을 만든다. 사용자의 눈길을 중요 정보로 이끈다. 빈 공간은 정보와 정보를 연결하는 길이다. 눈길이 흐름을 따라간다. 꽉 막힌 길보다 뻥 뚫린 길이 좋다. 흐름을 막는 의미없는 정보를 걷어내는 디자인이 좋다. 화면에 시원스레 뻗은 넓은 길을 만들자.
시원스레 펼쳐진 바다, 가슴이 뻥 뚫린다.

사람들로 물결을 이루는 바다, 답답하다.

눈길은 빈 공간이 이끄는 대로 따라간다.

개발자를 위한 디자인 법칙을 쓰고 있습니다. 페이지 좋아요 하시면 좋아요.
http://www.facebook.com/appartiste

짧게 끊어 줘요 : 정보 관계를 만드는 법칙

짧게 끊어 줘요


사용자가 입력, 선택, 허락을 해야 하는 정보들은 사용자의 기억, 생각, 이해를 요구한다. 사용자가 이런 정보들을 쉽게 처리할 수 있도록 한 번에 하나씩 보여 주는 방식으로 디자인한다.


생각과 기억을 요구하는 정보들을 한꺼번에 보여 주면 사용자는 부담을 느낀다. 마치 시험지를 받아 든 느낌이 들어 앱을 닫을 것이다.


사람들은 습관적으로 긴 숫자를 "032-6849-5173"식으로 세 네 개씩 끊어 읽는다. 전화번호, 송장 번호, 계좌 번호 등 열 자리가 넘는 숫자는 세 네 개씩 끊어 읽어야 쉽게 기억하고 받아 적을 수 있다.


"03268495173"을 단번에 기억하고 받아 적을 자신이 있는가? 없다 해도 걱정할 필요 없다. 노력하지 않으면 사람은 한 번에 서너 개의 정보만 기억하고 처리할 수 있다. 기억하는 시간도 짧고 뒤돌아 서면 잊어버린다. 프로그램이 열리면 관련 정보가 램 메모리에 저장됐다가 프로그램이 닫히면 싹 지워지는 컴퓨터의 램 메모리와 비슷한 원리다. 그래서 단기 기억 혹은 작업 기억이라 한다.


자주 보고 듣고 생각한 정보는 장기 기억에 저장된다. 컴퓨터 하드 드라이브에 정보를 저장하고 불러오는 원리와 비슷하지만 큰 차이가 있다. 사람은 컴퓨터처럼 저장된 정보를 마음대로 불러올 수 없다. 시험을 보는 내내 기억이 나지 않던 답이 시험이 끝나자마자 생각 나는 것처럼 기억이 꼭 필요한 순간에 난다는 보장이 없다. 생각하고 이해하고 기억하는 것은 힘든 일이다. 정보를 단계적으로 한 번에 하나씩 처리할 수 있게 나눈다.



한 번에 하나씩...


개발자 디자인 법칙 페이지 좋아요? 나도 좋아요.
http://www.facebook.com/appartiste

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

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

한 입에 쏙, 한 눈에 쏙~


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

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


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


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


스크롤의 압박이...




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





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






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


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




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

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

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

드럼 세탁기인가?

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

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

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


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


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




http://www.facebook.com/appartiste

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

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

빼는 것이 디자인이다.

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

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

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

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

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

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

말하지 않아도 알아요.

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

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

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

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

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

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

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

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

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

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