This next talk is about UI density, maximizing value in time and space. >> So, I guess we better keep this next intro compact and to the point.

>> That's right. Next up is dense by design. Please welcome Matthew Stromon.

>> If you know anything about me, you know that I write a lot. Some of this writing comes from a place of curiosity because I find an idea that I really like and I just have to share it with the world.

But, honestly, most of it comes from a place of frustration.

Somebody says something and it bugs me so much that I can't help myself, I just have to go and try to prove them wrong.

This sounds a little bit petty, but I promise it comes from a good place. What I like to do is try to construct a best possible version of that other person's argument and then I wrestle with it.

I'm right, they're wrong. I get to write what I found out with a smug sense of superiority.

But, sometimes, I'm wrong. I lose the wrestling match and I have to change my mind. Today, I want to tell you guys a story about a time I tried to prove somebody wrong.

That's uh Patrick Collison, uh the CEO and co-founder of Stripe. You might have heard of him before.

I really hope he's not here right now. I worked at Stripe a few years ago. And uh I can say this with all honesty, Patrick is one of the smartest people I've ever worked with.

So, as you can imagine, trying to prove him wrong is an extremely inadvisable thing to do.

But, I did it anyway. Couple years ago, me and my team were presenting a vision for an updated visual design language for the Stripe dashboard.

We really wanted to double down on all the things that made Stripe design great, attention to detail, great information hierarchy, you know, the the and the ample white space that that Stripe is known for.

During the presentation, Patrick silently started sharing his screen. He opened up a blank Google Talk, and he pasted in a picture of this.

If you don't recognize it, this is the Bloomberg terminal. It's one of the most valuable pieces of software in the world, and it's also the ugliest.

So, it was a little confusing, but uh >> [clears throat] >> after we presented, we were uh getting feedback.

And Patrick asked a simple question. He asked, "Why can't we make it look more like this?

" Now, I immediately thought of a lot of reasons why we couldn't make it look like that. I thought of a lot of reasons why I didn't want to make it look like that.

But, Patrick's the boss. So, after the the presentation, me and my team were getting back together and trying to decipher this feedback.

Trying to figure out what it What was he talking about? Eventually, we circled around this idea of density.

Well, the Bloomberg Terminal is very dense. So, maybe Patrick wants us to make it look more dense.

Like I said before, I like to take the best possible version of somebody's argument before I decide that they're wrong. So, we started from the perspective of, "Okay, let's make the Stripe dashboard more dense.

What would that even look like?" It turns out that is a very hard question to answer.

Cuz that word density has a lot of different meanings. And it took me almost a year to figure out exactly what it meant.

And how that actually impacts the users that we were designing for. So, I want to take you on that journey with me today.

We're going to climb the ladder of understanding rung by rung. Five different definitions of density. And we're going to get to the top and we're going to look back down, and we're all going to decide together whether or not Patrick Collison was wrong.

So, the first rung. The first thing that you think of when you see the Bloomberg Terminal. Like me, you think, "Ah, there's a lot of stuff going on.

There's a lot of pixels on the screen." And that's I think what most people think of when they think about density.

So, you know, there's a lot of websites that have visual density. I hope Craigslist never changes because it's beautiful the way it is.

Um another of my favorite websites in the world is McMaster-Carr, where you can see and purchase every single screw that's ever been manufactured.

These are beautiful examples of density, but there's also some really horrendous examples of density.

This is a real website, by the way. You can go there right now. I I wouldn't advise it, but it's uh it's it's pretty amazing.

So, if there are both a beautiful versions of visual density and ugly versions of visual density, then surely there must be something else to it.

We can't just stay with our definition of density. This kind of graphic is what really locked it into a place for me.

This is the kind of graphic you'd see in a newspaper. And I want you to just take a second and try to figure out what it is this graphic is trying to tell us.

Because there's a lot of visual density here.

But what's the point? Maybe if you look past all of the cartoon bullets and the silhouettes of fighter planes and the the numbers, you might actually get to the meaning underneath the chart, but I decided to strip away all that visual information and let the data speak for itself.

Here's the exact same data represented without visual density. And hopefully you get the point right away, that in 2013 the US spent more on military and defense than almost any other country in the entire world combined.

Well, that's very apparent when we take away all the visual density. We took pixels off the page, but we communicated more, not less.

Which makes it really clear that this is a chart crime and it trades accuracy for emotional effect. And that's what the visual density can do sometimes, which brings me to the next definition of density.

Information density, which is about how much of those pixels are actually communicating.

Edward Tufte has been writing about this for 40 years now. He describes it as the data-to-ink ratio, which means you take the amount of data that's on the page and you compare it to the amount of ink that's on the page.

And the goal is to get to as close to one-to-one as possible, where every single part of the graphic has to be communicating something.

The golden standard of this, according to Tufte, is this 1885 train schedule from Paris to Lyon.

And I just want us to appreciate it for a second cuz it is a beautiful chart. Across the top in the x-axis are time, the hours of the day from 6:00 a.

m. all the way through 6:00 p.m. Uh or I would say 6:00 a.m. to 6:00 a.m.

the next day. And then on the y-axis going from top to bottom are the train stations. Now, the cool thing about this chart is they've actually chosen to put the train station at the physical distance they are apart.

And what that means is that that decision actually communicates something.

So, that you can see these diagonal lines as they trace across the chart are the actual trains moving from one end of the line to the other.

You can see what time they depart, what time they arrive, you can plan an entire trip, you can see where you can stop for a while or how transfers are going to work, and you can even see how fast the trains are moving.

Some go really fast and their lines are more vertical. Some are slower and they're more horizontal. So, this is a perfect example of a one-to-one data-to-ink ratio.

But, if it's all about the amount of ink on the page, then truly we can just subtract the ink and increase the ratio by making the graphic smaller and shrinking it down.

So, let's try that. Let's make the graphic smaller, more dense, and more dense, and more dense.

And here we've done it. We've created the perfect data-to-ink ratio, a black hole of information density.

We've taken all of the information in the known universe and condensed it down to a single infinitesimally small point, destroying the fabric of space-time.

So, obviously there's a threshold here. There's a place where as you increase the information density, you actually stop getting any useful information out of it all together.

It's actually a speed limit for your brain. And it's the key to the next definition of density. Meaning density.

This is the first time we're actually taking into account the people looking at the design. We're going beyond the ink and asking how much is the user actually getting out of this?

And how much of it can they understand and use? I have an example of this. I want you to tell me very quickly, what is a ratio of red dots to gray dots on the screen?

Okay. Okay. Uh I'm going to make it a lot easier for you.

So, I didn't add information to the screen. I didn't label it. I I just rearranged the information on the screen.

And all of a sudden, not only could you give me a much better estimate, but you could probably count the dots pretty quickly and give me a very precise number.

So, this is the key to meaning density. Arranging information on the page can actually communicate something.

Now, this is also really old news. There's a group of psychologists in the 1920s in Germany who studied how the brain perceives patterns and how they communicate different things.

It's called Gestalt. So, I want to share some Gestalt principles with you today.

Starting with this, these are nine dots on the page. Uh and as I bring them closer together, at some point your brain actually perceives them as a single unified whole.

If I change the shape of some of those dots, now without being conscious of it, you're perceiving this as three separate groups.

This is the law of similarity. If I change the spacing between those three groups with some motion, now without being conscious of it, you see two groups instead of three.

This is the law of common region. The Gestalt principles are ways to communicate meaning simply by arranging information on the page.

There's tons of them. You should look them up and use them in your designs. I was sharing this idea with a friend and because all of my friends are super nerds, they were like, "Whoa, what about time?

Time is just the fourth dimension, dude." And um they were joking, but I I take these things very seriously.

So I was thinking, "Okay, well maybe if we can arrange things in space and add meaning, maybe we can also arrange things in time and add meaning." Uh so this is uh a speed reading tool and I'm just going to let it play to to tell you about it.

So time turns out to be the key to the next rung on the ladder, the next definition of density.

Time density is all about how much time it takes for a user to get something out of a screen.

And once you start thinking about time as a a material, we can actually design for it and around it.

Uh some researchers in the '90s were studying the brain and how the brain perceives time and they actually identified a few thresholds that we can design around and for to change the way people perceive our designs.

So the first threshold is at 100 milliseconds and anything less than 100 milliseconds, your brain perceives as a single instant in time.

It's because of when you blink, your brain kind of turns off your recording apparatus and you might not have known that, but now you're certainly aware of the fact that you're blinking.

You're welcome. Uh so if If have anything in your interface that takes less than 100 milliseconds, don't have an animation.

Don't have a transition. Just do it instantly and your users will perceive it as happening much, much faster than it actually is.

Between 100 milliseconds and 10 seconds, we actually want to show some of those transitions and animations because we're still working with the hardware and software of hunter-gatherers looking for motion out in the jungles for signs of of prey or or predators.

Um so, this is where adding a little bit of animation to a dialogue opening or a transition state can help. And if you're starting to get more towards that 10-second line, you need to show a spinner or some kind of indeterminate loader just so that your user understands that something is happening behind the screen.

Now, I'm sure you all have seen the the beach ball of death and we know that at a certain point, we start to lose patience and our attention span is completely shot.

So, between 10 seconds and 1 minute, we want to actually show progress.

This is where a progress bar is really useful. And and that helps people connect the dots and have a little bit of that patience that we all desperately need sometimes.

Once we get past a minute, I want to encourage you to let your users just leave.

It I don't care about your engagement metrics. I I really think it's important because we don't want people to staring at the screen for minutes on time.

They could be doom scrolling Twitter instead. So, say, "Hey, I got this. I'll notify you when it's time to come back." That will help your users and the people who are looking at what you design feel like it's more dense because they were able to do something more meaningful.

So, speaking of doing something meaningful, I want you to uh find Waldo or uh for my UK friends, Wally.

And while you're doing that, I'm going to I'm going to tell you that this is a very visually dense piece of design.

It's very informationally it is certainly not very dense in time because if you're like me, you probably haven't even found Waldo yet.

You're wondering if he's even there at all. So, this is a case where we can actually change the amount of time something takes by changing the design of it.

We can subtract visual density, we can subtract meaning density, we can subtract information, and we can make it more dense in time.

So, I prepared a second Where's Waldo for you. Are you all ready?

Got it? Now, that felt much better because it took less time. It was more dense. That is the fifth and final rung of the ladder.

Before I get there, I want to show you an example of two different approaches and how density mattered. Now, when Google launched, it wasn't clear that they were going to succeed or take over the internet.

Um at the time, Yahoo was the undisputed king of finding things.

Dense by design ft. Matthew Ström-Awn (mu.design) | Config 2026

Figma

밀도는 단순한 시각적 정보량의 합이 아니라, 사용자가 투입한 시간과 공간 대비 실제로 얻는 가치를 의미하는 '가치 밀도'의 관점에서 설계되어야 합니다.

데이터 대 잉크 비율을 높이거나 게슈탈트 원칙을 적용해 정보를 재배치함으로써, 화면의 복잡도를 낮추면서도 사용자에게 더 명확한 의미를 전달할 수 있습니다.

인간의 뇌가 시간을 인지하는 임계값(100ms, 10초, 1분 등)을 이해하고, 그에 맞는 적절한 피드백과 애니메이션을 배치하면 사용자의 작업 효율과 경험을 크게 개선할 수 있습니다.

디자인 담론은 종종 누군가의 주장에 대한 비판적 사색에서 시작되며, 매튜 스트롬은 스트라이프(Stripe)의 CEO 패트릭 콜리슨이 제시했던 '블룸버그 터미널처럼 밀도 높은 인터페이스'에 대한 요구를 분석하는 과정을 통해 이 여정을 시작했습니다.

밀도의 첫 번째 단계: 시각적 밀도와 그 한계

대부분의 사람들이 생각하는 첫 번째 밀도의 정의는 '시각적 밀도'로, 화면에 픽셀이나 정보가 얼마나 빽빽하게 채워져 있는가를 의미하며, 이는 맥마스터-카(McMaster-Carr)와 같이 **목적에 부합하는 아름다운 예시부터 정보 과부하를 초래하는 끔찍한 예시까지** 존재합니다.

복잡한 그래픽에서 불필요한 시각적 요소를 제거했을 때 데이터가 훨씬 명확해지는 경험은 시각적 밀도가 때때로 **정확성을 감정적 효과와 맞바꾸는 '차트 범죄'**가 될 수 있음을 시사합니다.

정보 밀도와 데이터 대 잉크 비율

정보 밀도는 픽셀이 실제로 얼마나 많은 유의미한 정보를 전달하는가에 집중하며, 에드워드 터프티가 제안한 '데이터 대 잉크 비율'은 **그래픽의 모든 요소가 오직 정보 전달만을 위해 기능하도록 최적화하는 것**을 목표로 합니다.

1885년의 기차 시간표는 정보 밀도의 황금 표준으로, 물리적 거리와 시간이라는 두 축을 통해 이동 시간, 환승, 속도 등 방대한 정보를 직관적으로 전달하며 **잉크 사용량과 데이터 가치를 1대 1로 일치시킨 완벽한 사례**입니다.

정보 밀도를 무작정 높이는 것은 인지적 블랙홀을 만들 수 있으므로, 사용자의 뇌가 정보를 처리하는 '흡수 능력'을 고려한 **'의미 밀도'를 최적화하는 것이 인간 중심적 디자인의 핵심**입니다.

게슈탈트 원칙(근접성, 유사성, 공통 영역 등)을 활용해 정보를 재배치하는 것만으로도 사용자는 더 빠르게 패턴을 인식하고 **추가적인 라벨이나 텍스트 없이도 정보의 의미를 정확하게 파악**할 수 있게 됩니다.

시간 밀도와 인터페이스 속도 제한

시간 밀도는 사용자가 인터페이스로부터 가치를 얻어내는 데 걸리는 시간과 관련이 있으며, **뇌의 인지적 속도 제한(100ms, 10s, 1분)**에 따라 인터페이스가 반응하는 방식을 다르게 설계해야 합니다.

100ms 미만은 즉각적인 반응을, 10초 내외는 진행 애니메이션을, 1분 이상은 완료 알림을 제공하는 전략을 취함으로써 **사용자의 인내심을 존중하고 맥락을 제공하는 것**이 시간 효율적인 밀도 설계의 방법입니다.

가치 밀도: 최종적인 디자인 지표

결국 도달해야 할 지점은 '가치 밀도'로, 이는 **사용자가 얻는 가치를 투자한 시간과 공간으로 나눈 값**이며, 이는 누가 무엇을 위해 디자인을 사용하는가에 따라 근본적으로 변해야 하는 상대적 지표입니다.

스트라이프의 대시보드가 블룸버그와 달라야 하는 이유는 명확합니다. 주식 중개인을 위한 툴과 스타트업 운영자를 위한 툴은 **사용자의 맥락과 필요한 정보의 밀도가 완전히 다르기 때문**입니다.

기술적인 문제를 논하기보다 직접 디자인을 실행에 옮기는 태도가 중요하며, **사용자 경험이란 인생에서 되돌릴 수 없는 한 부분**임을 자각하고 우리가 제공하는 공간과 시간에 합당한 가치가 있는지 끊임없이 자문해야 합니다.

패트릭 콜리슨의 질문은 옳고 그름을 판가름하는 도구가 아니라, **밀도에 대한 언어를 정의하고 깊이 있는 탐구를 시작하게 만든 촉매제**였으며, 디자인의 본질은 답을 찾는 과정에서의 성장에 있습니다.

다음 발표는 UI 밀도와 시간 및 공간 속에서 가치를 극대화하는 방법에 대한 내용입니다. 다음 소개는 간결하고 핵심만 짚어서 진행하겠습니다.

맞습니다. 다음은 'Dense by design'입니다. 매튜 스트롬(Matthew Ström)님을 환영해 주십시오.

저에 대해 조금이라도 아시는 분들은 제가 글을 많이 쓴다는 걸 아실 겁니다. 어떤 글은 호기심에서 비롯됩니다. 정말 마음에 드는 아이디어를 발견해서 세상과 공유하고 싶어질 때죠.

하지만 솔직히 말해서, 대부분은 좌절감에서 시작됩니다.

누군가 한 말이 너무 거슬려서 견딜 수가 없을 때, 직접 나서서 그들이 틀렸다는 걸 증명하고 싶어지거든요.

조금 옹졸하게 들릴 수도 있겠지만, 나쁜 의도는 아닙니다. 제가 하려는 건 상대방의 주장을 최대한 논리적으로 구성한 뒤 그와 씨름해보는 것입니다.

제가 옳고 상대방이 틀렸을 때죠. 저는 제가 발견한 사실을 우월감에 젖어 마음껏 적어 내려갑니다.

하지만 때로는 제가 틀리기도 합니다. 씨름에서 지고 생각을 바꿔야 하죠. 오늘 저는 누군가의 주장이 틀렸음을 입증하려 했던 한 가지 이야기를 들려드리고자 합니다.

바로 스트라이프(Stripe)의 CEO이자 공동 창립자인 패트릭 콜리슨(Patrick Collison)입니다. 아마 들어보신 적 있을 겁니다.

그가 지금 이 자리에 없길 바랍니다. 저는 몇 년 전 스트라이프에서 일했습니다. 진심으로 말씀드리는 건데, 패트릭은 제가 함께 일해본 사람 중 가장 똑똑한 사람 중 한 명입니다.

그러니 그를 상대로 틀렸음을 입증하려 하는 건 결코 현명한 일이 아니라는 걸 상상하실 수 있을 겁니다.

하지만 저는 결국 해냈죠. 몇 년 전, 저와 제 팀은 스트라이프 대시보드를 위한 새로운 시각적 디자인 언어의 비전을 발표하고 있었습니다.

우리는 스트라이프 디자인을 훌륭하게 만든 요소들, 즉 세심한 디테일, 뛰어난 정보 계층 구조, 그리고 스트라이프의 상징인 넉넉한 여백을 강화하고 싶었습니다.

발표 도중 패트릭이 조용히 화면을 공유하기 시작했습니다. 그는 빈 구글 독스를 열고 이 사진을 붙여넣었습니다.

이게 뭔지 모르시는 분들을 위해 설명하자면, 블룸버그 터미널입니다. 세계에서 가장 가치 있는 소프트웨어 중 하나이자, 가장 보기 흉한 소프트웨어이기도 하죠.

그래서 조금 혼란스러웠지만, 발표를 마친 후에 피드백을 받고 있었습니다.

그런데 패트릭이 간단한 질문을 던졌습니다. "왜 이걸 더 이런 식으로 보이게 만들 수 없을까?"라고요.

즉시 저는 왜 그렇게 만들 수 없는지에 대한 수많은 이유를 떠올렸습니다. 왜 그렇게 만들고 싶지 않은지에 대한 이유도 많이 생각했죠.

하지만 패트릭은 상사니까요. 그래서 발표가 끝난 뒤, 팀원들과 함께 모여 이 피드백을 해석하려고 했습니다.

그가 대체 무슨 말을 하는 건지 알아내려 노력했죠. 결국 우리는 '밀도'라는 개념에 도달하게 되었습니다.

음, 블룸버그 터미널은 매우 밀도가 높죠. 그래서 아마 패트릭은 우리가 더 밀도 있게 보이길 원했던 것 같습니다.

앞서 말했듯이, 저는 누군가가 틀렸다고 단정 짓기 전에 그 사람의 주장을 가장 긍정적으로 해석해보려 합니다. 그래서 "좋아, 스트라이프 대시보드를 더 밀도 있게 만들어보자"는 관점에서 시작했죠.

그게 과연 어떤 모습일까요? 그 질문에 답하기는 매우 어려웠습니다.

왜냐하면 '밀도'라는 단어에는 정말 다양한 의미가 담겨 있기 때문입니다. 그게 정확히 무엇을 의미하는지 알아내는 데 거의 1년이 걸렸습니다.

그리고 그것이 우리가 디자인하는 사용자들에게 실제로 어떤 영향을 미치는지도요. 그래서 오늘 여러분과 함께 그 여정을 떠나보려 합니다.

이해의 사다리를 한 단계씩 올라갈 겁니다. 밀도에 관한 다섯 가지 정의를 살펴본 뒤, 꼭대기에 올라가서 아래를 내려다보며 패트릭 콜리슨이 틀렸는지 아닌지 함께 결정해 보죠.

첫 번째 단계입니다. 블룸버그 터미널을 볼 때 가장 먼저 떠오르는 것이죠. 저처럼 여러분도 "아, 정말 많은 정보가 있구나"라고 생각할 겁니다.

"화면에 픽셀이 가득하네." 대부분의 사람들이 밀도를 생각할 때 떠올리는 것이 바로 이것이라고 봅니다.

시각적 밀도를 가진 웹사이트들은 아주 많죠. 저는 크레이그리스트가 영원히 바뀌지 않았으면 좋겠어요. 지금 그대로도 아주 아름답거든요.

음, 제가 세상에서 가장 좋아하는 또 다른 웹사이트는 맥마스터-카인데, 그곳에서는 지금까지 생산된 모든 나사를 보고 구매할 수 있습니다.

이것들은 밀도의 아주 아름다운 예시들이지만, 반대로 정말 끔찍한 밀도의 예시들도 존재합니다.

이것은 실제로 존재하는 웹사이트입니다. 지금 당장 들어가 볼 수 있죠. 권장하진 않지만, 정말 놀라운 곳입니다.

시각적 밀도에는 아름다운 버전과 보기 흉한 버전이 모두 존재합니다. 그렇다면 분명 그 이상의 무언가가 있을 것입니다.

우리는 단순히 밀도에 대한 정의에 머물러선 안 됩니다. 이 그래픽이 저에게 확실한 해답을 주었습니다.

이건 신문에서 볼 법한 그래픽입니다. 잠시 시간을 드릴 테니 이 그래픽이 무엇을 말하려는지 한번 파악해 보시기 바랍니다.

여기에 시각적 밀도가 굉장히 높기 때문이죠.

하지만 핵심이 무엇일까요? 만화 같은 총알 아이콘과 전투기 실루엣, 그리고 숫자들을 무시하고 보면 차트의 진짜 의미에 다가갈 수 있을지도 모릅니다. 저는 그 모든 시각적 정보를 걷어내고 데이터가 스스로 말하게 했습니다.

여기에 시각적 밀도 없이 표현된 정확히 같은 데이터가 있습니다. 이를 보면 2013년 미국이 군사 및 국방에 지출한 비용이 전 세계 거의 모든 다른 나라의 합계보다 많다는 점을 즉시 이해할 수 있을 것입니다.

시각적 밀도를 제거하니 매우 명확해졌습니다. 페이지에서 픽셀을 덜어냈지만, 결과적으로는 더 많은 정보를 전달하게 된 것입니다.

이것이 차트 범죄이며 정확성을 감정적 효과와 맞바꿨다는 사실이 분명해집니다. 시각적 밀도는 때로 이런 결과를 초래하기도 합니다. 이것이 바로 제가 말하려는 다음 밀도의 정의로 이어집니다.

정보 밀도란 픽셀이 실제로 얼마나 많은 정보를 전달하고 있는가에 대한 것입니다.

에드워드 터프티(Edward Tufte)는 지난 40년간 이 주제에 대해 글을 써왔습니다. 그는 이를 데이터 대 잉크 비율(data-to-ink ratio)로 설명하는데, 이는 페이지에 있는 데이터의 양을 페이지에 사용된 잉크의 양과 비교하는 것입니다.

목표는 1대 1에 최대한 가깝게 만드는 것으로, 그래픽의 모든 부분이 무언가를 전달하도록 하는 것입니다.

터프티에 따르면 이것의 황금 표준은 1885년에 제작된 파리에서 리옹으로 가는 기차 시간표입니다.

정말 아름다운 차트이니 잠시 감상해 보시죠. 상단 x축에는 오전 6시부터 시작되는 하루의 시간이 표시되어 있습니다.

오후 6시부터 다음 날 오전 6시까지입니다.

그다음 Y축에는 위에서 아래로 기차역들이 나열되어 있습니다. 이 차트의 멋진 점은 기차역을 실제 물리적 거리에 맞춰 배치했다는 것입니다.

그 결정이 실제로 어떤 의미를 전달하는지 알 수 있죠.

차트를 가로지르는 대각선들은 실제 기차가 한쪽 끝에서 다른 쪽 끝으로 이동하는 궤적을 나타냅니다.

언제 출발하고 언제 도착하는지, 전체 일정을 계획하고 어디서 잠시 멈출지, 환승은 어떻게 될지, 심지어 기차가 얼마나 빨리 달리는지까지 알 수 있습니다.

어떤 기차는 매우 빨라서 선이 더 수직에 가깝고, 어떤 기차는 느려서 더 수평적입니다. 이것은 데이터 대 잉크 비율이 1대 1인 완벽한 예시입니다.

하지만 잉크의 양이 전부라면, 그래픽을 더 작게 축소해서 잉크를 줄이고 비율을 높일 수도 있을 겁니다.

그럼 한번 해보죠. 그래픽을 더 작게, 더 밀도 있게, 그리고 더 밀도 있게 만들어 봅시다.

이제 됐습니다. 완벽한 데이터 대 잉크 비율을 만들어 냈군요. 정보 밀도의 블랙홀입니다.

우리는 우주의 모든 정보를 한 점으로 응축시켜 시공간의 구조를 파괴해 버렸습니다.

분명 여기에는 임계점이 있습니다. 정보 밀도를 높이다 보면 더 이상 유용한 정보를 얻을 수 없는 지점이 생기죠.

이것을 흡수 능력이라고 합니다.

사실상 뇌의 속도 제한과 같습니다. 이것이 바로 밀도의 다음 정의인 '의미 밀도'의 핵심입니다.

디자인을 보는 사람들을 처음으로 고려하기 시작한 겁니다. 단순히 잉크의 양을 넘어, 사용자가 실제로 얼마나 많은 정보를 얻고 있는지를 묻는 것이죠.

사용자가 얼마나 이해하고 활용할 수 있을까요? 예시를 하나 들어보죠. 화면에 있는 빨간 점과 회색 점의 비율이 어떻게 되는지 아주 빠르게 말해 보세요.

자, 이제 훨씬 쉽게 만들어 보겠습니다.

그래서 저는 화면에 정보를 추가하거나 라벨을 붙이지 않았습니다. 그저 화면상의 정보를 재배치했을 뿐이죠.

그러자 갑자기 더 나은 추정치를 제공할 수 있게 되었을 뿐만 아니라, 아마 점의 개수도 빠르게 세어 매우 정확한 숫자를 알려줄 수 있게 되었습니다.

이것이 바로 정보 밀도의 핵심입니다. 페이지의 정보를 배치하는 것만으로도 무언가를 전달할 수 있다는 것이죠.

사실 이는 아주 오래된 이야기입니다. 1920년대 독일의 심리학자 그룹이 인간의 뇌가 패턴을 어떻게 인식하고 그 패턴들이 어떻게 서로 다른 의미를 전달하는지 연구했거든요.

이를 게슈탈트(Gestalt)라고 합니다. 그래서 오늘 여러분과 몇 가지 게슈탈트 원칙을 공유하고자 합니다.

여기 아홉 개의 점이 있습니다. 점들을 서로 가까이 배치할수록 여러분의 뇌는 어느 순간 그것들을 하나의 통일된 전체로 인식하게 됩니다.

만약 점들의 모양을 바꾸면, 여러분은 의식하지 못하는 사이에 이를 세 개의 분리된 그룹으로 인식하게 됩니다.

이것이 유사성의 법칙입니다. 만약 세 그룹 사이의 간격을 움직임을 통해 조정하면, 여러분은 인지하지 못한 채 세 그룹이 아닌 두 그룹으로 보게 될 것입니다.

이것이 공통 영역의 법칙입니다. 게슈탈트 원칙은 페이지에 정보를 배치하는 것만으로 의미를 전달하는 방법입니다.

이런 원칙은 아주 많습니다. 꼭 찾아보시고 디자인에 활용해 보세요. 제가 이 아이디어를 친구에게 공유했는데, 제 친구들은 다들 엄청난 너드들이라 이렇게 말하더군요. "와, 그럼 시간은 어때?

시간은 단지 4차원일 뿐이잖아." 농담이었지만, 저는 이런 것들을 매우 진지하게 받아들입니다.

그래서 생각했죠. "공간에 사물을 배치해서 의미를 더할 수 있다면, 시간에 따라 사물을 배치해서도 의미를 더할 수 있지 않을까?" 그래서 여기 속독 도구를 준비했는데, 어떻게 작동하는지 한번 보시죠.

시간이야말로 밀도의 다음 단계, 즉 밀도의 새로운 정의를 여는 열쇠임이 밝혀졌습니다.

시간 밀도란 사용자가 화면에서 무언가를 얻어내는 데 걸리는 시간을 의미합니다.

일단 시간을 하나의 재료로 생각하기 시작하면, 우리는 그것을 바탕으로, 그리고 그것을 중심으로 디자인할 수 있게 됩니다.

90년대에 뇌를 연구하던 일부 연구자들은 뇌가 시간을 어떻게 인지하는지 연구하면서, 우리가 디자인할 때 고려해야 할 몇 가지 임계값을 발견했습니다. 이를 통해 사용자가 우리의 디자인을 인지하는 방식을 바꿀 수 있습니다.

첫 번째 임계값은 100밀리초입니다. 100밀리초 미만의 시간은 뇌가 단일한 순간으로 인식합니다.

눈을 깜빡일 때 뇌가 일종의 기록 장치를 잠시 끄기 때문입니다. 아마 몰랐을 수도 있지만, 이제 눈을 깜빡이고 있다는 사실을 확실히 의식하게 되셨을 겁니다.

천만에요. 인터페이스에서 100밀리초 미만이 걸리는 작업이라면 애니메이션을 넣지 마세요.

전환 효과도 넣지 마세요. 그냥 즉시 처리하면 사용자는 실제보다 훨씬 더 빠르게 작업이 완료된다고 느낄 것입니다.

100밀리초에서 10초 사이에는 전환이나 애니메이션을 보여주는 것이 좋습니다. 우리는 여전히 정글에서 먹이나 포식자의 신호를 찾던 수렵 채집인의 하드웨어와 소프트웨어를 가지고 있기 때문입니다.

Dense by design ft. Matthew Ström-Awn (mu.design) | Config 2026

스크립트