<aside class="sidebar__right">
            <nav class="toc">
              
            </nav>
            
            <nav class="toc-custom">
              
                



              
            </nav>
          </aside>
        
        <p>약 2개월에 걸친 콘텐츠 디자인 시스템 구축 과정을 짧게 소개합니다. 평소 디자인 시스템에 관심이 많았지만 직접 해본적은 없었고 대부분의 사례는 프로덕트 디자인 시스템이라 막연함이 컸어요. 일 벌리기 좋아하는 성격이지만 작업 중간 중간 과거로 돌아가서 제 선택을 말리고 싶을 정도로 힘들었어요.</p>

<h3 id="디자인-시스템-불안">디자인 시스템? (불안)<a class="header-link" href="#디자인-시스템-불안" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h3>

<p>시스템,매뉴얼,가이드… 생각만 해도 마음이 답답해지는 것이 단어를 생각하면 연상되는 이미지 자체가 내가 하고싶은 걸 막는 장치처럼 느껴져요. 그래서 작업을 하며 가장 중요하게 여겼던 가치는 약속입니다.  굳이 풀어보자면 ‘그렇게 하지 말랬지 이제 이렇게 하기로 약속해’ 가 아니라 ‘우리 앞으로 이렇게 하기로 약속해요’가 될 수 있도록 제약 처럼 느껴지는 것은 걷어내고 같은 말이라도 좀 더 부드럽게 전달 될 수 있게 표현에 신경썼습니다.</p>

<p>궁극적인 목표는 소스를 찾고 가공하는시간을 줄여주어 더 중요한 곳에 시간을 사용하게 하고자 하였고 여기 디자이너 자주바뀌나봐 라는 말을 <del>들으면 슬프니까</del> 듣지 않도록 여러명이 작업 해도 한 사람이 작업한것처럼 통일성을 갖추고자 했어요. 한 명의 디자이너만 있다면 톤앤 매너와 가이드라인이 머리속에 있기 때문에 문서화 시키는 것보다 혼자하는 것이 효율적이지만 두명,세명이 되고 나서의 관리 비용은 훨씬 많이 들어갈것으로 예상했기 때문에 미리 대비하고자 했습니다.</p>

<h3 id="계획">계획<a class="header-link" href="#계획" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h3>

<p>이미 많은 스타트업의 디자이너 분들이 먼저 고민하고 실행하신 사례가 있어서 리서치하며 툴 선택, 구성에 많은 도움을 받았습니다.</p>

<p>‘너는 다 계획이 있구나!’ 저도 다 계획이 있었습니다. <strong>범용성을 위해 제작에 사용할 툴 부터, 공유 시점 / 세부 구성 / 시스템 배포&amp;관리 방법을 구체적으로 계획했어요.</strong> 회사 계정으로 어도비를 구독중이었기 때문에 소스 제작&amp;파일 관리&amp;공유는 어도비 툴과 클라우드를 선택했습니다.(구독중인 라이센스에 포함 된 클라우드 공간이 무려 1TB..) 제작이 필요한 항목은 ‘디자인 원칙, 벡터 그래픽 소스, 컬러 팔레트, 타이포그래피, 콘텐츠 가이드 라인, 시스템 문서화’로 좁혔고요.</p>

<h3 id="제작">제작<a class="header-link" href="#제작" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h3>

<ul>
  <li>작업하는 ‘나’도 쉽게 쓰도록 만들자 수정&amp;가공이 편하게 만들자. 벡터 그래픽을 만들면서 가장 신경썼던 부분입니다. 쉽게 쓸 수 있도록 object,object Set, Face 등 그룹을 세분화 하고 조합이 쉽도록 인물 일러스트의 하체와 상체를 분리(?)하고. 돈, 하트, 말풍선, 화살표 등.. 가공 없이 바로 쓸만 한 것들을 낱개와 조합 형태로 제작했습니다. 수정이 쉽도록 모든 패스는 살려두었고요.</li>
  <li>컬러 팔레트와 타이포그래피는 눈이 많이 힘들었습니다. 하늘 아래 같은 핑크 없다고.. 조금만 수치가 달라져도 전체적인 인상이 바뀌었거든요. 먼저 베이스 컬러를 지정한 다음 채도와 명도를 조금씩 조절하며 스케일을 만들어나갔습니다. 같은 컬러라도 표현하는 사람에 따라 받아들여지는게 다르기 때문에 컬러 네임도 붙여주었어요. (”이거보다 화~한 컬러..” 방지) 타이포그래피는 자주 표현하게 될 분위기를 그룹 지어놓고 분위기에 맞는 타입페이스를 선별 한 다음, 같은 타입페이스 중에서도 우리 서비스와 가장 잘 맞는 폰트를 선택하고 발전시켜 나갔습니다. 기능에 따른 스케일 / 대비 / 모바일 환경 사용성을 가장 신경썼던 것 같아요.</li>
  <li>가이드라인은 앱 내 콘텐츠에 대해 정의하고 있어요. 업무 연결성에 도움을 주는 항목이라 좀 더 신경이 쓰인건 사실이고요. 노출 지면에 따라 세부 항목들을 다르게 설계했고, 지켜야 할 것들은 최소화 하고 가능성은 열어두었습니다. 지금의 가이드 라인은 옷의 사이즈 정도만 정하고 있는거죠. “우리 자유롭게 입고싶은 대로 입자! 근데 질질 끌거나 꽉끼는 옷은 입지 말자” 정도!</li>
  <li>디자인 원칙은 불필요한 커뮤니케이션을 줄이며 통일성을 높이기 위해 필요하다고 생각했어요. 진짜로 필요한 일에 집중할 수 있게 될거라고 기대했거든요. 직관적이면서 3가지 항목을 넘기지 않았으면 좋겠다고 생각했고요. 우리 서비스를 나타낼 수 있는 단어들을 펼쳐놓고 수렴하며 하나씩 정했습니다.</li>
  <li>마지막으로. 문서 작업은 노션이 짱이지 라고 생각하며 문서화 시키는 작업이 90% 이상 되었을 때쯤, 시스템과 스타일가이드를 위한 웹 사이트 제작 서비스 <a href="http://zeroheight.com/">zeroheight.com</a>를 알게 되어버렸습니다. 눈물을 머금고 하나씩 옮기기 시작했고 결국 최종 아웃풋은 웹 사이트 형태로 제작하게 되었습니다.</li>
</ul>

<h3 id="회고">회고<a class="header-link" href="#회고" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h3>

<p>그래서 잘 쓰고있냐 질문을 해보면.. 반은 맞고 반은 모르겠습니다. 버튼과 같은 컴포넌트의 경우 정해진 컬러팔레트 안에서 고정적으로 사용해야 하기 때문에 시스템을 도입하는 것이 훨씬 효율적이지만, 마케팅 성격이 짙은 콘텐츠 디자인을 할 때 컬러 시스템을 도입하는 것은 오히려 장애물이 되더라고요. 어떤 컬러를 사용해야 할 지 고민이 되는 경우에는 지침서가 될 수 있겠지만 컬러 코드를 가져온 다음 느낌을 보는 것 보다 어도비 툴 내에서 다이렉트로 수정하며 느낌을 보는게 더 빨랐습니다. 노출 지면에 따라 (메인 배너, 스킬 배너) 가이드를 다르게 운영하면서 문제는 해결되었지만 컬러 팔레트를 구성하는데 많은 공수가 들어갔기에 투자 대비 효율이 조금 아쉽습니다.</p>

<p>아직 배너 작업을 많이 해보지 못한 상태에서 제작했기 때문에 벡터 그래픽의 경우, 어떤 게 필요하고 자주 쓰이는지 모르는 상태였습니다. 사주, 타로, 전생, 운세 등 추상적인 항목들을 시각화하는 것의 예측 가능성이 낮기도 했고요. 그러다 보니 필요 이상의 소스를 만들게 되었어요. 어떤 소스가 필요한지, 어떤 소스가 필요하게 될지 러프하게라도 그룹 지은 다음 소스를 제작했으면 더 좋았겠다고 생각이 들었습니다. 우선 만들어 놓은 다음 계속해서 소스를 추가해 나갈 생각이었지만 우선 순위도 높지 않고.. 그래픽 제작에 온전히 투입할 수 있는 리소스가 없다는 게 문제였어요. 제 몸은 한 개라는 걸 인정하고 마음속 백로그에 넣어두었답니다.</p>

<p>그렇지만 타이포그래피나 가이드라인, 리소스 센터는 잘 사용하고 있습니다. 어떤 폰트를 사용할지 고민하는 시간이 많이 줄었고요. 배너의 통일성도 한 층 높아졌습니다. 로고나 폰트 파일을 그때그때 찾아야 하는 번거로움도 줄었고요. 종종 급한 경우 다른 직군의 동료분들이 제작된 가이드라인을 통해 배너를 제작해 주시기도 하는데 그럴 때마다 놀랍기도 하고 뿌듯했습니다. 또한 말로 설명하기 힘든 부분을 시각 자료로 보여줄 수 있게 되어서 담당 디자이너가 공석인 경우에도 업무 연결성이 높아졌습니다. 이 부분과 함께 스타일 가이드와 디자인 원칙은 신규 입사자 온보딩에 많은 도움을 줄 것으로 확신하고 있습니다.</p>

<p>아직 부족한 점이 많지만.. 업무 효율을 극대화 시키고 사람과 사람을 유기적으로 이어줄 수 있는 디자인 시스템을 만들고 싶어요. 버릴 건 버리고 보완할 건 보완하며 조금씩 개선하다보면 충분히 가능하지 않을까요?</p>

🔨 콘텐츠 디자인 시스템 제작기

주소

더 나은 상품 소개서를 준비하고 있습니다. 상품 관련 문의는 아래 문의하기 버튼을 이용해 주시기 바랍니다.