개발자를 위한 디자인 접근 방법

같은 프로젝트와 제품에 대해 작업하더라도 개발자와 디자이너는 사일로에서 서로 떨어져 작업하는 경우가 많습니다. 개발자는 디자인을 종종 제품의 기능과 비교할 때 중요하지 않은 부차적인 것으로 간주합니다.

그런 생각은 개발자-디자이너 관계에 해로울 수 있습니다. 디자인에 대한 기본적인 이해가 없으면 개발자가 경력을 쌓지 못하게 하거나 디자이너가 없다는 이유로 프로젝트를 추구하는 데 방해가 될 수 있습니다.

개발자가 디자인을 배워야 하는 이유

디자인과 개발은 종종 별개의 분야로 생각되지만, 두 가지 모두를 마스터한 사람들이 있습니다. 누군가가 디자이너 나 개발자가 되는 것에만 관심이 있더라도(둘 다 아닌) 다른 분야의 기본 사항을 배우는 것은 가치가 있습니다.

개발자가 디자인을 배우거나 최소한 디자인 지식의 기본 기반을 개발하려는 몇 가지 이유가 있습니다.

우선 소규모 팀에는 전담 디자이너가 없을 수 있습니다. 게다가, 완전히 스스로 프로젝트를 처리하고 싶어하고 디자이너를 고용할 여유가 없는(또는 다른 곳에 돈을 쓰고 싶어하는) 개발자가 있습니다. 적어도 디자이너를 고용할 수 있을 때까지 버틸 수 있을 만큼 충분히 자신의 제품을 디자인하는 방법을 배우는 것은 귀중한 자원입니다.

개발자가 디자인을 배우는 또 다른 큰 이유는 디자이너와 더 효과적으로 작업할 수 있기 때문입니다. 디자이너가 완성된 제품에서 픽셀 단위로 완벽할 것으로 기대하는 웹사이트 또는 앱용으로 완전히 디자인된 파일을 넘겨주는 것은 매우 실망스러운 일입니다.

개발자가 디자인의 기본을 이해하지 못한다면 UI를 특히 사용자 친화적으로 만들고 의도치 않게 프로젝트의 사용자 경험을 방해하는 작은 세부 사항을 간과할 수 있습니다. 디자이너가 수많은 수정 사항을 보내면 프로젝트 완료 속도를 늦추는 것은 물론이고 개발자-디자이너 관계에 부담을 줄 수 있습니다.

학제 간 팀 간의 관계와 팀워크를 개선하기 위해 개발자는 순전히 개발 관점에서 보는 것이 아니라 "디자이너의 눈"을 통해 디자인을 보는 방법을 학습함으로써 스스로에게 유리할 것입니다. 해당 기술을 마스터하면 프로젝트가 크게 향상됩니다.

디자인 마인드셋 만들기

너무 자주 디자인을 배우는 개발자는 디자인을 지원하는 기본 원칙보다는 자신이 좋아하고 모방하려는 디자인의 미학에 너무 많은 초점을 맞춥니다. 그들은 버튼의 색상과 크기, 특정 글꼴, 테두리가 사용되는 방식 등을 선택의 이유 를 이해하지 못한 채 봅니다.

그들은 장식하는 공간의 목적을 이해하지 못한 채 벽에 페인트를 뿌리고 공간을 장식하기 시작합니다.

디자이너가 결정을 내리는 이유 이면의 원칙을 이해하고 존중하는 것이 중요합니다. 디자인을 처음 접하는 사람이라면 누구나 좋은 디자인을 구성하는 원칙과 이론(게슈탈트 원리 및 기본적인 시각적 계층 구조와 같은 것)을 완전히 이해한 후 모든 곳에 페인트를 뿌리기 시작해야 합니다.

즉, 개발 배경이 있든 없든 새로운 디자이너가 이론에 얽매이는 경우도 흔합니다. 그들은 배우고 있는 것을 실제로 적용할 수 없는 것에 대해 배우고 생각하는 데 너무 많은 시간을 보냅니다.

디자이너와 개발자 모두 완벽주의자 경향이 있습니다. 그러나 완벽 하기 전에 설계를 밀어내는 것(절대 불가능할 가능성이 높기 때문에)은 프로세스에서 중요합니다. 특히 새로운 디자이너는 불안을 극복하고 작업을 수행하고 받는 피드백에서 배워야 합니다.

디자인을 진정으로 배우는 가장 좋은 방법 중 하나는 다른 사람의 디자인을 재현해 보는 것입니다. 작동하는 것과 작동하지 않는 것을 구별하고 특정 디자인이 매력적인 이유를 파악하는 것은 새로운 디자이너나 개발자가 배울 수 있는 가장 가치 있는 기술 중 하나입니다. 기존 디자인에 고유한 스핀을 적용하는 것은 업계에서 일반적입니다(Dribbble의 "Rebound" 기능으로 입증됨).

브라우저에서 디자인하기

많은 디자이너가 브라우저에서 직접 디자인하는 것을 거부합니다. 일반적으로 최소한 기본 HTML 및 CSS 코드를 작성하는 데 익숙해야 함을 의미하기 때문입니다. 이것이 바로 개발자가 디자인을 시작하는 데 적합한 이유입니다. 개발자는 이미 코드 작성에 익숙합니다.

브라우저에서 디자인하는 데 도움이 되고 디자이너와 개발자 모두의 삶을 더 쉽게 만들 수 있는 도구가 있습니다. 색상 팔레트 선택에서 다른 사이트의 CSS 및 HTML 코드 탐색에 이르기까지 모든 작업에 간단한 브라우저 플러그인을 사용할 수 있습니다.

브라우저에서 바로 모든 기능을 갖춘 디자인 도구처럼 작동하는 Figma와 같은 더 복잡한 도구도 있습니다. Figma를 사용하면 디자이너가 협업하고, 자산을 이해 관계자에게 보낼 수 있으며(심지어 그들이 콘텐츠와 디자인 사본을 변경할 수도 있음) 개발자가 실시간으로 실제 디자인에 액세스할 수 있습니다. 시간이 지남에 따라 확장할 수 있는 디자인 및 디자인 시스템을 만들고자 하는 개발자-디자이너에게 훌륭한 옵션입니다.

Webflow는 개발자들이 좋아할 만한 브라우저에서 디자인하기 위한 또 다른 옵션입니다. 디자인 인터페이스가 시각적인 동안 내보낸 코드는 개발자가 이해할 수 있는 깨끗하고 의미 있는 CSS 및 HTML입니다(모든 시각적 디자인 도구가 깨끗한 코드를 내보내는 것은 아님). Webflow에는 디자인 및 레이아웃을 위한 도구는 물론 내장된 CMS 및 전자 상거래 도구와 호스팅 옵션이 포함되어 있습니다.

색상, 타이포그래피 및 레이아웃 사용

색상, 타이포그래피 및 레이아웃의 시각적 원리에 대해 알아보기 전에 기본 사용성에 대해 이야기하는 것이 중요합니다. 세상에서 가장 심미적으로 아름다운 디자인도 쓸 수 없으면 소용이 없습니다.

가장 중요한 사용성 원칙 중 하나는 일관성 또는 예측 가능성에 대한 아이디어입니다. 디자인은 사용자가 직관적으로 사용법을 이해할 수 있을 만큼 충분히 예측 가능해야 합니다. 예를 들어, 클릭 가능한 링크의 파란색 밑줄이 그어진 텍스트, 완전하고 레이블이 잘 지정된 탐색 메뉴 등. 요소 사이의 간격, 타이포그래피 및 색 구성표도 일관되어야 합니다.

모든 디자인 프로젝트에서 고려해야 하는 다른 사용성 원칙에는 오류 방지(오류 발생 시 유익한 오류 메시지), 친숙한 언어("귀엽다" 또는 불분명할 수 있는 창의적인 대안보다는 사람들이 익숙한 언어 사용)와 같은 것들이 포함됩니다. ), 유연성과 효율성, 쉽게 사용할 수 있는 도움말. Nielsen Norman Group에는 염두에 두어야 하는 추가 사용성 휴리스틱이 있습니다.

사용성 평가는 제품이 설계 및 개발 팀이 의도한 대로 작동하는지, 사용자가 혼동하지 않도록 설계 및 개발 프로세스 전반에 걸쳐 수행되어야 합니다. 발견적 평가에는 제품이 따라야 하는 사전 정의된 설계 원칙 목록을 실제 제품과 비교하여 편차가 발생한 위치를 확인한 다음 해당 편차를 수정하는 작업이 포함됩니다.

사용성이 손에 있는 제품과 관련하여 완전히 이해되면 디자이너-개발자는 디자인의 보다 시각적인 측면으로 이동할 수 있습니다.

기본 색 이론

색상 이론은 시각 디자인의 가장 복잡한 측면 중 하나입니다. 음영을 약간 변경하면 색상의 시각적 효과와 정서적 효과가 완전히 바뀔 수 있습니다. 수년간 업계에 종사해 온 많은 디자이너들이 여전히 색상 문제로 어려움을 겪는 이유 중 하나입니다.

색상 이론에 대해 많은 책이 작성되었지만 디자이너-개발자가 시작하는 방법을 배울 수 있는 몇 가지 매우 기본적인 원칙이 있습니다. 사용할 수 있는 다양한 색상 디자인 도구와 이를 결합하면 만족스러운 색상 팔레트를 상당히 쉽게 만들 수 있습니다.

먼저 따뜻한 색, 차가운 색, 중성색의 차이입니다. 따뜻한 색에는 빨강, 주황, 노랑이 있습니다. 따뜻한 색상은 일반적으로 생동감 있고 활력이 넘칩니다. 시원한 색상에는 녹색, 파란색 및 보라색이 포함됩니다. 이 색상은 일반적으로 더 차분하고 편안합니다.

중성에는 흰색, 검은색, 회색, 갈색 및 베이지색이 포함됩니다. 따뜻하거나 차가운 색상에 흰색, 검정색 또는 회색을 추가하면 의미와 영향이 바뀝니다. 흰색은 색상을 밝게 하고 일반적으로 그 효과를 덜 강렬하거나 긍정적으로 만듭니다(예를 들어, 보라색은 신비롭고 장엄한 색상으로 간주되는 반면 라일락은 종종 봄과 행복과 관련이 있습니다). 회색은 색상을 음소거하고 영향을 줄일 수 있습니다. 검정은 색상을 어둡게 하고 보다 보수적으로 보이게 할 수 있습니다(밝은 파란색과 남색과 같은 색상의 다른 영향을 고려).

디자이너가 색상 의미에 대한 기본적인 이해를 갖고 있으면 Coolors, Design Seeds 또는 Colormind와 같은 도구를 사용하여 디자인을 위한 최종 조정 팔레트를 만들 수 있습니다.

HSL 색상 사용

디자이너는 웹 색상을 생각할 때 종종 16진수 값으로 생각합니다. 이것이 웹 색상 측면에서 업계 표준이 되었지만 개발자는 HSL 색상 값으로 작업하는 것이 더 합리적임을 알 수 있습니다.

대부분의 사람들(디자이너 포함)에게 16진수 값은 서로 상관관계가 없는 것처럼 보입니다. 매우 유사해 보이는 두 가지 색상이 완전히 다른 16진수 값을 가질 수 있습니다. 예를 들어, #68B4D4 및 #92C8E0은 상당히 유사한 파란색 음영(하나는 다른 것보다 약간 더 밝고 밝음)이지만 16진수 값에는 명백한 상관 관계가 없습니다.

그러나 HSL 값은 서로 얼마나 밀접하게 관련되어 있는지 보여줍니다. #68B4D4는 HSL(198, 58%, 62%)이 되고 #92C8E0은 HSL(198, 56%, 73%)이 됩니다. 시퀀스의 첫 번째 숫자(이 경우 198)는 특정 색조를 나타냅니다. 두 번째 숫자는 채도의 백분율(색상이 얼마나 밝거나 생생한지)입니다. 세 번째 숫자는 색상의 밝기(또는 추가된 흰색)의 백분율입니다.

색상 값 간의 상관 관계는 HSL 대 16진수로 쉽게 볼 수 있으므로 개발자는 종종 HSL을 사용하여 코드를 통해 색상을 조작하는 것이 훨씬 더 쉽다는 것을 알게 됩니다.

타이포그래피 원칙

타이포그래피는 경험 많은 디자이너도 실수할 수 있는 또 다른 영역입니다. 그러나 색상 이론과 마찬가지로 도움이 될 수 있는 몇 가지 훌륭한 도구가 있습니다.

타이포그래피 계층 구조는 디자이너-개발자가 가장 먼저 배워야 할 것 중 하나입니다. 디자인에서 서로 다른 유형 요소 간의 관계는 해당 디자인을 더 유용하게 만드는 데 매우 중요합니다.

최소한 디자인에는 제목, 자막, 본문 글꼴의 세 가지 수준의 타이포그래피 계층이 있어야 합니다. 제목은 시각적으로 가장 눈에 잘 띄어야 하고, 그 다음에는 자막이 오고, 그 다음으로 가독성이 높은 본문 글꼴이 와야 합니다.

많은 새로운 디자이너들은 계층 구조를 생성할 때 글꼴 크기에 너무 많은 초점을 맞추고 글꼴 스타일 에는 충분하지 않습니다. 예를 들어, 제목을 부제보다 훨씬 크게 만드는 것보다 제목을 굵게 또는 대문자로 표시하고 자막은 제목 대소문자와 보통 두께로 남겨두는 경우가 있습니다. 색상은 자막과 제목, 이러한 요소와 본문 텍스트를 구분하는 데 사용할 수도 있습니다.

다른 글꼴을 결합하는 것도 많은 디자이너를 혼란스럽게 할 수 있지만 시각적 계층 구조를 만드는 일반적인 방법입니다. 여기에는 보완 글꼴 선택(반대는 종종 끌리지만 어느 정도 글꼴이 얼마나 잘 결합되는지는 시간이 지남에 따라 연마된 직감에 따라 결정되어야 함), 적절한 글꼴 선택(법률 문서에서 Comic Sans를 사용하지 않음, 예를 들어, 또는 더 작은 크기에서는 읽을 수 없는 본문 유형에 대한 표시 글꼴) 및 서체 간의 대비를 생성합니다(매우 유사한 두 개를 사용하지 마십시오).

글꼴을 결합하는 또 다른 간단한 방법은 큰 글꼴 모음에서 글꼴을 선택하는 것입니다. 함께 잘 작동하는 디스플레이, 세리프체 및 산세리프체 버전을 포함하는 제품군도 있습니다(예: Mrs Eaves and Mr Eaves, Fedra, Museo and Museo Sans). 이것은 서로 잘 보이도록 디자인된 글꼴을 결합하여 실제로 실험을 시작하는 가장 쉬운 방법일 수 있습니다.

더 큰 타이포그래피 계층(예: H1, H2, H3, H4 추가)으로 작업할 때 타이포그래피 척도에서 어떤 종류의 이유를 따르는 것이 중요합니다. 피보나치 수열은 다른 확립된 활자체 척도가 있지만 시작할 수 있는 하나의 척도입니다.

두 타이포그래피(및 일반적으로 디자인 레이아웃)에 사용되는 하나의 공통 척도는 4, 8, 16, 24, 36, 48, 72, 108 등으로 구성됩니다. 비율(예: 36픽셀 선 높이와 결합된 24픽셀 글꼴).

기본 레이아웃 원칙

웹의 시작부터 "표준"으로 등장한 특정 레이아웃 패턴이 있습니다. 추가 정보 또는 탐색 옵션이 있는 상단, 왼쪽 또는 오른쪽 사이드바의 기본 탐색과 나머지 공간을 차지하는 본문 콘텐츠가 그 예입니다.

이 기본 레이아웃(상단 탐색 아님, 사이드바 없음, 사이드바 2개 등)과 확실한 편차가 있지만 새 레이아웃을 생성할 때 이는 종종 상당히 안전한 방법입니다. 이 기본 패턴에서 벗어나는 것은 목적이 있는 경우에만 수행되어야 하며, 특히 신규 및 경험이 없는 디자이너-개발자는 더욱 그렇습니다.

일반적으로 일관성 을 의미하는 예측 가능한 디자인을 만드는 것은 제품의 유용성에 많은 영향을 미칩니다. 사용자가 제품을 사용할 때 기대하는 것과는 다른 것은 사용성 이득이 손실보다 클 때만 수행되어야 합니다.

동일한 유형의 콘텐츠에 대해 한 페이지에 72픽셀 굵은 파란색 제목을 사용하고 다른 페이지에 36픽셀 빨간색 제목을 사용하지 않는 것이 가장 좋습니다. 레이아웃 일관성이 핵심입니다. 유사하게, 제목과 본문 텍스트 사이의 간격(패딩)은 한 섹션에서 36픽셀, 다른 섹션에서 32픽셀로 시각적 불일치를 만듭니다. 사람은 그 차이가 왜 거슬리는지 즉시 이해하지 못할 수도 있지만, 느낄 것입니다.

위에서 언급한 활자체 크기와 유사하게 4, 8, 16, 24, 36, 48, 72 또는 108픽셀 크기의 간격 요소는 시각적으로 즐거운 디자인을 만듭니다. 요소 사이에 충분한 공간을 사용하고 숨을 쉴 수 있는 공간을 제공하는 것이 좋습니다. 새로운 디자이너는 종종 공백을 피하고 어수선하고 압도적으로 보이는 디자인으로 끝날 수 있습니다.

일부 사람들은 스케일이 원래대로 배치된 이유에 대해 의문을 제기할 수 있습니다. 처음 두 숫자 사이에는 4픽셀의 차이만 있지만 마지막 두 숫자 사이에는 36픽셀 차이가 나는 이유는 무엇입니까? 그 이유는 간단합니다. 작은 규모에서 4픽셀 증가를 쉽게 식별할 수 있습니다(8픽셀은 4의 두 배이며 쉽게 식별할 수 있음). 그러나 숫자가 클수록 72픽셀과 76픽셀의 차이를 쉽게 볼 수 없습니다. 더 큰 차이는 크기가 증가함에 따라 더 쉽게 볼 수 있습니다.

일관된 간격은 디자인에 대한 그리드 기반 접근 방식이 인기를 얻은 한 가지 이유입니다. 그리드(일반적으로 12-, 16- 또는 24-열)로 시작하는 것은 디자이너에게 모든 것을 일관성 있게 유지하는 작업 프레임워크를 제공합니다. 기둥 사이에 내장된 거터는 다양한 디자인 요소와 그 안의 콘텐츠가 숨을 쉴 수 있는 공간을 확보하는 데 도움이 됩니다.

결론

디자이너와 개발자 모두 자신의 경력을 발전시키기 위해 기술을 확장하는 데 집중해야 합니다. 개발자가 디자인의 기본 원리를 배우는 데 보내는 시간은 향후 디자이너와 작업하거나 자신의 제품을 만들 때 시간을 절약할 수 있습니다.

사용성 원칙, 색상 이론, 타이포그래피, 레이아웃 및 UX와 같은 디자인의 기본 원칙을 이해하면 개발자가 개발 을 더 잘할 수 있습니다. 디자이너가 선택을 하는 이유를 알 때 개발자는 디자이너와 더 잘 협력하여 진정으로 뛰어난 제품을 만들 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙과 중요성
• 디자이너는 코딩을 얼마나 알아야 할까요?
• 가능성의 스펙트럼: 이동 UI 색상 가이드
• 이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.
• 디자인 기초 – 시각적 계층 구조 가이드(인포그래픽 포함)