Ch3_3_와이어프레임과 프로토타입

학습목표:
와이어프레임과 프로토타이핑 개념과 제작 시 유의할 점을 학습한다.

---

와이어프레임의 개념과 유의할 점

와이어프레임(Wireframe): 
기획자나 디자이너의 아이디어를 러프하게 구성한 화면 디자인.  

✓ 각 화면 단위의 UI를 설계하는 것
✓ 화면의 설계와 화면 간의 관계 및 이동까지 모두 포함.
✓ 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사
용  

와이어프레임 작업 시 유의할 점은 다음과 같다:

• 기능적 요소의 위치와 역할을 명확하게 설정해야 한다.
• 디자인의 일관성을 유지하여 사용자 경험을 향상시켜야 한다.
• 사용자 흐름(User Flow)에 맞게 화면 전환을 고려해야 한다.
• 다양한 디바이스에서의 활용성을 염두에 두어야 한다.

와이어프레임 툴  

• 핸드 드로잉으로 스케치하기도 함.
• 파워포인트, 키노트, 스케치, 일러스트, 포토샵, UX디자인SW(Adobe XD) 등…

와이어프레임 작업에는 핸드 드로잉부터 Adobe XD와 같은 전문 디자인 소프트웨어까지 다양한 도구를 사용할 수 있으며, 특히 협업을 통해 각 분야의 전문가들이 의견을 조율하는 과정이 중요하다.

---

와이어프레임 작성 방법

① 와이어프레임을 작성하기 전에 개략적인 페이지부터 그리는 것이 좋다.

② 사용자의 행동 흐름을 검토하고 불필요한 요소와 기능을 감추거나 제거해 흐름을 재정비한다. 이 과정에서 상세한 동선과 기본 레이아웃을 정의한다.

③ 전체적인 페이지의 룩 앤드 필(Look and Feel)을 고려해 세부 페이지별 콘텐츠의 크기를 설정하고 위치를 배치한다.

④ 세부설명을 작성한다. (예 : 버튼, 효과 설명 등)

•  iOS와 안드로이드는 화면 구성이 다르기 때문에 와이어프레임도 각각 작성해야 한다.
• 운영체제별 가이드라인을 정확히 준수하고 특정 기능은 개발자와 상의하면서 작성해야 한다. 
  
  

  ---

프로토타이핑(Prototyping):

• prototype은 원형이나 견본을 의미
• 앱 개발에서는 실제 원하는 방식으로 서비스가 작동하고 구현되는지 테스트하는 과정.

프로토타이핑(Prototyping)은 원형이나 견본을 의미하며, 앱 개발에서는 실제 원하는 방식으로 서비스가 작동하고 구현되는지 테스트하는 과정이다. 이를 통해 코딩 없이도 앱을 테스트할 수 있어 디자이너와 개발자 간의 의사소통이 원활해진다. 또한, 성능과 구현 가능성을 간편하게 시험할 수 있어 시행착오를 줄이는 데 도움이 된다.

프로토타이핑의 효과

본격적으로 제품 개발ㆍ생산에 들어가면 도중에 중단하거나 취소하는 것이 쉽지 않으므로 사전에 프로토타입을 제작하고 검증 과정을 거쳐 위험 부담을 최소화한다.

이를 위해 예상 고객에게 프로토타입을 사용해보게 하고 피드백을 받아 제품 개선 시 반영하기도 하는데 이를 프로토타이핑(prototyping)이라고 한다.

• 프로토타이핑을 하면 코딩을 하지 않고도 앱을 테스트할 수 있으므로 디자이너와 개발자가 서로 이해하면서 원활하게 의사소통을 할 수 있다.
• 성능과 구현 가능성 등을 시험하기 위해 전체 기능을 간편하게 만들어 보기 때문에 시행착오를 줄일 수 있다.

앱 개발에서는 실제 원하는 방식으로 서비스가 작동하는지?
즉 유저 인터페이스의 상호 작용을 시뮬레이션 해보고 테스트는 과정입니다.

디자이너에게 프로토 타이핑이 필요한 이유

협업하여 진행하는 디자인은 여러 분야의 기획자나 개발자와 함께 일하게 되는데 모두 다른 분야이기 때문에 서로의 의견을 이해하는 데에는 많은 시간이 소요되기 마련이다.
하지만 프로토타이핑을 사용한다면 디자이너가 원하는 프로젝트에 대한 생각들을 확실하게 보여줄 수 있고 , 
말보다는 명확한 이미지로 제시하기 때문에 이해도도 빨라지고 효과적으로 전달하면서 시간을 확실하게 단축시킬 수가 있다.

​프로토 타이핑을 통해서 개발 단계 전의 최종 결과물을 테스트해 볼 수가 있는데,
이 과정에서는 더 많은 아이디어가 나올 수도 있고 그 아이디어를 구체화시키는 데에 걸리는 시간을 단축시킬 수가 있다. 
또한 스스로 사용해보는 것이기 때문에 디자이너 본인의 문제점을 발견해서 보완하기에도 좋다.

---

프로토타입의 충실도(Fidelity) 레벨

프로토타입에 포함된 세부 묘사 및 기능 레벨을 나타냅니다.

---

프로토타이핑 방법

•종이 프로토타이핑(Paper Prototyping)

• 종이 위에 디자인의 특정한 순간을 담아 스케치하고 숫자를 작성한 후 숫자 순서대로 프로토타입(Prototype)을 넘기면서 세부 페이지를 테스트하는 방법이다.
• 빠르고 쉽지만 사용자에 대한 엄청난 상상력이 필요하고 많은 인터랙션 문제점을 반영하지 못할 수 있음.

---

•디지털 프로토타이핑(Digital Prototyping)

• 프로토타입 툴을 이용해 디지털 프로토타이핑을 진행하면 앱을 실제로 실행한 것처럼 다양한 동작을 테스트할 수 있다.
• 테스트하는 동안 사용자는 시스템과 상호작용하면서 최종 제품에서 얻을 수 있는 사용자 경험을 할 수 있다.

---

몇 가지 인기 있는 프로토타이핑 툴

Adobe XD (Experience Design):

• Adobe XD는 벡터 기반의 사용자 경험 디자인 도구로, 웹 애플리케이션과 모바일 애플리케이션의 와이어프레임 및 프로토타입을 생성하는 데 사용됩니다.
• 이 툴은 간단한 클릭을 통해 프로토타입에 애니메이션과 상호 작용을 추가할 수 있으며, 실시간 협업 기능도 제공합니다.

Sketch:

• Sketch는 주로 맥 사용자들 사이에서 인기가 있는 벡터 그래픽 에디터입니다. 이는 UI/UX 디자인에 널리 사용되며, 플러그인과 협업 기능을 통해 프로토타핑 작업을 강화할 수 있습니다.
• 하지만 Sketch는 macOS 전용으로, Windows에서는 사용할 수 없습니다.

Figma:

• Figma는 웹 기반의 UI 및 UX 디자인 도구로, 원활한 협업 기능과 뛰어난 프로토타입 옵션을 제공합니다.
• 여러 사용자가 동시에 디자인을 수정할 수 있는 실시간 협업 기능이 특징입니다.

InVision:

• InVision은 웹과 모바일 프로토타입을 만들기 위한 플랫폼으로, 정적 레이아웃을 상호작용 가능한 프로토타입으로 변환할 수 있게 해줍니다.
• 이 도구는 클라이언트와 팀원이 코멘트를 남기고, 피드백을 공유할 수 있게 하는 강력한 협업 기능을 제공합니다.

Axure RP:

• Axure는 복잡한 프로토타입을 만들고, 상호 작용 가능한 HTML 모형을 제공하는 데 적합합니다.
• 이는 고급 사용자에게 적합하며, 높은 수준의 상호 작용, 변수, 데이터, 조건부 로직 등을 다룰 수 있습니다.

---

참고

•검색 엔진 최적화(SEO. Search Engine Optimization) 고려

• 웹사이트가 검색 엔진의 검색 결과에서 높은 순위를 차지하도록 최적화하는 과정을 말한다.
• 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를  구성
• 검색결과의 상위에 나올 수 있도록 작업
• 사이트맵은 이후 SEO를 고려해야 함.

SEO는 기술적, 내용, 및 외부 최적화의 세 가지 주요 영역으로 구성

기술적 최적화(Technical SEO)  
- 웹사이트의 구조와 설정을 최적화하여 검색 엔진이 페이지를 쉽게 크롤하고 인덱싱할 수 있도록 하는 것.
- 예를 들어, 웹사이트의 로딩 속도 최적화, 모바일 친화적인 디자인, SSL 인증서 설치, XML 사이트맵 생성, 로봇.txt 파일 설정 등이 포함됩니다.

내용최적화(On-page SEO)
- 웹사이트의 실제 내용을 최적화하여 관련 키워드에서 높은 순위를 얻을 수 있도록 하는 것.
- 제목, 메타 설명, 헤더 태그, 이미지 알트 텍스트, URL 구조, 내부 링크, 그리고 콘텐츠의 질과 원본성 등을 최적화

외부최적화(Off-page SEO)
- 웹사이트 외부에서 발생하는 활동을 최적화하여 웹사이트의 신뢰성과 권위성을 높이는 것.
- 백링크 건설, 소셜미디어 마케팅, 브랜드 인식 활동, 그리고 다른 사이트로부터의 추천 등이 포함

https://searchadvisor.naver.com/guide/seo-basic-intro

검색엔진 최적화의 목적

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers

---

참고사이트

https://pixso.net/kr/reviews/the-8-best-prototyping-tools-for-ui-designers/

Top 8 웹사이트 프로토타입 툴【한 번에 알아보자】

 

https://www.kr.protopie.io/

ProtoPie 코리아

https://ovenapp.io

OvenApp.io

 

https://balsamiq.com

Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq

발사믹Balsamiq은 핸드 드로잉한 느낌으로 UI를 디자인할 수 있는 프로그램이다.

디테일한 화면 을 구성하기에는 무리가 있고 종이 프로토타이핑을 위해 러프 스케치를 하는 정도로 사용할 수 있 다. 배우고 사용하기 쉽지만 89달러를 내고 써야 하므로 저렴하지는 않다. 윈도우와 맥에서 모두 사용할 수 있고 발사믹 사이트에서 무료 시험 버전도 제공한다.

https://www.invisionapp.com

Collaborate better | InVision

인비전Invision은 쉽게 배울 수 있고 협업을 위한 공유 기능을 제공하기 때문에 간단한 프로토타 이핑 용도로 사용하기에 좋다. 웹 화면에서 구현할 수 있고 간단한 상호작용도 제공한다. 단, 여러 화면을 연결해서 보려면 모든 화면을 제작해야 해서 번거롭다.

인비전 웹 사이트에서는 무료 엔터프라이즈 시험 버전을 제공한다.

 

https://www.uxpin.com

UXPin | UI 디자인 및 프로토타이핑 툴

UX핀UXPin은 웹 브라우저에서 구동할 수 있고 와이어프레임과 프로토타이핑 작업에 모두 사용 할 수 있다.
월 정액제로 29달러를 지불해야 하지만 시험 버전은 무료로 사용해 볼 수 있다.
사이트 디자인 패턴과 다양한 컴포넌트를 제공하며 유료 버전을 사용하면 UX-Book을 제공한다

 

https://www.axure.com

Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

액슈어Axure는 와이어프레임은 물론 프로토타이핑 작업에도 사용할 수 있고 팀원 간의 공유 기능 도 제공한다. 윈도우와 맥 버전이 모두 있고 매월 29달러를 내거나 일시불로 495달러에 구입할 수 있다. 다양한 애니메이션 기능이 있어 전문가 집단에서 많이 사용한다.

 

https://www.sketchapp.com

Sketch

https://www.figma.com/

 

Figma: The Collaborative Interface Design Tool