어떻게 종이에 작성하는 와이어 프레임이 당신을 더 나은 디자이너로 만들 수 있을까? (How paper wireframing will make you a better designer)

이 게시물은 원래 alexanderskogberg.com에 게시되었습니다.
오늘날, 와이어 프레임을 그릴 수 있는 훌륭한 도구들이 많이 있습니다. 그러나, 저는 여전히 저의 종이 와이어 프레임 키트를 선호합니다. 이 글에서 저는 왜 당신에게 종이 와이어 프레임이 더 나은 디자이너로 만드는지 설명할 것입니다.
presentation
2012년, 저의 와이어 프레임 기술을 다음 단계로 끌어올릴 계획이었습니다. 저는 새로운 iPad 용으로 FiftyThree의 app Paper를 받았습니다. 그리고 미국에서 리뷰가 좋은 태블릿 스케치 펜 2개를 주문했습니다.
그 즈음, 스웨덴 디자이너 Mårten Angner의 종이 스케치 강좌도 들었습니다. 이 과정을 수강하면서 와이어 프레임을 만드는 저의 접근 방식이 완전히 바뀌었고 수년간 그것은 저를 더 나은 디자이너로 만들었습니다.
종이에 작성하는 와이어 프레임이 왜 꼭 필요한지 말씀드리겠습니다.

다음을 포함합니다.

지난 수년간 여러 부서의 여러 팀에서 많은 프로젝트를 수행해 왔습니다. 종이로 만든 와이어 프레임을 함께 제작하면 팀원들의 기분이 좋아진다는 것을 알게 되었습니다. 그들은 처음부터 자신들의 의견을 듣고 기여할 수 있게 된 것에 대해 고마워했습니다.
어떤 경우에는, 개발자들이 와이어 프레이밍에 대한 이러한 접근 방식에 대해 감사를 표하기도 했습니다. 그들은 디자이너들과의 협업에 어려움을 호소하기도 했습니다. 서로가 드물게 대화를 하다가 갑자기 방대한 포토샵 파일들을 넘겨받는 경우에 좌절감을 느낀다고 합니다.

접근 가능합니다.

모든 사람들이 그래픽 편집기나 프로토 타입 제작 프로그램 : Axure, Balsamiq, Sketch or Photoshop 등을 다룰 수 있는 것은 아닙니다. 그러나 모두 종이에 그림을 그릴 수 있습니다!
어떤 사람들은 그림을 그리는 것이 끔찍하다고 주장할 수도 있습니다. 그리고 종종 그런 것은 사실이지만, 이런 유형의 디자인 작업에는 전혀 중요하지 않습니다.
가장 가까운 사무실 프린터에서 일부 용지를 가져와서 얇은 마커를 가지고 그림을 그리기만 하면 됩니다!

공유가 가능합니다.

종이 와이어 프레임은 쉽게 공유할 수 있습니다. 그것들을 스캔하고 사무실 프린터를 사용하여 인쇄한 후에 그것들을 봐야 할 사람들에게 나누어 주세요. 복사본을 가지고 있으면 편집하기가 더 쉽습니다. 그리고 다른 사람이 복사본을 잃어버리더라도 상관없습니다.
와이어 프레임의 사진을 찍어 Dropbox나 GoogleDrive에 업로드하거나 InVision의 게시판에 추가하는 것도 좋은 방법입니다.
Tip: Genius ScanPost-it Plus와 같은 앱들은 종이에 작성된 스케치 사진을 찍는데 아주 좋습니다.
presentation
Feelgood’s customer portal에서 일할 때의 만든 종이 와이어 프레임 작업. 디자인 과정의 초기 단계에서 저는 종이 와이어 프레임을 그려 주당 수차례 팀과 함께 검토했습니다.

강력합니다.

프로젝트에서 종이로 와이어 프레임을 그리기 시작했을 때, 저는 그것이 가지고 있는 세 가지 주요한 긍정적인 효과를 발견했습니다.
첫째, 문제는 더 일찍 발견됩니다. 저는 제가 속해 있던 팀들이 제가 전부터 익숙해진 것보다 훨씬 더 빨리 사소하고 더 큰 문제들을 발견하기 시작했다는 것을 알게 되었습니다.
예를 들어, 전자 상거래 체크아웃 페이지에 대해 이야기하는 것은 한 가지입니다. 하지만 스케치를 시작하면 시간이 많이 걸리는 기술적인 문제, 까다로운 세부 사항 및 아무도 모르는 것들을 확인할 수 있습니다.
보는 것이 듣는 것보다 더 강력합니다.
둘째, 종이에 작성하는 와이어 프레임은 많은 시간과 돈, 에너지를 절약합니다. 종이에서 문제를 확인하고 해결하면 개발 작업을 수행하는 것보다 훨씬 저렴합니다. 따라서 사소한 변경조차도 값이 비싸고 실망스러울 수 있습니다.
셋째, 종이로 와이어 프레임을 그리기 시작했고 디자인을 발표할 때 사용한 적이 있기 때문에 아무도 제게 " 이렇게 해야 하는 건가요?"라는 질문을 한 적이 없습니다. 모든 사람들은 그것이 진행 중인 일이라는 것을 알고 있습니다.
또한 종이에 와이어 프레임을 그리는 것이 정치적 결정을 이끌어내는 데 아주 좋습니다. 초기에 기능이 단어에서 종이로 바뀌면 많은 이해관계자들이 "실제"기능을 더 많이 사용하게 됩니다. 이것은 종종 의사 결정을 위한 촉매 역할을 합니다.

종이에 와이어 프레임 그리기 팁

실제로 종이에 그림을 그리는 몇 가지 팁이 있습니다.

도구의 올바른 선택

종이에 그릴 때는 도구에 그다지 의존하지 않아도 되지만, 튼튼한 스케치북, 수정 테이프 롤러, 그리고 얇은 검은색 마커 등에 투자해야 할 부분이 있습니다.
presentation
저의 기본 종이 와이어 프레임 키트입니다. 저는 2012년부터 스케치패드를 사용 해왔습니다. 이것 없이는 디자인할 수 없습니다!

스케치 패드

가장자리가 클립으로 고정되고 강화된 스케치 패드를 가지고 있어야 합니다. 클립온은 종이를 쉽게 추가하고 제거하는 데 유용합니다. 강화된 가장자리는 여러분이 스케치 패드를 가방 안팎으로 많이 가지고 다니기 때문에 마모와 찢어짐을 줄여 줄 겁니다.
제가 사용하고 있는 스케치 패드는 2012년에 들었던 강좌 과정에 포함되어 있었습니다. 브랜드가 분명하지 않아서 정확한 모델을 어디서 구할 수 있는지 모르겠습니다.

수정 테이프 롤러

제가 종이에 와이어 프레임을 그리기 시작했을 때, 저는 롤러가 있는 수정 테이프가 존재하는지조차 몰랐습니다. 이제 저는 이 훌륭한 작은 발명품에 거의 저의 맥 북이나 아이폰만큼 의존하고 있습니다. 이것은 실수를 쉽게 제거하고 바른 후 바로 마릅니다.
저는 Tipp-Ex의 롤러를 더 좋아합니다.

얇은 검은색 마커

저는 Pilot의 0.7mm와 0.5mm의 검은색 마커를 추천합니다. 이것들은 가격이 적절하고 잉크를 다 사용할 때까지 마르지 않습니다.
0.5mm 마커는 글씨를 쓰고 정밀함 덕분에 아주 작은 세부 묘사에 가장 적합합니다. 0.7mm 마커는 그 외 다른 모든 것을 그릴 때 적합합니다. 요즘에 저는 아주 정밀한 작업을 선호하기 때문에 전적으로 0.5mm 검은색 마커를 사용합니다.
또한 와이어 프레임에 승인되거나 승인되지 않은 디자인 선택에 대한 주석을 만들기 위해 빨강 및 녹색 마커를 준비하면 좋습니다.

왜 샤프와 좋은 지우개를 사용하지 않을까요?

샤프와 지우개 대신 마커를 사용하는 이유는 두 가지입니다:
마커를 사용하면 그림을 그리는 동안 더 집중할 수 있기 때문에 실수를 덜 할 수 있습니다. 당신은 항상 주의를 기울이고 있을 것입니다. 왜냐하면 망치는 것은 비용이 많이 들기 때문입니다. (만약 당신이 수정 테이프 롤러를 가지고 있지 않다면)
마커를 사용하여 그린 와이어 프레임은 샤프에 비해 높은 대비 덕분에 사진을 찍거나 스캔할 때 훨씬 더 잘 보입니다.

스케치 기초 연습

저의 와이어 프레임은 대부분 두 가지 요소로 구성됩니다. 직선 및 둥근 원입니다. 만약 당신이 이 두 가지 요소를 능숙하게 그린다면 그다음은 쉽습니다.
직선과 원을 그리기 위한 몇 가지 팁:
  1. 긴장 풀고 어깨 풀어줍니다.
  2. 허리를 곧게 펴줍니다.
  3. 마커를 이동하기 전에 마커의 끝을 종이 위에 놓습니다.
  4. 일정한 속도로 그립니다.
  5. 끝점에 도달한 후 마커를 들어 올리고 공기 중에서 속도를 줄입니다.
원을 그리는 것이 더 까다롭습니다. 종이 위에 그리기 전에 두세 번 정도 공중에 원을 그릴 것을 권합니다. 체육관에서 역기를 들기 전에 준비 운동으로 생각하세요.
기억하세요: 지름길은 없습니다. 연습하고, 연습하고 그리고 직선과 원을 그리는 것을 연습하세요!

템플릿 그리기, 스캔 및 복사

제가 와이어 프레임을 그릴 때, 저는 주로 스마트폰이나 웹 브라우저 창의 윤곽선을 먼저 그립니다. 이후 이 윤곽선 안에 나머지 프레임을 채워 넣습니다.
presentation
Safari 웹 브라우저와 iPhone8은 이러한 템플릿을 그릴 때 모델로 사용되었습니다.
이와 같이 윤곽선을 그리면 사람들이 당신의 와이어 프레임을 더 자세히 볼 수 있습니다. 미래의 스마트폰 앱의 와이어 프레임을 살펴보려면 주변 스마트폰을 그리는 것만으로도 충분합니다.
각 용지에 대한 윤곽선을 그리는 작업은 신속하게 처리되지 않으므로 항상 사본을 스캔하고 인쇄하는 빈 윤곽선 하나를 그립니다. 이렇게 하면 많은 시간과 에너지를 절약할 수 있습니다.
올바른 유형과 세부 정보
와이어 프레임은 내용, 레이아웃 및 순서에 초점을 맞추어야 한다고 생각하지만, 좋은 세부 사항을 추가하면 결과 자료로서의 위상이 높아지고 이후 그래픽 설계 작업을 주도하는 데 도움이 될 수 있습니다.
좋은 세부 정보의 예는 다음과 같습니다 :
  • 클라이언트의 로고 (명확하게 이것을 그리는 법을 배웁니다)
  • 다른 스타일 (serif and sans-serif)로 그린 텍스트
  • 다른 잠재적인 브랜드의 로고가 등장합니다.
  • 단추 및 링크의 레이블뿐 아니라 아이콘
Tip: 드로잉 아이콘에 영감이 필요한 경우 fontello.com 을 방문하여 선택하십시오.
presentation
로고, 사실적인 카피, 대문자와 소문자의 문자열, 파티를 즐기는 두 사람의 사진과 같은 세부 사항을 확인하십시오.
Tip: 만약 여러분이 문자를 쓰고 싶지 않다면, 대신 모스 부호 선을 그리세요. 절대 lorem ipsum 텍스트를 쓰지 마세요.
그림을 그릴 때는 대각선이 있는 빈 사각형은 지루합니다. 여러분의 내면의 아이를 받아들이고 여러분이 그림을 그릴 때 유치원에서 했던 것처럼 그리세요.
다음과 같은 일상적인 객체의 간단한 변형을 그리는 연습을 하십시오 :
  • 자동차, 버스 및 보트
  • 다양한 종류의 집들
  • 스마트 폰, 태블릿 및 노트북
  • 사람(얼굴이 작은 막대 모양이면 충분함)
  • 나무, 덤불, 구름과 새들이 있는 하늘

주석 쓰기

종이로 작성하는 와이어 프레임은 클릭 가능한 프로토 타입의 상호 작용성이 부족하지만, 일부 주석만 추가하면 팀 내 개발자에게 행동, 논리 및 의존성을 설명하는 데 크게 도움이 될 수 있습니다.
저는 종종 다음을 설명하는 주석을 작성합니다 :
  • 비활성화된 요소가 다시 활성화되는 방법
  • 특정 요소를 클릭하면 트리거 되는 항목
  • 입력 필드에 지원되는 다른 형식
  • 내용의 다양성
  • 입력 시 동적 업데이트
  • 인터페이스 애니메이션 발생 가능
presentation
이 와이어 프레임에 대한 주석은 개발자를 위해 작성되며, 따라서 기술 용어입니다.

각 wireframe의 이름과 날짜

제가 작업하는 모든 프로젝트에서 저는 보통 많은 양의 종이로 쌓아 올려진 탑과 같은 결과물을 가지게 됩니다. 그것이 제가 각 시트의 맨 위에 제가 그린 그림의 이름과 그 그림을 그린 날짜를 쓰는 이유입니다.
이렇게 와이어 프레임을 정리하면서 수년 동안 많은 시간을 절약할 수있었습니다.

마무리

종이로 작성하는 와이어 프레임은 프로세스에 팀 구성원과 이해관계자를 포함하면서 훌륭한 디자인을 만들기 위한 강력하고 시간을 절약하고 쉽게 접근할 수 있는 기술입니다. 벡터 그래픽 편집기와 프로토 타이핑 애플 리케이션은 확실히 좋지만 항상 시작하기가 쉽지는 않습니다.
제 의견으로는, 이러한 유형의 와이어 프레임은 디자인 과정 중에 항상 어느 시점에서 적합합니다. 그것을 이용하십시오!
presentation
이 글은 번역 글입니다. 원본 링크입니다.

presentation

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

presentation

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