Photoshop 및 Adobe XD로 와이어프레임 프로세스 속도를 높이는 방법

디자인 프로젝트를 시작하기 전에 처음부터 반드시 따라야 하는 단어가 있습니다. 바로 와이어프레임 입니다. 오늘 우리는 Adobe XD에서 와이어프레임을 만드는 방법과 라이브러리를 사용하여 Photoshop에서 일부 그래픽을 구현하는 방법을 배웁니다.

그러나 먼저 와이어프레임이란 정확히 무엇입니까?

와이어프레임은 프로젝트 구조를 시각적으로 표현한 것입니다. 뼈대, 레이아웃에서 작동할 요소, 프로토타입 콘텐츠의 배치를 정의합니다.

와이어프레이밍의 가장 큰 장점은 프로젝트 기능에 집중할 수 있는 간단한 요소의 조합이라는 것입니다. 이 단계에서는 스타일과 디자인에 대해 크게 생각하지 않고 그릴 수 있습니다.

프로젝트 대상이 무엇인지, 간단한 요소를 사용하여 와이어프레이밍을 통해 개발하는 방법만 파악하면 됩니다. 와이어 프레이밍을 통해 더 나아가면 팀 구성 요소가 스케치에 대한 의견과 제안을 함에 따라 최상의 솔루션을 개발할 수 있습니다.

첫 번째 단계는 프로젝트를 만들고 이름을 "섹션"으로 지정한 다음 최종 "아키텍처" 생성까지 다양한 단계를 완료하는 데 필요한 "요소" 목록을 만드는 것입니다.

먼저 "손으로" 와이어프레임을 만드는 것이 좋습니다. 종이에 전체 아이디어를 개발하는 데 도움이 되며(디지털 제한 없이) ​​개념이 쉽게 흐를 수 있습니다. 팀에서 일하는 사람들의 경우, 특히 온라인에서 팀과 함께 작업하는 경우 프로젝트에 관련된 모든 사람과 개념을 공유하려는 경우 종이로 작업하는 것이 가장 좋은 방법은 아닌 것 같습니다.

이 자습서에서는 다음 단계를 다룹니다.

1. 와이어프레임을 만들고 라이브러리를 통해 PS 자산을 선택하고 삽입합니다.
2. PS 파일을 업데이트하고 Adobe XD에서 결과를 확인하십시오.

와이어프레임에서 사용할 객체 세트를 생성합니다. 도구를 가져갈 수 있는 추가 패널이 있으므로 자산에 따로 보관할 것입니다.

작업을 마치면 동일한 요소를 다시 사용하고 개체를 더 추가하여 저장하고 향후 프로젝트에 다시 사용할 수 있습니다.

와이어프레임에서 사용하기 위해 준비한 이러한 Photoshop 요소가 필요합니다.

생성할 내용은 다음과 같습니다.

1 . 와이어프레임 생성 및 라이브러리를 통해 PS 자산 선택 및 삽입

와이어프레임 개발을 처음부터 시작하는 가장 좋은 방법은 먼저 손으로 그리는 것입니다.

이 프로젝트에서는 온라인 코스 사이트의 랜딩 페이지를 만들고 싶습니다. 나는 그 안에 필수적인 정보를 전달해야 한다는 것을 알고 있습니다. 처음부터 완벽할 필요는 없지만 결국 그 효율성은 내가 와이어프레임을 구성한 방법과 초기 목적과 얼마나 밀접하게 일치하는지에 따라 크게 달라집니다.

첫 번째 단계 : 손으로 그린 ​​와이어프레임이 있습니다.

보시다시피, 그들에 대한 정보가 많지 않습니다. 첫 번째 의도는 레이아웃이 어떻게 구성되고 어떤 요소를 고려해야 하는지를 보여주는 것입니다. 깨끗하고 간단합니다.

두 번째 단계 : 와이어프레임을 더 작은 크기로 다시 제출하고 요소와 그 용도를 설명하는 데 사용하는 몇 가지 여백 메모를 사용합니다.

세 번째 단계 : Adobe XD를 사용하여 디지털 와이어프레임을 만들어 보겠습니다.

Adobe XD를 열고 열린 창에서 "Web 1920"을 선택합니다.

파일 → 다른 이름으로 저장을 선택하여 프로젝트를 "와이어프레임"으로 저장합니다 .

파일이 저장되면 iPhone ⁶ ⁄ ₇ Plus용 아트보드도 하나 더 만드십시오.

왼쪽의 A (아트보드) 버튼을 클릭하고 오른쪽 사이드바에서 "iPhone 6/7/8"을 선택합니다.

데스크탑용 아트보드와 모바일용 아트보드의 두 가지 아트보드가 있습니다.

이제 와이어프레임 객체 생성을 시작할 수 있습니다. 손으로 그린 ​​스케치를 따라 이제 XD에서 동일한 개체를 만듭니다.

영웅 이미지
사각형 도구( R )를 선택하고 영웅 이미지가 있어야 할 위치에 모양을 그립니다. 그런 다음 선 도구( L )를 잡고 정점을 연결하는 두 개의 선을 그립니다. 이러한 종류의 모양은 이미지 자리 표시자를 나타냅니다.

모양과 선을 그룹화하고 그룹을 "영웅"이라고 부릅니다.

이제 "아이콘"섹션을 계속하겠습니다. 아이콘 앞에 텍스트를 넣고 몇 줄로 시각적으로 표현하겠습니다. 선 도구( L )를 다시 잡고 단일 수평선을 그립니다. 반복 그리드 도구(Mac의 경우 ⌘ + R 또는 Windows의 경우 CTRL + R )를 클릭하고 3개가 될 때까지 선을 드래그합니다.

아이콘에 세 개의 기호가 필요하므로 타원 도구 / E 를 클릭하고 원을 그립니다. 반복 그리드 도구(Mac의 경우 ⌘ + R 또는 Windows의 경우 CTRL + R )를 다시 클릭하고 세 개의 원을 만듭니다. 그런 다음 원 사이의 공간을 선택하고 드래그하여 더 넓게 만듭니다.

기능 섹션
사각형 도구( R )를 사용하여 밝은 회색 배경( #F8F8F8 )을 만듭니다. 위의 이전 영웅 이미지 섹션의 단계를 반복하여 이미지 자리 표시자를 만든 다음 아이콘 섹션(위도)의 단계를 반복하여 텍스트 줄을 만듭니다. 마지막으로 Rectangle Tool( R ) 도구를 사용하여 간단한 버튼을 만듭니다.

최종 결과는 다음과 같습니다.

평가 섹션의 경우 이미지 자리 표시자와 일부 텍스트 줄을 만들기 위해 이전과 동일한 단계를 반복합니다. 전체 와이어프레임 이미지에서 볼 수 있듯이 삽입해야 하는 따옴표 기호가 있습니다.

우리는 포토샵을 사용하여 그것을 할 것입니다.

이 링크를 클릭하여 내가 제공한 Photoshop 파일을 엽니다.

Libraries CC를 사용하여 이 이미지를 기호로 삽입하고 싶습니다.

Photoshop에서 Window → Libraries 로 이동하여 Libraries 패널을 확인하십시오. 오른쪽 상단의 작은 아이콘을 클릭하여 새 라이브러리를 만듭니다(이미지 참조).

내 라이브러리 이름을 "와이어프레임"으로 지정했습니다. 원하는 라이브러리 이름을 자유롭게 지정하십시오.

이제 라이브러리에 포함할 기호를 클릭하고 끕니다.

XD로 다시 전환하고 파일 → CC 라이브러리 열기 로 이동하면 방금 Photoshop을 통해 업로드한 마지막 심볼과 생성한 라이브러리가 표시됩니다.

XD의 와이어프레임으로 따옴표 기호를 끌어 필요한 위치에 배치합니다.

"가격, 구독 및 바닥글" 섹션의 경우 아래 이미지에서 볼 수 있는 것과 같은 추가 상자와 선을 사용하여 표시합니다.

참고 : 여기에서 제공한 Photoshop 파일에서 이메일 아이콘을 찾을 수 있습니다 .)

기능 섹션에 설명된 단계에 따라 Photoshop을 통해 라이브러리에 심볼을 삽입하고 XD에서 열고 와이어프레임 아트보드로 드래그합니다.

결과는 다음과 같습니다.

계속 진행하기 전에 마지막으로 해야 할 일은 레이어를 주문하는 것입니다. 레이어 아이콘(Mac의 경우 ⌘ + Y , Windows의 경우 CTRL + Y )을 클릭하여 레이어가 활성화되었는지 확인합니다.

모든 섹션 요소를 폴더로 그룹화합니다(나는 그들이 나타내는 섹션과 동일한 이름을 할당했습니다). 이렇게 하면 모든 요소가 순서대로 배치되고 빠르게 찾는 데 어려움이 없습니다(이미지 참조).

이제 와이어프레임 작업이 완료되었습니다!

다음 단계에서는 와이어프레임을 사용하고 라이브러리의 요소를 즉시 수정하는 방법을 발견하여 디자인을 구축할 것입니다.

2. 와이어프레임에 충실도 레이어 추가하기

우리는 방금 와이어프레임을 완료했으며 이 시점에서 우리는 무언가를 놓쳤는지 확인하기 위해 다시 확인할 수 있습니다. 와이어프레임에 필요한 모든 정보가 포함되어 있다고 확신하면 이를 프로젝트 팀과 공유할 수 있습니다.

우리는 이미지, 색상 및 자리 표시자 사본으로 "라이브"되도록 와이어프레임을 계속해서 업데이트할 준비가 되었습니다.

계속해서 디자인을 만드십시오. 와이어프레임을 다른 이름으로 저장하여 복제합니다(예: "Wireframe-Layout").

먼저 Hero 섹션에 대한 이미지가 필요합니다. (저는 Unsplash의 Priscilla Du Preez가 이 이미지를 사용했습니다. .)

Photoshop에서 이미지를 열고 이미지 → 이미지 크기 를 클릭하여 이미지 크기를 줄이고 너비를 3000px로 설정합니다.

이미지를 저장한 다음 라이브러리로 끌어다 놓습니다.

XD에서 라이브러리의 이미지를 아트보드로 드래그합니다. 방금 이미지 자리 표시자로 만든 모양에 맞춥니다.

이 이미지에 로고와 텍스트를 추가하겠습니다. 정보를 읽기 쉽도록 이미지를 조금 더 어둡게 해야 합니다. Photoshop Libraries로 돌아가서 패널에서 이미지를 두 번 클릭합니다. 이미지가 열리면 레이어 패널로 이동하여 이미지 레이어를 선택하고 패널 하단에 있는 레이어 스타일 추가 를 클릭합니다. 아래와 같이 색상 오버레이 를 설정합니다.

저장하면 모든 라이브러리에 자동으로 저장됩니다. XD로 다시 전환하면 아트보드의 이미지가 업데이트된 것을 볼 수 있습니다(라이브러리에서 다시 드래그할 필요 없음).

참고 : 이미지 크기에 따라 라이브러리가 자체적으로 업데이트되는 데 시간이 조금 더 걸릴 수 있습니다.

이제 로고를 삽입해 보겠습니다. Photoshop 파일을 열고 "Learn!"을 드래그합니다. 로고를 라이브러리에 넣습니다. 제가 사용한 폰트입니다.

배경이 어둡기 때문에 흰색 로고가 필요합니다. Photoshop으로 다시 전환하고 라이브러리에서 로고를 두 번 클릭합니다.

Type Tool을 잡고 로고 텍스트를 강조 표시하고 흰색으로 만듭니다. 저장하면 XD 아트보드에도 자동으로 저장됩니다.

일부 텍스트와 버튼을 삽입하여 영웅 섹션을 완성하세요.

다음으로 텍스트와 아이콘을 추가하여 다음 섹션을 채우겠습니다. 내가 사용한 것들은 여기에서 찾을 수 있는 Smashing Magazine을 위해 만든 무료 팩에서 가져온 것입니다.

이전에 수행한 대로 아이콘을 열고 Photoshop의 라이브러리에 추가한 다음 XD로 다시 전환하여 와이어프레임에 배치합니다. 결과는 다음과 같습니다.

이제 기능 섹션으로 이동합니다. 이전과 마찬가지로 이미지를 이미지 자리 표시자로 드래그합니다(나는 Unsplash에서 찾은 Sonnie Hiles의 이 이미지를 사용했습니다). 위의 이전 단계에서 보여드린 것처럼 일부 텍스트와 버튼을 추가합니다.

내가 제공한 Photoshop 파일을 열고 확인 기호를 라이브러리에 추가합니다. XD에서 라이브러리를 열고 아이콘을 텍스트 근처에 놓습니다. 반복 그리드를 사용하여 3개의 복사본을 만듭니다.

이제 체크 기호의 색상을 변경해 보겠습니다. Photoshop으로 돌아가서 라이브러리에서 열고 아래와 같이 색상 오버레이를 지정합니다.

저장하고 XD의 아이콘이 직접 업데이트된 것을 확인하십시오.

이제 레이아웃을 마치겠습니다.

평가 섹션의 경우 평가를 위한 텍스트와 이미지를 추가합니다(저는 UI Faces에서 가져왔습니다).

마지막으로 가격 섹션, 구독 섹션 및 바닥글에 대한 정보를 추가합니다. 내가 제공한 Photoshop 파일에서 가격표를 찾을 수 있습니다. Photoshop의 라이브러리로 드래그한 다음 XD에서 라이브러리를 열고 아트보드로 드래그합니다. 원하는 대로 자유롭게 수정하십시오.

그리고... 끝났습니다!

결론

이 튜토리얼에서는 Photoshop 및 Adobe XD로 작업하여 와이어프레임을 만드는 방법과 라이브러리 요소를 수정하여 와이어프레임에 신속하게 충실도를 추가하는 방법을 배웠습니다. 참고로 저는 이 튜토리얼을 연습하고 따라하는데 사용할 수 있는 모바일 와이어프레임을 만들었습니다. 텍스트와 이미지를 추가하려면 데스크톱 버전에서 했던 것처럼 단계를 따르세요.

댓글로 결과를 확인해주세요!

이 기사는 Adobe에서 후원하는 UX 디자인 시리즈의 일부입니다. Adobe XD 도구를 사용하면 아이디어에서 프로토타입으로 더 빠르게 이동할 수 있으므로 빠르고 유연한 UX 디자인 프로세스를 위해 만들어졌습니다. 하나의 앱에서 디자인, 프로토타입 및 공유가 모두 가능합니다. Behance에서 Adobe XD로 만든 더 많은 영감을 주는 프로젝트를 확인하고 Adobe 경험 디자인 뉴스레터에 등록하여 UX/UI 디자인에 대한 최신 트렌드와 통찰력에 대한 최신 정보를 받아볼 수 있습니다.