와이어프레임으로 디자인 배우기 | 매거진에 참여하세요

디자이너의 시각으로 보는 연습 방법과 이 기술이 와이어프레임과 디자인을 어떻게 업그레이드할 수 있는지 몇 가지 방법을 안내해 드리겠습니다.

비디자이너들에게 제품 디자인에서 무엇을 좋아하는지 물어보면, 대개 사용자 인터페이스(UI)에 대해 구체적으로 말하기 어려워합니다.

마찬가지로, 무엇을 좋아하지 않는지 설명하는 것도 어렵습니다. 시각적 디자인에서 좋은 것이 왜 좋고 나쁜 것이 왜 나쁜지 설명하는 것은 쉽지 않습니다.

디자인의 미묘한 차이는 우리가 그것을 어떻게 사용하는지에 영향을 미칩니다. 이를 이해하는 것은 기술입니다.

모든 제품 관리자, 기업가 또는 개발자가 개발할 수 있고 개발해야 할 기술입니다.

"괜찮은것 같은데 ! 왜 더 신경 써야 해?"

UI 디자이너들은 디지털 제품에 있어서 혼란이나 불일치가 미치는 영향에 민감합니다. 사용자 경험에 미치는 영향은 누적되며 빠르게 증가합니다.

긍정적인 측면에서, 이를 인식할 수 있는 사람이 많아질수록 나쁜 UI가 제품으로 출시될 가능성은 줄어듭니다.

디자이너처럼 보는 것은 일반 사용자가 어려움을 겪을 수 있는 부분을 빠르게 이해하고, 이를 어떻게 수정하여 더 나은 버전으로 만들 수 있는지 알려줍니다.

검색 결과 페이지로 돌아가는 길을 찾기 어려운가요? 그렇다면 많은 사람들이 같은 문제를 겪을 것입니다. 고객이 질문을 가지고 오기 전에 이러한 문제를 발견하는 것은 큰 성과입니다.

또한, 디자이너의 어휘를 사용하여 왜 어떤 것이 어색하게 느껴지는지, 또는 왜 어떤 것을 좋아하는지에 대한 느낌을 표현하는 데 도움이 됩니다.

디자이너가 이해할 수 있는 방식으로 문제를 설명할 수 있는 기업가나 제품 소유자는 문제를 더 잘 정의하고 해결할 수 있습니다.

디자이너처럼 보는 것은 제품이 어떻게 구성되어 있고, 여러 페이지나 화면에서 패턴이 어떻게 재사용되는지 보는 데도 도움이 됩니다.

이는 제품을 구축하거나 코드를 작성할 때 매우 유용할 수 있습니다.

"좋아요. 흥미롭네요. 어떻게 배울 수 있나요?"

몇 가지 간단한 질문을 사용하여 분석을 더 깊이 있게 진행하기
제가 UI 디자인을 가르칠 때, 학생들의 첫 번째 과제는 자신이 좋아하는 제품을 하나 선택하고 그 이유를 설명하는 것입니다.

그들은 종종 Venmo가 청구서 분할을 쉽게 만드는 이유나 TikTok이 중독성이 있는 이유(끝없는 콘텐츠 스크롤)에 대해 씁니다.

이 과제에서 나온 실제 답변 중 하나는 "단순하고, 상호작용적이며, 내 취향에 맞게 커스터마이징할 수 있어서 좋아합니다"였습니다.

그들이 사용자 인터페이스 디자인 수업을 듣고 있음에도 불구하고, 그들은 종종 제품이 제공하는 서비스 측면에서 좋아하는 점을 쓰거나, 단순히 사용하기 쉽다는 점을 씁니다.

이것은 매우 광범위하고 주관적인 답변입니다. 저는 그들이 더 깊이 파고들기를 원합니다.

• - 사용된 색상에 대해 무엇을 알아차렸나요?

• - 이미지와 타이포그래피가 어떻게 함께 작용하나요?

• - 페이지에서 가장 눈에 띄는 것은 무엇인가요?

• - 무엇이 그것을 눈에 띄게 만드나요?

• - 화면의 요소들이 어떻게 함께 작용하여 이를 달성하나요?

• 저는 학생들이 UI의 세부 사항을 볼 뿐만 아니라, 그 세부 사항을 명확한 용어로 설명할 수 있기를 원합니다.

이것은 많은 사람들이 익숙하지 않은 일이라는 것을 알기 때문에, 저는 후속 과제를 만들었습니다. 관찰 능력을 향상시키기 위해 이 짧은 가이드를 보냅니다.

UI에 대해 몇 가지 간단한 질문을 받은 후, 답변은 훨씬 더 상세해집니다.

가이드를 읽은 후의 실제 답변 예시는 다음과 같습니다:

• - "단일한 산세리프 폰트를 사용하여 통일된 느낌을 주는 것이 좋습니다."
  - "제품이 활성화되었는지 여부를 색상으로 구분하는 것이 좋습니다. 비활성화 상태는 회색, 활성화 상태는 주황색입니다.

• 현재 상태를 빠르게 시각적으로 확인할 수 있습니다: 주황색 = 켜짐, 회색 = 꺼짐."
  - "앱의 시각적 계층 구조도 좋습니다. 현재 상태는 큰 폰트로 가운데에 배치되어 빠르게 확인할 수 있습니다."
  

• 얼마나 큰 차이인가요. 사용된 언어가 훨씬 더 명확하고 구체적입니다. 연습을 통해 이것은 더욱 향상될 것입니다.

인터페이스의 레이어 분석하기

학생들의 제출물에 대해 이야기하고 코멘트를 남긴 후, 저는 인터페이스의 특정 레이어를 지적하는 시간을 가집니다.

먼저, 텍스트, 이미지, 색상을 사용하여 화면에 콘텐츠가 어떻게 배치되는지 보여주고, 사용자가 따라갈 수 있는 계층 구조를 설정하는 방법을 보여줍니다.

그리고 요소들을 정렬하고 그룹화하여 사용자가 콘텐츠를 빠르게 스캔할 수 있도록 하는 방법을 보여줍니다.

이러한 세부 사항이 지적되고 설명되면, 어디에서나 볼 수 있습니다.

Spotify 모바일 앱 와이어프레임: 가장 중요한 콘텐츠, 컨트롤, 콘텐츠 세부 사항의 3가지 레이어를 보여줍니다.

여전히 어려움을 겪고 있거나, 이 내용을 실제로 보고 싶다면, 운이 좋습니다.

배우기 위해 복사하기

다음 방법은 복사를 시작하는 것입니다. 저는 이에 대해 많이 글을 썼지만, 다시 말하겠습니다.

복사는 UI 디자인에 들어가는 세부 사항을 진정으로 이해하는 훌륭한 방법입니다. 수동으로 무엇이든 재현하면 그것이 어떻게 구성되어 있는지 진정으로 이해할 수 있습니다.

단계는 간단합니다:

좋아하는 제품의 스크린샷을 찍습니다.
Balsamiq으로 가져와 재현합니다.
이를 반복적으로 연습하면 세부 사항에 대한 눈이 더욱 강해질 것입니다.

Spotify 데스크톱 앱의 와이어프레임. 복사를 통해 텍스트 색상의 미묘한 차이를 알아차릴 수 있었습니다.

복사를 시작할 준비가 되지 않았거나, 최종 결과를 보고 싶다면 UI 라이브러리의 템플릿을 확인하세요.

최근에 Spotify, 뉴욕 타임즈 모바일 앱, Twitter 등과 같은 사이트나 앱의 새로운 템플릿을 많이 추가했습니다.

매일 사용할 수 있는 앱의 와이어프레임 버전을 보는 것은 디자인의 구조만 남겨두고 모든 것을 제거하는 힘을 보여줍니다.

페이지의 모든 요소가 어떻게 함께 작용하는지, 경험 전반에 걸쳐 패턴이 어떻게 사용되는지 볼 수 있습니다.

우리가 복사 작업을 대신 해두었으니, 여러분은 다운로드하여 분석하기만 하면 됩니다. 디자인에서 두드러지는 세부 사항을 찾아보세요.

뉴욕 타임즈 앱의 와이어프레임 버전, 템플릿 라이브러리에서 제공됩니다.

이제 연습을 시작할 때입니다

디자이너의 눈을 개발하는 것은 많은 중요한 이점이 있습니다. 하루 종일 디지털 제품을 사용하면서 잘 만들어진 디자인과 그렇지 않은 디자인을 인식하기 시작할 것입니다.

그리고 각각이 제품의 사용성에 어떻게 영향을 미치는지 알아차릴 것입니다. 와이어프레임 작업이 크게 개선될 것입니다. 왜냐하면 정말 중요한 세부 사항에 대한 눈이 생기고, 와이어프레임을 받는 사람들이 이를 더 잘 이해할 것이기 때문입니다.

위의 글은 아래 원문을 번역 및 재가공간 내용입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/develop-a-designers-eye/