brunch

You can make anything
by writing

C.S.Lewis

by Maudie Oct 23. 2023

Content-first mindset

Content-first design

하나, 기본적으로 콘텐츠와 디자인은 긴밀하게 연결되어 있습니다.

둘, 디자인은 콘텐츠를 더 이해하기 쉽게 만드는 맥락을 제공합니다.





Content-first

A positive trend is the content-first approach. Most writers know the struggle of trying to get in on the action early in the process; many designers and PMs are beginning to realize that thinking about copy and information architecture earlier rather than later ends up creating a better outcome.

긍정적인 동향 중 하나는 콘텐츠 중심적인 접근 방식입니다. 대부분의 작가들은 프로세스 초기에 참여하려는 노력을 알고 있습니다. 많은 디자이너와 프로젝트 매니저들은 콘텐츠 내용 및 정보 구조에 대한 생각을 나중이 아니라 일찍 하면 더 나은 결과를 만들어낼 수 있다는 것을 깨닫고 있습니다.


This doesn’t mean content needs to be perfect in the wireframe stage; it just means that asking the basic question of copy early on can have a strong influence.

이것은 와이어프레임 단계에서 콘텐츠가 완벽해야 한다는 것을 의미하는 것은 아닙니다. 단지 초기에 기본적인 콘텐츠 내용에 대한 질문을 하는 것이 강력한 영향을 미칠 수 있다는 것을 의미합니다.


▼ 더 자세히 보기

https://medium.com/design-bootcamp/5-ux-writing-trends-of-2023-bf1bf9475b1




what you want to say and

how to say it

In order for your website or application to succeed, you need to have the right content to meet your goals. 웹사이트 또는 애플리케이션이 성공하려면 목표를 달성하기 위한 콘텐츠가 필요합니다.


What needs to be said? 어떤 내용이 전달되어야 하는가?

From an industry standpoint, what needs to be on the page? 해당 산업의 관점에서 페이지에 어떤 내용이 반드시 포함되어야 하는가?

Functionally, what is required? 기능적으로 어떤 요소가 필요한가?

How does this page fit into the customer journey and what step comes next? 이 페이지는 고객 여정에 어떻게 맞춰지며 다음 단계는 무엇인가요?



▼ 더 자세히 보기

https://balsamiq.com/learn/articles/wireframes-content-modeling/




Content is design

Content is design: the type of content you use, the tone of it, the length of it. All of this plays a big role in shaping your user’s experience. Focusing on what users will consume on your site — before sketching a wireframe, or writing a line of code, will allow you, the creator, to focus on what really matters — delivering content to the user in a clear, concise and hopefully delightful way.


콘텐츠는 디자인입니다: 사용하는 콘텐츠의 종류, 톤, 길이 이 모든 것이 사용자의 경험을 형성하는 데 큰 역할을 합니다. 와이어프레임을 그리거나 코드를 작성하기 전에, 창작자로서 무엇이 정말 중요한지에 중점을 두어야 합니다. 이는 사용자에게 명확하고 간결하며 기쁨을 주는 방식으로 콘텐츠를 전달하는 데 집중하는 것입니다.



Marketing site homepage / Gallery page / Text heavy page



▼ 더 자세히 보기

https://balsamiq.com/learn/articles/content-first-design/




design gap

The 'design gap' happens when a designer and writer work on the same project, but don't communicate with each other.

'design gap(디자인 갭)'은 디자이너와 작가가 동일한 프로젝트에 참여하지만 서로 의사 소통을 하지 않을 때 발생합니다.


I think the most visible symptom is when too much lorem ipsum starts appearing in mockups, or when bringing the content and design together results in a jumbled mess that doesn't quite make sense.

가장 눈에 띄는 증상은 모의 구상에서 lorem ipsum이 과도하게 나타날 때이거나 콘텐츠와 디자인을 통합하면 이해하기 어려운 혼란스러운 레이아웃이 나타날 때입니다.


Basically, content and design are closely linked. Design provides context that makes the content more understandable. If the two don't complement each other, you end up with a mess.

기본적으로 콘텐츠와 디자인은 긴밀하게 연결되어 있습니다. 디자인은 콘텐츠를 더 이해하기 쉽게 만드는 맥락을 제공합니다. 두 요소가 서로 보완되지 않으면 혼란스러운 결과물이 나올 수 있습니다.



https://balsamiq.com/company/news/john-mcgarvey/





UX라이터가 되기 전, 나는 콘텐츠를 기획하고 만드는 사람이었다. 콘텐츠를 정하고, 그 안에 내용을 담아 디자이너에게 가져가면 그때부터 진짜 콘텐츠를 만드는 기분이 들곤 했다.


디자인 작업을 거듭할수록 최초에 기획했던 내용 중 일부는 빠지고 일부는 추가됐다. 무엇을 넣고 뺄지는 어떻게 디자인하느냐에 따라 기획자와 협의 가능한 접점을 찾아 결정하는 프로세스였고, 그 과정을 거치면 텍스트와 디자인이 마치 한 몸처럼 자연스럽게 흘러간다는 걸 느낄 수 있었다. 맥락이란 글과 글의 이어짐 뿐만 아니라 글과 디자인의 연결이기도 했으니까.



맥락이란 글과 글의 이어짐 뿐만 아니라
글과 디자인의 연결



현재는 콘텐츠 자체를 기획할 일이 거의 없다.

이미 기획된 콘텐츠 안에서 이를 UX라이팅 관점으로 검토한다거나 워싱이란 수순을 밟는 게 일반적이다. 그런데 가끔, 특정 콘텐츠가 잘못된 디자인 틀에 놓여있을 때 나름 콘텐츠 기획자가 되어, 혹은 디자이너가 되어 여러 가지 생각을 해본다.


이 콘텐츠를 왜 A 컴포넌트에 반영했을까?

A에 있는 이 콘텐츠에는 흐름상 필요한 정보가 충분히 담겨 있을까?

여기에 꼭 이 컴포넌트가 필요할까?

A 텍스트에 A 그래픽은 시의적절할까?

주목도를 높이기 위해 어떻게 표현하면 좋을까?


이렇게 저렇게 생각하다 보면, 기획자나 디자이너들과의논하고픈 이슈가 쌓인다. 너무도 당연한 과정이지만, 아쉽게도 현실에선 늘 갈증을 느낀다.

그런데 오늘 그 갈증을 해소해 줄 아티클을 발견했다. 바로 Content first design에 관한 이야기다. 그동안 머릿속에 품고 있던 개념이었는데 반가웠다. 나중에 좀 더 톺아봐야지 하는 마음에 일부만 브런치에 담아둔다. 원본 자체가 영문이라, 일부 인상 깊었던 부분만 번역·발췌했다. 번역은 챗GPT의 도움을 받았다. 어설프지만, 이해하는 데는 지장 없음.  

매거진의 이전글 해요해요만으론 친근할 수 없거든요
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari