코드 프로토 타이핑

먼저, 방해가되는 것을합시다. 코드 프로토 타이핑은 우리가 논의하려는 맥락에서 잘못된 이름입니다. 코드는 무섭게 들리지만 프로그래머가하는 일입니다. 우리가 여기서 말하는 것은 훨씬 덜 무서운 것입니다. 우리가 장려하려는 것은 매우 간단한 HTML과 약간의 CSS를 사용하여 어떤 다이어그램이나 와이어 프레임 도구보다 훨씬 더 나은 아이디어를 전달하는 프로토 타입을 생성 할 수 있다는 기본 개념입니다. 할 수 있습니다.

HTML이나 CSS 모두 프로그래밍이 필요하지 않습니다. HTML은 페이지의 구조를 설명하고 CSS는 레이아웃과 장식을 처리합니다. 관련된 부두, 숨겨진 함정 또는 신비하게 잘못 될 수있는 어떤 것도 없습니다. 작성한 내용이 바로 결과입니다. 그것은 매우 즉각적인 만족의 형태이기도합니다.

마크 업 작성은 많은 대행사 워크 플로에서 개발 작업과 함께 번들로 제공됩니다. 마크 업을 작성하는 디자이너는 흔들리는 말똥만큼 드물며, 웹이 향하는 방향과 다소 상충되는 것처럼 보입니다. 반응 형 디자인이 선호되고 웹 타이포그래피가 마침내 웹 글꼴을 사용할 수있는 상태로 성숙해지면서 웹 사이트 사진을 제작하는 시대가 넘쳐납니다. 디자이너가 반응을 시작하지 않으면 웹을위한 새로운 사고 방식과 디자인 방식에 적응하는 동안 매우 불편한시기가있을 것입니다.



코드의 프로토 타이핑은 전체적인 이점을 제공하고 단점은 거의 없습니다. 이 문서는 HTML 또는 CSS에 대한 자습서로 설계되지 않았습니다. 다음과 같은 내용이 많이 있습니다. 예를 들어 Anna Debenham의 집중 강좌를 확인하세요. ) 그러나 HTML 프로토 타이핑을 워크 플로에 구축하는 데 사용할 수있는 몇 가지 근거, 트릭, 프로세스 및 기술에 대한 자세한 설명입니다.

혜택

다이어그램 또는 와이어 프레임 도구를 사용하여 웹 사이트 또는 앱에 대한 사용자 경험을 디자인하는 것은 여러 가지 이유로 문제가 있습니다. 첫째로 가장 중요한 것은 다른 어떤 것보다 경험을 속이는 것입니다. 도구를 사용하여 아무리 엉뚱하거나 대화 형이더라도 결과물은 일반적으로 실제 웹 사이트와 같지 않습니다. 실제로 HTML을 뱉어내는 몇 가지 도구는 HTML 렌더링 작업을 제대로 수행하지 못합니다. 입찰을 수행하기 위해 다이어그램을 해킹하는 데 더 많은 시간을 소비하고 파일이 너무 다루기 어려워 져 유지 관리 및 작업에 악몽이됩니다.

더 중요한 것은 도구를 사용하여 HTML을 작성하면 실제로 HTML이 무엇인지 배우는 것이 아니므로 아이디어를 구축하는 기술의 경계와 뉘앙스를 익힐 수있는 기회를 놓치게됩니다. 코드를 아는 디자이너와 UX 실무자의 지지자 인 Jared Spool은 다음과 같이 멋지게 설명합니다. '작업중인 매체를 더 잘 이해할 수있을 것입니다.'그리고 '코딩하기 쉬운 것과 코딩하기 어려운 것을 안다면, 아이디어를 더 빨리 구현할 수 있습니다 (개발 시간이 제한된 리소스이기 때문에 더 많이 구현할 수 있습니다). 매체가 잘하는 부분과 효과적이지 않은 부분을 이해하면 정보에 입각 한 디자인 결정을 내릴 수 있습니다. '

이러한 용어로 살펴보면 웹용으로 디자인하는 사람은 누구나 그 내용을 이해하지 못할 것입니다. 결국 프로덕션 마크 업에 대한 책임이 없더라도 (나중에 더 자세히 설명하겠습니다)이를 수행하는 사람들과 더 많은 정보에 입각 한 토론을 할 수 있으며 물론 원하는대로 정확히 무엇을 만들 것인지에 대한 정보를 제공 할 수 있습니다.

네이티브 HTML에서 프로토 타이핑의 두 번째 분명한 이점은 웹 사이트 또는 앱의 디자인이 브라우저에 속한 위치에 제공된다는 것입니다. PDF 나 종이, 멋진 파워 포인트 프레젠테이션이 아닙니다. 테스트중인 사용자 또는 프레젠테이션중인 클라이언트는 자연 서식지에서 제품을 사용하게됩니다. 상호 작용은 실제적이고, 클릭 / 터치 동작은 완전히 자연스럽고, 텍스트는 사람들이 익숙한 방식으로 보이고 반응하며, 양식은 제대로 작동합니다. 프로토 타입을 실제 의도 한 경험에 더 가깝게 만들면 사용자와 클라이언트 모두로부터 훨씬 더 충실한 피드백을받을 수 있습니다. 사용자가 자연스럽게 프로토 타입에 참여하는 데 필요한인지 과정이나 상상력에는 차이가 없습니다. 따라서 설계중인 제품의 의도 된 전달과 실제로 일치하는 패러다임에서 작업 할 때 디자이너로서의 생활이 훨씬 쉬워집니다.

근사치가 아닌 실제 상호 작용을 생성 할 수 있다는 명백한 이점 외에도 다른 장치에서 작업을 쉽게보고 테스트 할 수 있다는 사실은 신의 선물입니다. 현재 마크 업보다 반응 형 사이트를 효과적으로 디자인 할 수있는 다른 방법은 없습니다. 따라서 프로젝트에서 해당 요구 사항을 충족해야하는 경우 기술을 매우 빨리 수용해야합니다. 그렇지 않으면 다른 사람이 해당 프로젝트를 선택해야합니다.

다른 장치에서 작업을보고 테스트 할 수 있다는 사실은 신의 선물입니다 (Nathan Ford가 손으로 모델링 한 것에 대한 크레딧).

다른 장치에서 작업을보고 테스트 할 수 있다는 사실은 신의 선물입니다 (Nathan Ford가 손으로 모델링 한 것에 대한 크레딧).

신화 파헤 치기

코드 프로토 타이핑은 (대부분의 사람들에게) 프론트 엔드 개발자가되는 경로가 아니며 프론트 엔드 개발자에게 어떤 종류의 위협도 지적해야합니다. 순전히 실용적인 용어로는 웹의 자연어이지만 HTML을 도구로 사용하여 아이디어를 표현하는 것입니다. 그리고 개발자가 자신의 발가락이 밟 히고 있다고 느끼고 귀하의 노력에 비웃을 수 있다고 느낄 때 때때로 논쟁이 발생합니다. 이 모든 것을 처음 접했을 때 상처를주고 엄청나게 낙담 할뿐만 아니라 완전히 무의미합니다. 프로토 타이핑에서 코드 스노 버링을 할 수있는 곳은 없습니다. 만드는 HTML과 CSS가 작업을 수행하는 것이며 프로덕션으로 만들려는 의도가 아니라는 것을 분명히하면 사람들은 안심할 것입니다. 즉, 마크 업과 CSS를 완벽하게 만드는 데 초조해하지 않을 것입니다. 순전히 기능적이어야하며, 인식을 넘어 필연적으로 변경되거나 버려지는 프로토 타입이기 때문에 더 빠르고 때로는 더러울수록 좋습니다.

또한 여기서 도구에 대해 간략히 언급해야 할 것입니다. PC 또는 Mac에 아무것도 설치하지 않고도 HTML 프로토 타이핑을 시작할 수 있습니다. 물론 텍스트 편집을 좀 더 맛있게 만드는 전문 소프트웨어를 구입할 수 있지만 텍스트 편집기 선택은 매우 개인적인 일이므로 몇 가지를 시도하여 가장 좋아하는 것을 확인하십시오. 대부분은 무료 평가판을 가지고 있으므로 어떤 것이 당신에게 적합한 지 확인하십시오.

사기

다음 요점으로 깔끔하게 연결됩니다. 의심 스러우면 속임수를 쓰십시오. 대부분의 현명한 개발자는 같은 일을 두 번하지 않습니다. 그들은 코드를 재사용합니다. 좋은 습관입니다. 하지만 그 이상으로 자신 만의 부품 키트를 만들고 (자세한 내용은 조금 더) 웹을 둘러보세요.

HTML과 CSS로 작업하고 있기 때문에 곧 사이트에서 후드를 터 뜨리고 (오른쪽 클릭, 소스보기) 일부 소스 코드를 만드는 데 익숙해 질 것입니다. 바퀴를 재발 명하는 이유는 무엇입니까? 필요한 양식과 유사한 양식이 있으면 확인합니다. 디자인 한 이미지 갤러리와 거의 비슷한 이미지 갤러리가 있다면 빌려보세요.

물론 여기에는 큰 경고가 있습니다. 어떤 종류의 상식을 보여주고 도덕적 나침반을 품위로 설정해야합니다. 전체 웹 사이트를 대량으로 훔치거나 실제로 작성자의 명시적인 허가없이 '빌려온'코드를 프로덕션에 적용하는 것은 절대로 멋지지 않습니다. 솔직히 말해서 유용한 튜토리얼 사이트와 오픈 소스 패턴 라이브러리가 많이 있습니다 (예 : hackbook.hackasaurus.org/) : 꼭 그럴 필요는 없지만 경고를 받았습니다!

Mozilla

Mozilla의 Hackbooks는 해킹을위한 편리한 코드 스 니펫 라이브러리입니다.

다른 소스에서 미리 빌드 된 마크 업을 잡아 먹는 것 외에도 프로토 타입의 더 힘들고 맞춤화 된 요구 사항을 지원하는 온라인 도구가 많이 있습니다. 가장 큰 두 가지 시간 싱크와 좌절의 원인은 양식과 테이블입니다. 가장 강인한 프론트 엔드 개발자도 복잡한 테이블이나 양식을 작성해야하는 것에 신음 할 것이므로 지루하고 약간 까다 롭다고 생각하더라도 실망하지 마십시오. 고맙게도 우리를 위해 많은 작업을 수행하는 수많은 스마트 온라인 도구가 있으며 간단한 GUI에서 꽤 괜찮은 마크 업을 자동 생성합니다. 빠른 Google 검색은 이러한 고통스러운 작업을 처리하고 필요한 경우 적응할 수있는 코드 스 니펫을 제공하여 수많은 시간과 번거 로움을 절약 할 수있는 다양한 도구를 제공합니다.

참고 용으로 북마크 폴더에 보관하는 두 가지는 Kotatsu , 클래스를 셀과 행에 매우 쉽게 삽입 할 수있는 깔끔한 테이블 빌더입니다. pForm , 정말 매끄러운 드래그 앤 드롭 양식 빌더로, 정말 복잡한 양식도 쉽게 조립할 수 있습니다. 자신이 좋아하는 것을 찾을 수있을 것입니다.하지만 무언가에 맞서 싸우고있는 자신을 발견하면 다른 사람이 이전에 똑같은 일을 경험 한 다음 그 고통을 덜어 줄 약간의 스크립트 나 위젯을 만들었 음을 확신 할 수 있습니다.

960.gs

Nathan Smith는 960.gs , 레이아웃을위한 그리드를 사용하여 프로토 타이핑 (및 원하는 경우 제작)을 완벽한 케이크 조각으로 만드는 환상적인 작은 도구 패키지입니다. 이 패키지에는 Fireworks 및 Photoshop 용 그리드 템플릿과 가이드부터 스케치 시트, 그리고 가장 중요한 것은 그가 만든 모든 마법을 수행하는 CSS 라이브러리에 이르기까지 필요한 모든 것이 포함되어 있습니다.

960을 사용하는 것은 엄청나게 간단합니다. HTML에서 CSS 파일을 참조하기 만하면 마크 업에 매우 간단한 클래스 이름을 사용하여 몇 분 안에 강력한 프로토 타입을 레이아웃 할 수 있습니다. net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/에 꽤 명확한 튜토리얼이 있으므로 여기서는 시도하고 다루지 않겠습니다. 기본에 대해 머리를 숙이고 있다면 왜 다른 방법으로했는지 궁금 할 것입니다.

960 그리드 시스템은 레이아웃에 그리드를 사용한 프로토 타이핑을 완벽한 케이크 조각으로 만듭니다.

960 그리드 시스템은 레이아웃에 그리드를 사용한 프로토 타이핑을 완벽한 케이크 조각으로 만듭니다.

방법

코드 프로토 타이핑은 기본 사항을 숙지하고 나면 작업 및 테스트 프로세스의 속도를 확실히 높일 수 있습니다. 그러나 이에 적응하려면 자신의 워크 플로를 약간 조정해야 할 것입니다. 대부분의 프로젝트에서 와이어 프레임 작업을 거의 중단했습니다. 작업중인 디자인의 모든 세부 사항을 열심히 다이어그램으로 작성하는 대신 간단한 스케치로 더 빠르고 느슨하게 작업합니다. 종종 전체 페이지가 아니라 요소 : 사용자의 목표와 요구에 따라 프로토 타이핑을 시작한 다음 이러한 것들이 더 완전한 레이아웃으로 결합됩니다.

먼저 스케치 : 나중에 프로토 타이핑을 시작할 때 완전한 레이아웃으로 모이는 페이지에 요소의 간단한 스케치를 그립니다.

먼저 스케치 : 나중에 프로토 타이핑을 시작할 때 완전한 레이아웃으로 모이는 페이지에 요소의 간단한 스케치를 그립니다.

결정을 검증하고 단순성을 촉진하는데도 매우 유용합니다. 다이어그램 도구에서 상자를 그릴 때 너무 쉽기 때문에 페이지에있는 모든 항목을 멍청하게 정리 한 다음 섞는 대신 각 결정을 합리화하는 경향이 있습니다. 필요한 작업을 수행하고 실제 페이지에서 계층, 지형 및 흐름을 설정하는 데 정말 중요한 작업에 집중하세요. 실제 페이지를 다룰 때 아이디어가 결합되는 방식에 대한 관점이 얼마나 바뀌는 지 놀랍습니다.

우리는 대부분의 프로토 타입에 대해 공유 Dropbox 폴더에서 작업하는 경향이 있으며 클라이언트에게 해당 폴더에 대한 액세스 권한을 부여합니다. 공유 방법은 개인 설정에 따라 다릅니다. 매우 lo-fi로 이동하여 로컬 컴퓨터에서 작업하고 zip 파일을 보내거나 친숙한 시스템 관리자와 스테이징 서버가 있으면 항상 파일을 덤프 할 수 있습니다. 문서 폴더 등에서 프로토 타입을 실행하는 것 이상으로 웹 서버를 사용하는 방법에 대한 빠른 메모입니다. 간단한 PHP 또는 aspx로 서버 측 스크립팅을 추가하면 나중에 고급 프로토 타입을위한 더 많은 옵션이 제공됩니다. 아주 적은 노력이나 실제로 코딩 능력으로 매우 유용한 기능을 얻는 것이 정말 간단하기 때문에 고려할 가치가 있습니다.

모델 시트 만드는 방법

변경 관리는 분명히 중요합니다. 폴더에서 프로토 타입을 실행하고 버전 번호를 복제 한 다음 늘리는 것은 매우 간단하지만 효과적인 방법입니다. 이 단계에서 적절한 버전 관리에 대해 생각하기 시작하는 것은 과도하지만 나중에 프로토 타입이 복잡해 지거나 여러 사람이 작업하는 경우 고려할 가치가 있습니다.

고급 팁

기본 HTML 학습의 기초를 넘어서 만들고있는 페이지의 내용에 익숙해 질수록 앞으로 많은 시간과 노력을 절약 할 수있는 멋진 트릭과 팁을 개발하게 될 것입니다. 각 프로젝트에는 고유 한 요구 사항이 있지만 셀 수없이 많은 시간을 절약 할 수있는 두 가지 조언을 제공 할 수 있다면 다음과 같습니다.

  1. 물건의 라이브러리를 구축하십시오. 어떻게하든 상관 없습니다. 스 니펫 폴더이거나 다음과 같이 더 구조화 된 폴더 일 수 있습니다. Coda 클립 (문서로 드래그하여 재사용 할 수있는 작은 코드 덩어리). 어느 쪽이든, 당신은 곧 프랑켄슈타인을 거의 모든 것으로 함께 만들 수있는 비트 더미를 개발하게 될 것입니다.
  2. 사용에 포함됩니다. 전체 프로토 타입 (내비게이션, 바닥 글 등)에서 변경하거나 변경하지 않아도되는 모든 페이지에서 사용하는 항목이있는 경우 해당 섹션을 꺼내 문서에 동적으로 포함하면 유지 관리 만하면됩니다. 한 곳에서. 변경하면 사용하는 모든 페이지에 자동으로 적용됩니다. 이것은 서버 측 스크립팅으로 제한되었습니다. PHP 또는 ASP.

하지만 jQuery의 경이로움 덕분에 이제는 Johann Burkard의 환상적이고 간단한 inc.js 스크립트 . 어떤 경로를 선택하든이 기술을 사용하면 문자 그대로 시간을 절약 할 수 있습니다.

inc는 ActiveX 컨트롤이없는 IE, 원격 콘텐츠의 선언적 포함, 콘텐츠 변환을위한 사전 및 사후 포함 콜백을 포함합니다.

inc는 ActiveX 컨트롤이없는 IE, 원격 콘텐츠의 선언적 포함, 콘텐츠 변환을위한 사전 및 사후 포함 콜백을 포함합니다.

충실도

마지막으로, 확실히 중요한 것은 충실도의 문제입니다. HTML 및 CSS 프로토 타이핑의 장점은 하나의 HTML 세트를 사용하여 CSS를 전환하는 것만으로 동일한 문서에 다양한 수준의 스타일을 적용 할 수 있다는 것입니다. 따라서 기존 와이어 프레임처럼 매우 간단한 흑백 상자를 시작한 다음 특정 사용 사례에 대한 충실도를 높일 수 있습니다. 사용자 (및 클라이언트)는 종종 매우 축소 된 와이어 프레임과 관련하여 어려움을 겪습니다. 따라서 테스트를 위해 더 많은 UI '광택'을 적용하여 프로토 타입이 실제 제품에 더 가깝게 느껴지도록 할 수 있습니다. 물론이 작업을 직접 수행하거나 디자인 팀과 협력하여 초기에 시각적 언어로 롤링을 시작하여 실제 상황에서 사용자에게 어떻게 적용되는지 확인할 수 있습니다.

따라서 코드에서 프로토 타이핑을 수행하는 것에 대해 긴장하는 사람에게는 그렇게하지 마십시오. 작게 시작하고 천천히 진행하세요. 필요한 경우 프런트 엔드 개발자에게 도움과 조언을 요청하세요 (물지 않습니다). 빠른 속도를 원하면 UX Bootcamp 과정 매우 저렴하며 며칠 만에 시작할 수 있습니다.

이 기능이 마음에 들면 Anna Debenham의 집중 강좌도 확인하세요. HTML 및 CSS로 프로토 타입 빌드 .