UI를 디자인을하면서 보다 체계적으로 구성하는 방법 (How To Be More Organized While Designing UI)

작성된지 오래된 글입니다 (2016년 4월 작성됨) 편하게 읽고 느낌만 가져가세요 ㅋ

디지털 디자인 분야에서 4년을 일한 후에 저는 정보를 구분하고 정리하는데 몰두했습니다. 이로 인해 사용자 인터페이스 디자인을 위한 체계적인 접근 방식이 만들어지게 되었습니다.
이는 객체 지향적이고 프로그래밍 지향적인 접근 방식으로, 보편적인 다양한 아이디어를 모아 놓은 것입니다. 원하는 디자인 소프트웨어로 작업하거나 코딩할 때 사용합니다. 디자이너를 프로그래머와 연결하여 같은 페이지에 올릴 수 있습니다. 즉, 의사 소통을 통해 더 많이 이해하고 더 나은 것을 만들 수 있습니다.
이러한 접근 방식은 후반 디자인 단계에서 주로 사용되며, 보통 프로젝트를 마무리하는 동안 시각적 시스템의 관계에 대해 생각할 시간이 더 많습니다. 프로토타이핑과 와이어프레임 작업을하는 동안 프로젝트의 초기 단계에서 활용하면 디자인과 프로그래밍 모두에 더 쉽게 적응할 수 있습니다.
물론, 시각적 자료 수집의 일반적인 아이디어를 디자인 과정에 적용하는 것은 오래 된 뉴스입니다. 저는 Material Design, SCSS variables, Macaw, Origami, Atomic Design 및 다양한 패턴 라이브러리를 통하여 영감을 받았습니다.

나의 의도는 순수한가요?

더 큰 규모의 프로젝트를 작업하는 동안 구조가 부족하기 때문에 Sketch의 번거로운 디자인 과정에 지쳤습니다. 최신 업데이트 (nesting symbols 같은)와 Craft의 스타일 플러그인은 올바른 방향으로 진행되었지만 완벽한 워크 플로우에 필요한 수준에는 미치지는 못합니다. 더 나은 결과를 얻으려면 다음과 같은 몇 가지 예가 있습니다.
변수 개요를 지우십시오. (Clear Overview Of Variables)
20가지의 다양한 text sizes 또는 50가지 shades of grey으로 끝내버리는 것을 방지하기 위해 제가 사용하는 rounded corners, font sizes, font colors 또는 background colors의 종류를 좀 더 명확하게 파악하고 싶습니다.
presentation
이렇게 엉망인 건 뭔가요?
스타일의 그룹화 (Grouping Of Styles)
디자인의 어느 부분이 변수(variables)의 특정 변화와 연관되어 있습니까? 어떤 글꼴이 특정한 경우에 적합한지 정의하고 싶습니다. UI 스타일의 경우 sans-serif, 큰 텍스트의 경우 serif를 사용하여 가독성을 높입니다. 또 다른 예 : 두 가지 유형의 타이포그래피 스타일 - 밝은 배경을위한 버전과 어두운 버전을위한 버전.
presentation
음…어떤 글꼴을 사용해야 하나요?
변수의 짝짓기 (Pairings of Variables)
저는 Karla의 모든 16px font sizes에 paragraph, a note, an item description 또는 a quote와 관계없이 1.2의 높이(height)를 갖기를 원합니다.
presentation
font-weight/line-height combo를 동일하게 유지하려고하는 것은 힘든 일입니다.
하나의 변수만 변경하기 (Changing Only One Variable)
50개 이상의 artboards로 프로젝트 중간에 작은 변화를 만들고 싶고 모든 것을 거치고 싶지 않습니다. 모든 headings의 font를 한곳에서 변경하고 각 heading 스타일에서 동기화된 것을 본다고 가정해 봅시다.
presentation
하지만 headline font을 바꾸고 싶습니다 ...
저는 main font color, the secondary font color 및 disabled font color을 사용하는 것과 같은 모든 프로젝트에서 동일한 작업 과정을 계속 반복한다는 것을 깨달았습니다. 저는 또한 제가 만든 시각적 계층 구조에 대해 아무런 통제력이 없다는 것을 깨달았습니다. 그래서 제가 가장 많이 적용한 변경 사항을 자동화하려고 했습니다.

기본 원리들 (Basic Principles)

모든 것이 대상이다. (Everything Is An Object)
모든 레이아웃은 eaders, footers, headlines, buttons, dropdowns, links 등의 objects로 구성됩니다. 이러한 objects를 별도의 독립체로 생각하고 독자적으로 디자인 할 수 있습니다.
presentation
모든 것을 위한 속성 (Properties for Everything)
모든 것은 고유 한 속성을 가지고 있습니다. 모든 headline에는 자체 color, size 또는 line height가 있습니다. 모든 button에는 특정 size, background color 또는 font가 있습니다. 이것이 코드에서 작동하는 방법입니다. 디자인을 할 때도 이런 식으로 생각하면 어떨까요?
presentation
속성의 상속 (Inheritance Of Properties)
여기 진짜 즐거움이 있습니다. 기본적인 구성 요소를 만들 수 있습니다. 견본 변수(swatches variables)-예 : $ font-size-s, $ gray-500, $ border-radius-s 또는 $ sans-serif.
이 모든 것이 결합하여 기본적으로 구성된 변수 라이브러리를 구성합니다. 변수 라이브러리를 결합하여 시각적인 계층을 만들 수 있습니다.
presentation
몇 가지 기본 구성 요소
그런 다음 $font-size-main, $color-link-secondary, $border-radius-secondary 또는 $font-headlines와 같은 몇 가지 categories 변수를 만들 수 있습니다. 그들은 견본(swatches)과 당신의 objects 사이의 중개자로 행동 할 것입니다. SCSS 에서처럼 다양한 변수를 다양한 용도와 상황에 할당하십시오.
마지막으로 objects — buttons, paragraphs, headlines, list item names, list item descriptions, quotes, etc…그리고 voilà 등 개체에 상속 된 변수를 적용합니다.
presentation
모든 것을 위해 준비하십시오. (Be Prepared For Everything)
객체의 가능한 모든 유형 (main, secondary, clear or lined button) 또는 상태 (disabled, normal, hover button)를 디자인 할 수 있습니다. 약간의 노력이 필요하지만 시간이 많이 걸리지 않으며 준비가됩니다. 어쩌면 나중에 고마워 할 수도 있겠습니다.
presentation
가능한 모든 유형의 객체를 디자인 할 수 있습니다.

디자인시 사용하는 방법 (How To Use This While Designing)

기본적인 접근법은 여러분의 물건을 정리하고 모든 관계에 대해 생각하는 것입니다. 다음 단계는 이 시스템을 지원하기 위한 도구를 해킹하거나 개선하여 생산성을 높이는 것입니다.
예를 들어, SCSS 에서처럼 스케치에서 스타일을 상속 할 수 없습니다. 그래서 모든 시각적 조합을 위한 시각적 스타일을 만듭니다.
presentation
사용하고있는 모든 시각적 조합에 대해 시각적 스타일을 만듭니다.
목록 항목 설명의 크기만 변경하려면 특정 항목만 변경하려는 경우에도 동일한 텍스트 스타일을 사용하는 모든 개체를 변경해야 합니다. 한 번에 font-size-s를 사용하는 모든 객체를 변경해야합니다.
프로젝트의 시각적 관계를 보고유지할 수 있는 node based editor(예:Mindnode)를 상상해 보십시오. SCSS파일을 읽고 스케치에 연결하여 공유 스타일을 업데이트할 수 있습니다.
presentation
이와 같은 node 기반 editor는 시각적 계층을 유지하는 데 도움이 될 수 있습니다.
사용 사례 (Examples Of Use)
presentation
글꼴 (Fonts)
UI및 headlines에 대해서는$sansrif font, 긴 텍스트에 대해서는$serif font, 더 화려한 경우에 대해서는$display font를 사용할 수 있습니다.
presentation

presentation
글꼴 크기 및 선 높이 (Font Sizes and Line Heights)
이 예제에서 line heights는 특정 font sizes의 특정 fonts과 쌍을 이룹니다(예 : 12px Karla font마다 line height가 1.8이어야하며 14px의 line height는 1.75, 16px는 1.6 등...). 이것들을 따로 생각할 수 있지만 이것들은 필연적으로 연결되어 있습니다. Font 크기가 클수록 상대적으로 큰 것처럼 보이기 때문에 더 작은 line height가 필요합니다. 또한 한줄(line) 객체( line height:1)와 여러줄(line) 객체(특정 line height 포함)를 구분하여 해당 패딩을 적절하게 설정할 수 있습니다.
presentation
색 (Colors)
앞서 언급했듯이, UI 타이포그래피 색상을 선택할 때, 프로젝트 전체에 걸쳐 연속성 있게 basic, secondary 및 disabled font 색상이 항상 필요하다는 것을 깨달았습니다.
사용하는 색상을 음영 처리하여 기본 색상 팔레트를 정의하십시오. 스펙트럼의 끝에서 더 많은 색상의 색조를 선택하십시오 - 밝거나 어두운 인터페이스에서 더 세밀한 세부 사항을 위해 필요합니다.

왜 이렇게 생각하는가? (Why Think Like This)

presentation
쉬운 유지 보수 (Easier to Maintain)
관계 시스템과 스타일을 작성하면 작업을 보다 효과적으로 제어할 수 있습니다. 개체 모음은 개요 또는 설명서 역할을 하므로 매우 빠르게 변경할 수 있습니다. 빈 페이지로 시작하는 것보다 일부 개체에서 페이지를 조합하는 것이 더 쉽습니다. 또한 한동안 프로젝트를 수행하지 않은 후 새 디자인을 하는겨우 또는 다른 디자이너에게 제출해야 하는 경우 등 작업이 더 쉽워집니다.
presentation
일관성 향상 (Better Consistency)
기본적인 개체 및 매개 변수 집합을 사용하면 처음부터 만들 때 사용할 단락, 헤더, 바닥 글, 모드, 버튼 또는 목록 항목의 유형을 적게 사용해야 합니다. 라이브러리의 항목을 먼저 사용하고 작동하지 않으면 새 개체를 만듭니다. 이를 통해 작업의 일관성을 높일 수 있습니다. 다시는 거의 동일한 텍스트 색의 6가지 유형을 사용할 수 없습니다.
presentation
이해하기 쉽다. (Easier To Understand)
일관성 또한 사용자에게 더 좋습니다. UI에서 올바른 스타일을 사용하는 것은 그들을 당황하게 하지 않습니다. 즉, 인터페이스의 복잡성에 따라 단순성의 정도가 달라진다는 것입니다. 단순한 설계의 경우 복잡한 내용의 페이지를 쉽게 망칠 수 있습니다.

예제 파일

presentation
시각적 계층 구조를 만드는 방법에는 무수히 많은 옵션이 있습니다. Sketch 파일을 다운로드 할 수 있습니다. (여기에는 Karla font가 필요합니다 - Google Fonts에서 다운로드 할 수 있습니다).
시각적 계층 구조를 만드는 방법에는 수많은 옵션이 있습니다. 여기에서 내 예제가 포함된 스케치 파일을 다운로드할 수 있습니다(여기에서 Google글꼴을 다운로드할 수 있는 Karla글꼴이 필요함).
–––––
결론적으로, 어떻게 하면 이러한 접근 방식을 완벽하게 지원하기 위해 디자인 도구를 해킹할 수 있을까요? 시각적 시스템을 만들 때 어떤 접근 방식을 사용하십니까? 당신의 의견을 듣고 싶습니다.

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.
제 번역 블로그를 자주 찾아 주셔서 감사드립니다.저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
혹시나 저랑 함께 "보버"에서 디자인 번역 공장 연재를 해주실 유저분 계시면 리뷰나, 페북 어디에서든 메시지 주세요!!! 외롭습니다
함께 작업했으면 좋겠습니다^^ 연락 간절히 기다립니다.



번역 글 추천(신청) 받습니다.
안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.