제공 :
한빛 네트워크
저자 : James Kalbach
역자 : 김소영
[편집자 주] 본 글은
Designing Web Navigation : 사용자 경험 최적화를 위한 웹 내비게이션 설계 원칙의 저자인 제임스 콜백이 웹 디자인, 웹 내비게이션, 인터페이스, 사용자 경험 등 웹사이트를 기획하고 만드는 분야에 종사하거나 관심을 가지고 있는 독자들에게 전하는 동영상 내용을 정리한 글입니다.
Hello. My name is James Kalbach. I’m the author of Designing Web Navigation (O’Reilly 2007). Thanks for your interest in the topic of web design—it’s great to see more and more people getting involved.
안녕하세요. 제임스 콜백입니다. 저는
Designing Web Navigation : 사용자 경험 최적화를 위한 웹 내비게이션 설계 원칙의 저자입니다. 웹 디자인이라는 주제에 많은 관심을 보여주어서 감사합니다. 점점 더 많은 사람들이 참여하는 모습을 지켜보게 되는 건 정말 멋진 일입니다.
I’d like to highlight two aspects of the book that may not be immediately apparent from reading it. The first aspect is about Design (with a capital D) and what that means to you. The second is about designing web sites in non-Western cultures.
직접 책을 보지 않은 분들을 위해서, 이 책의 중요한 내용을 두 가지로 요약해보고자 합니다. 첫 번째는
디자인(Design - 대문자 D를 썼다는 것에 유념해주세요)에 대한 관점과 그것이 여러분들에게 어떤 의미를 갖느냐입니다. 두 번째는
서구 문화권에 속하지 않은 웹 사이트를 디자인하는 것에 대해서입니다.
I tried to keep the text of Designing Web Navigation very hands-on. For instance, there is a lot practical information about the mechanisms and types of navigation, as well as labelling and methods for evaluating navigation. But I don’t intend that information to be seen as rules or even as guidelines. Instead, my goal was to give readers the tools with which to better design web sites for a given problem and not to dictate how build a web site step by step.
저는 『디자이닝 웹 내비게이션』 책에 실무 내용을 담고자 노력했습니다. 예를 들어, 본문에는 내비게이션의 라벨링을 붙이거나 평가하는 방법은 물론이고, 내비게이션의 메커니즘과 종류에 대한 실제 정보들이 아주 많이 들어 있습니다. 하지만 그것이 어떠한 규칙이나 심지어는 가이드라인으로써 보여지기를 의도하지는 않았습니다. 제가 목표한 것은 독자들에게 웹 사이트를 만드는 방법을 단계별로 하나하나 불러 주는 대신에,
주어진 문제에 대해서 독자들이 웹 사이트를 더 잘 디자인할 수 있도록 만드는 툴을 주자는 것이였습니다.
The reason for this is simple: there is no right or wrong way to design web sites. It depends on many factors. So designing web sites is about applying a particular way of thinking about the problem and not about applying rules someone else has determined. This is called Design Thinking, or Experience Design, or just Design. What do I mean by this? Well, it means several things. I’ll put these into four categories. The four phases of Design:
이유는 간단합니다. 웹 사이트를 디자인하는 데에는 반드시 옳은 방법, 또는 틀린 방법이란 존재하지 않으니까요. 그것은 무수히 많은 요소들에 의해서 달라집니다. 따라서
웹사이트를 디자인하는 것은 어떤 사람이 정해놓은 규칙을 적용하는 것이 아니라, 현재 주어진 문제에 대해서 깊이 생각하여 적절한 각각의 방법을 적용하는 것입니다.
이것을 디자인 생각하기(Design Thinking) 또는 경험 디자인(Experience Design), 또는 단순히 디자인(Design)이라고 부릅니다. 이를 통해 제가 무슨 의미를 담고자 했을까요? 여러 가지 의미가 있을 수 있습니다만, 4가지로 나누어보았습니다. 다음과 같은 디자인(Design)의 4가지 단락을 봐주시기 바랍니다.
First, Design is about IDENTITY. On the one hand, it’s about knowing who you are: what are the goals of the organization creating the web site? What are the values and characteristics that define it? The vision, mission, and strategy of a company guide and limit the direction of the web site’s design. On the other hand, you have to know about the users of the web site. Who are they and what are they trying to accomplish on the site? Additionally, you should know who your competitors are. This is important for creating a unique market position in general.
첫 번째,
디자인은 아이덴티티(IDENTITY)에 대한 것입니다. 한편으로는, 바로 당신이 누군지를 알아가는 것입니다. 웹 사이트를 구성하고자 하는 목표는 무엇입니까? 이를 규정짓는 가치와 특성은 무엇입니까? 회사의 비젼, 미션, 전략이 웹 사이트 디자인 방향의 가이드 또는 제한 요소가 될 수 있습니다. 또 다른 면에서는, 반드시 웹 사이트의 사용자들에 대해서 알아야만 합니다. 그들은 누구이며, 사이트에서 무슨 일을 하고자 하는 것인가요? 덧붙여서, 당신의 경쟁자들에 대해서도 알아야만 합니다. 이것은 일반적으로 고유의 마켓 포지션을 만들어 내는 데 있어서 매우 중요합니다.
So identity is about knowing those three things: who you are, who your users are, and who your competitors are. Chapter 7 of Designing Web Navigation is, in part, about defining the identity of the design problem you are attempting to solve.
따라서 아이덴티티는 다음 세 가지를 아는 것입니다. 당신이 누구이고, 당신의 사용자들은 누구이며, 당신의 경쟁자는 누구인지 말입니다. 디자이닝 웹 내비게이션의 7장에는 부분적으로, 당신이 해결하고자 하는 디자인 문제의 아이덴티티를 규정하는 내용을 다루고 있습니다.
Second, Design is about INSIGHT. It’s about taking the broader context of the situation into account. This includes knowledge of your identity, but also looks at things like workflow and tasks people are trying get done. The goals your users have are important as well. By viewing users are human beings with complex lives and interconnected relationships we can build empathy for them. And empathy is important for identifying opportunities for improvement and for innovating. It gives you inspiration. Empathy for users gives you the insight you need to create a viable solution. You need to be able envision what the users need but aren’t able to envision themselves.
두 번째,
디자인은 인사이트(INSIGHT)에 대한 것입니다. 이는 보다 넓은 현 상황의 문맥을 고려해야 합니다. 당신의 아이덴티티를 포함할 뿐만 아니라, 사람들이 완료하고자 하는 태스크와 워크플로우를 동시에 보아야 합니다. 사용자들이 가지고 있는 목표 또한 중요합니다. 사용자들을 복잡한 관계를 맺으며 다양한 삶을 살아가는 인간으로 본다면, 우리는 그들에 대해 충분한 공감을 만들어 낼 수 있습니다. 공감이란 개선을 위한 그리고 혁신을 위한 기회를 밝히는 데 있어서 중요한 요소입니다. 그것은 우리에게 영감을 줍니다. 사용자들에 대한 공감은 확실한 해결책을 만들어내는 데 필요한 영감을 제공합니다. 사용자들이 필요로 하지만, 그들 스스로는 생각해 낼 수 없는 것을, 바로 당신이 상상할 수 있어야 합니다.
But insight is also about understanding the technological constraints and project scope, as well as the content you are providing access. So overall it’s about knowing the context within which you can start designing, and what your opportunities are. The second half of Chapter 7 talks above these types of activities.
하지만 영감은 또한 기술적인 제약과 프로젝트의 범위는 물론, 접근할 수 있는 콘텐츠들을 이해하는 것이기도 합니다. 따라서 결국 디자인을 시작할 수 있는 범위 내의 상황을 아는 것, 그리고 당신의 기회가 무엇인지를 아는 것입니다. 7장의 절반 정도가 이러한 종류의 일들을 말하고 있습니다.
Third, Design is about IDEATION. What is the best way to solve the design problem? What are all the viable possibilities of creating a good design? On this level exploration is important. Very often people start the design process here, and they don’t consider the first two phases—identity and insight. But really the outcome of that work informs the ideas you have. Ideas are cheap. There are lots of ideas out the. The question you need to answer is, do you have the right idea?
세 번째,
디자인은 아이데이션(IDEATION)에 대한 것입니다. 디자인 문제를 해결하기 위한 최상의 방법은 무엇일까요? 좋은 디자인을 만들어 낼 수 있는 가능성은 무엇일까요? 이러한 수준의 탐구는 중요합니다. 대부분의 사람들이 여기서부터 디자인 프로세스를 시작합니다. 첫 번째 두 단락, 즉 아이덴티티와 인사이트를 고려하지 않습니다. 하지만 실제로 작업의 결과물은 당신이 가지고 있는 아이디어를 알려줍니다. 아이디어는 저렴합니다. 수많은 아이디어들이 있습니다. 여기서 당신 스스로가 질문해야 할 것은, 옳은 아이디어를 가지고 있느냐는 것입니다.
Chapter 8 in Designing Web Navigation begins by talking about concepts. Concepts are important for bridging the insight and ideation phases. Concepts let you take an abstract thought and turn it into something people can imagine or see.
디자이닝 웹 내비게이션의 8장은 컨셉에 대해서 이야기하는 것으로 시작합니다. 컨셉은 인사이트와 아이데이션 단락을 이어주는 데 있어서 중요한 역할을 합니다. 컨셉은 추상적인 사고를 할 수 있게 하며, 그것을 사람들이 상상하거나 볼 수 있는 어떠한 형태로 전환시킵니다.
But really most of the ideation phase is about visualizing ideas, in particular through sketching. Here is where many web designers go wrong with wireframes, or the initial page designs in black and white: they treat wireframes as the final designs instead of sketches. Sketches are unfinished, high-level, rough versions of the visualized solution. The goal of sketching isn’t to finish, but to explore. My recommendation to you is use wireframes as a tool to explore, not as a way to specify. I talk about this in Chapter 9.
하지만, 실제로 대부분의 아이데이션 단락은 아이디어를 시각화하는 것에만 그칩니다. 특히 스케치를 통해서 말이지요. 이 부분이 바로 많은 웹 디자이너들이 와이어프레임을 그리거나, 초기 페이지 디자인을 흑백으로 만들면서 실수를 저지르는 곳입니다. 그들은 스케치를 하는 대신에 최종 디자인으로 와이어프레임을 그립니다. 스케치란 미완의 시각화된 솔루션으로 높은 수준의 러프 버전입니다. 스케치의 목적은 완성된 것이 아니라 탐구하기 위한 것입니다. 제가 추천하는 것은 와이어프레임을 상세화된 완성품으로 여기지 말고 단지 탐구하는 툴로써만 사용하라는 것입니다. 이 내용은 9장에 나와 있습니다.
Fourth, Design is about INSTANTIATON, or creating an instant of the design solution. It’s about evaluating all of the ideas you’ve explored and specifying the direction you will be going in. Only after you’ve explored multiple directions and weighed the pros and cons of each should you specify the final solution.
네 번째,
디자인은 예를 들어 설명하는 것(INSTANTIATION), 또는 디자인 솔루션의 예제를 만들어내는 것입니다.
What people fail to realize is the difference between sketches and prototypes. Sketches are used to further explore ideas. Prototypes are more concrete representations of final solution. They don’t allow for exploration and instead specify the end design. In Chapter 10 I talk about prototypes and UI specifications.
사람들은 스케치와 프로토타입의 차이점을 잘 알지 못하곤 합니다. 스케치는 아이디어를 좀 더 둘러보고자 쓰이는 것입니다. 프로토타입은 최종 해결책을 좀 더 확실하게 표현하는 것입니다. 프로토타입은 더 이상의 탐구를 하는 것이 아니라, 최종 디자인을 상세화시킵니다. 10장에서 프로토타입과 UI 상세 설계를 이야기하고 있습니다.
So it’s really the middle chapters of the book—7, 8, 9 and 10—that lay out a pattern for approaching problems.
따라서 이 책의 중간쯤인 7, 8, 9장은 문제에 접근하는 패턴을 그리고 있습니다.
By applying the principles of Design Thinking you can solve any design problem you have.
디자인 생각하기(Design Thinking)의 원칙을 적용한다면, 여러분 스스로가 자신이 가지고 있는 디자인 문제를 해결할 수 있습니다.
In my book I point to many examples on the web. These are used to show how others have solved certain design problems. I tried to take as many different countries and cultures into account as I could. But I’m an American who lives in Germany. That means my expertise and my experiences are based in Western, European culture. I know very little about web design for Asian cultures, for instance.
제 책에는 웹에 있는 많은 예제들을 나와 있습니다. 이는 다른 사람들이 특정한 디자인 문제를 어떻게 해결하였는지를 보여주기 위해서 사용된 것입니다. 될 수 있는 한, 제가 고려할 수 있는 많은 국가와 문화를 넣고자 했습니다. 하지만, 저는 독일에 살고 있는 미국인입니다. 즉, 저의 전문적인 기술과 저의 경험은 서구, 유럽 문화에 기반하고 있다는 뜻입니다. 사실 저는 아시아 문화권의 웹 디자인에 대해서는 거의 알고 있지 못합니다.
So again, I warn you about reading my book as containing absolute truths about web design. Instead, you need to apply Design Thinking to your problem and situation to come up with the best solution. Looking at the four phases of Design I just outlined should help you do that. Again, I point to these phases in the middle chapters of my book, although I don’t use those exact terms.
그래서 다시 한번 말씀 드리건대, 제 책을 웹 디자인에 대한 완벽한 진실을 담고 있는 것으로 받아들이지 말아주시기 바랍니다. 그 대신,
여러분이 가지고 있는 문제와 처해 있는 상황에 대해 디자인 생각하기(Design Thinking)를 적용하여 최상의 해결책을 만들어내시기 바랍니다. 지금까지 디자인의 네 가지 관점을 살펴봄으로써, 여러분이 그렇게 할 수 있도록 제가 큰 그림을 보여드렸다고 생각합니다. 이 네 가지 용어를 정확히 그대로 사용하지는 않았지만, 책의 중반에 나오는 장들에서 이 관점을 보실 수 있을 겁니다.
For instance, culture plays a role in looking at the identity of your users. Culture is a very important part of who we are. So when designing for your target audience, you may come to different conclusions than I did in my book. For example, in the West there is currently a movement to simplify user interfaces. Have as few elements on the page as you can. Don’t include things that distract people from their task. I’ve heard that in Asian cultures the opposite is sometimes true: lots of content on a page communicates more value to the user.
문화는 사용자들의 아이덴티티를 살펴보는 데 중요한 역할을 합니다. 문화는 우리 자신이 누구인지를 규정짓는 아주 중요한 부분입니다.
따라서 여러분의 타겟 고객을 위해 디자인을 할 때, 제가 제 책에서 내린 것과는 다른 결론에 이르게 될지도 모릅니다. 예를 들어, 서구에서는, 현재 유저 인터페이스를 간소화하려는 움직임이 일어나고 있습니다. 될 수 있는 한 페이지에 아주 적은 요소들만을 갖게 만들지요. 사람들이 태스크를 수행하는 데 있어 주의를 흐트러뜨릴 수 있는 것은 포함시키지 않습니다. 저는 아시아 문화에서는 때로, 이와 정 반대로 인터페이스가 디자인된다고 들었습니다. 페이지에 더욱 많은 콘텐츠를 놓는 것이 사용자들에게 더 가치가 있다라는 뜻으로 전달된다고 말이지요.
The point is to solve the problem in a way that fits your situation. Knowing the tools and possibilities you have is important. And I hope you’ll see that in my book and that you can learn from it in this way.
여러분의 상황에 맞는 방법으로 문제를 해결하는 것이 바로 핵심입니다. 여러분이 가지고 있는 툴과 가능성을 아는 것이 중요합니다. 저는 여러분이 제 책에서 이러한 방법으로 보고 배우기를 소망합니다.
Thank you for listening. I hope you enjoy the book. If you have any questions, please email me at jim.kalbach@gmail.com. Or you can get the address from Soy.
지금까지 경청해주셔서 감사합니다. 책을 즐겁게 읽어주셨으면 합니다. 궁금한 점이 있으시다면,
jim.kalbach@gmail.com으로 메일을 주시거나, 이 책의 역자이신 김소영씨에게 주소를 물어보셔도 됩니다.
Auf Wiedersehen and good bye.
다시 보기를 바라며, 이만 줄입니다.