Blog

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

필자는 멋진 개발 도구를 자주 소개하려고 노력하는 편이다. 훌륭한 도구가 인생을 풍요롭게 해준다는 나름대로의 소신이 있기 때문이다. 하지만 도구 맹신론자인 필자조차도 소프트웨어보다는 종이를 선호하는 경우가 있다. 설계를 구상한다던가, 무언가 생각하고 상상해야 할 일이 있으면 복사기 옆에 버려진 이면지를 가지고 돌아온다. Visio로 UML 다이어그램을 작성하거나, 포토샵으로 멋진 그림을 그리면 참 멋질 것 같지만, 의외로 시간만 소모하고 생각을 창의적으로 발현해 나가는 데는 도움이 되지 않는다.

A List Apart의 1월 23일자 칼럼에는 Paper Prototyping을 소개하는 글이 실렸다. 종이로 프로토타이핑하는 것이 왜 효과적인지 잘 설명한 글이다. [그림 1]과 [그림 2]는 웹 사이트의 로그인 인터페이스를 종이로 프로토타이핑한 것이다. 인터페이스를 묘사하는 데 그치지 않고, 사용자와의 상호 작용에 따라 웹 사이트가 어떻게 반응해야 하는지 보여준다. [그림 2]는 붉은색 종이로 오류가 발생했다는 것을 한눈에 알아보기 쉽게 표현했다. 실제로 종이 프로토타이핑은 웹 사이트나 데스크톱 애플리케이션의 사용자 인터페이스가 얼마나 편리한지 측정하기 위해 곧잘 쓰인다. 간단하게 종이로 사용자 인터페이스를 그려 넣고, 실제로 사용자가 어떻게 메뉴를 찾는지, 실수가 잦은 부분은 어디인지를 검사해본다. 필자가 처음 종이 프로토타이핑을 알게 된 것은 2004년 무렵이었는데, 어쩌다 보니 기회가 닿게 되어 팀 인터페이스 이성혜 대표의 세미나를 들을 수 있었다. 팀 인터페이스는 사용자 인터페이스 컨설팅을 전문으로 하는 회사인데, 국민은행의 인터넷 뱅킹 사이트를 리뉴얼할 때 종이 프로토타이핑을 활용했다고 들었다.

전문 소프트웨어로 작성한 프로토타이핑에 비하면, 종이 프로토타이핑은 메모나 낙서로 보일 수도 있다. 저자 Shawn Medero도 종이 프로토타이핑은 프로답지 않은 것 같을 수도 있다고 말한다. 그럼에도 불구하고 종이가 가진 장점을 잘 설명하는데, 필자는 100% 동감한다.

• 손으로 그리면 되므로 완성도 높은 디자인을 만들 때까지 여러 번 반복 작업하기가 쉽다.

• 값비싼 소프트웨어를 살 필요가 없다.

• 문서화하기 쉽다.

• 사용자 편의성을 테스트하기 쉽다.

Shawn Medero는 웹 사이트 사용자 인터페이스에 초점을 맞추어서 종이 프로토타이핑이 유용하다고 말하지만, 필자는 소프트웨어 설계에도 종이가 가장 유용한 수단이라고 생각한다. 얼마 전 플랫폼 개념도를 구상할 때도 이면지를 사용했었다. 생각나는 대로 적어 넣고, 새로운 종이에 조금 더 정리된 내용을 다시 정리한다. UML 다이어그램의 양식을 생각할 필요 없이 자신만 아는 그림을 그려 넣으면 되니 부담이 없다. 똑 같은 작업을 대여섯 번 반복하다 보면 어느새 초안이 완성된다. 이제 Visio 같은 모델링 도구와 워드 프로세서로 결과를 세련된 형태로 뽑아내기만 하면 완성이다. 오래 전에 데이터베이스 모델러의 강연에 참석한 적이 있었다. 강사는 ER-Win을 거의 사용하지 않는다고 말했다. 제대로 된 그림이 나올 때까지 손으로 그리고, 다시 그린다고 했다. 복사기 옆에 놓인 이면지를 한뭉치 가져와서 낚서하는 마음으로 가볍게 시작해보자. 어쩌면 어딘가에 뭉쳐있던 아이디어가 툭하고 풀려나올지도 모른다.

[그림 1] 종이 프로토타이핑 – 로그인

[그림 2] 종이 프로토타이핑 – 로그인 실패

커뮤니티 소개

• A List Apart

  지난 해에 웹 스피어를 뜨겁게 달구었던 주제 중 하나가 웹 표준이었다. A List Apart는 ‘실용 예제로 배우는 웹 표준’에도 소개된 멋진 사이트이다. 한 달에 기사 네 편이 게재되는데, 적은 양이지만 내용이 알차다. 필자는 A List Apart의 기사를 여러 번 활용했다. Going to Print를 읽고 프린트용 CSS에 대해 배웠고, Improving Link Display for Print를 보고 웹 페이지가 참조하는 웹 사이트 주소를 따로 뽑아내 프린트할 수 있게 되었다.

만화로 효과적인 프리젠테이션하기 다시 보기

필자는 지난 2월호에 ‘만화로 프리젠테이션하기’라는 소제목의 글을 실었다. 선마이크로시스템즈 사 디자인 팀의 Martin Hardee이 만화로 된 프리젠테이션 템플릿을 발표했었다. Mary는 발레 공연을 예약하려고 한다. 하지만 공연 티켓을 구매하려니 “Not Available”이라는 오류 메시지가 뜨고, 쿠키와 캐시를 비워야 하는 상황이 벌어진다. 쿠키는 뭐고, 캐시는 뭐란 말인가? 짜증이 난 Mary는 다른 예매 사이트에 접속한다. Martin은 만화를 통해 모두가 공감하기 쉬운 이야기를 보여주었다.

불과 한달 사이에 프리젠테이션 템플릿이 두 차례나 업데이트됐다. 지난번에 소개한 Marvin, Pravin, 그리고 Galina가 전화 상담원과 통화하는 모습을 담은 템플릿과 더불어 새로운 친구 Miguel의 템플릿이 추가됐다. 표지에 실린 Miguel의 얼굴은 어딘가 모르게 괴상한데, 싱긋 벌린 입술 사이로 드러난 치아 때문인 것 같다. 그리고 보니 영화 마스크의 짐 캐리 모습을 닮은 것 같기도 하다.

[그림 3] 전화 통화

Martin이 선마이크로시스템즈 사의 직원이다 보니 프리젠테이션 템플릿이 흔히 사용하는 파워포인트의 ppt 파일이 아니라 odp (Open Document Presentation) 파일이다. 지난번에는 ppt 파일이나 pdf 파일을 함께 제공해서 문제가 안 됐었다. odp 파일을 열려면 StarOffice나 OpenOffice가 있어야 한다. 윈도우나 리눅스 사용자라면 OpenOffice를, 매킨토시 사용자라면 NeoOffice를 무료로 다운로드 받을 수 있다. 이런 오피스 소프트웨어를 이용하면 odp 파일을 ppt 파일 등으로 다시 저장할 수 있다.

하지만 변환 작업을 한두 번 할거라면 굳이 오피스를 다운로드 받아서 설치하기 귀찮을 것이다. 고백하건대 필자도 마찬가지다. 필자는 Zamzar(http://www.zamzar.com)에 가서 문제를 해결했다. 이 사이트에선 각종 파일을 무료로 변환해주는데, odp 파일을 ppt 파일이나 pdf 파일 등으로 손쉽게 바꿀 수 있었다.

아차, 하마터면 깜박 잊고 넘어갈 뻔 했다. Martin의 이 글을 읽을 것이라 생각하지는 않지만, 선마이크로시스템즈 사 블로그 어워드에서 Best Graphics in a blog로 뽑혀서 필자 역시 기쁘다.

오픈 소스 프로젝트에 참여하자

Doxygen, JavaDoc, RDoc, NDoc. 각각이 C++, Java, Ruby, 그리고 C#을 대표하는 문서 생성 도구이다. [리스트 1]처럼 정의된 양식에 맞춰 주석을 달아두면 MSDN 라이브러리와 같은 멋진 문서를 자동으로 생성해주는 도구이다. 대부분의 오픈 소스 프로젝트가 API 문서를 만드는 데 이런 도구를 활용한다. 또한 현업에서도 제법 쓰여서, 사용 경험이 있는 개발자를 찾기가 어렵지 않다.

[리스트 1] C# XML 주석

/// <summary>
/// <para>특정 확장자를 가진 파일을 업로드 할 수 있는지 확인한다.</para>
/// </summary>
/// <param name="fileExtension">이미지 파일의 확장자</param>
/// <returns>업로드 가능 여부</returns>
/// <example>
/// <code>
/// FileUploader uploader = CreateFileUploader();
/// if( uploader.Uploadable( "jpg" ) == false )
/// {
///     Console.WriteLine( "Can not upload '*.jpg' files." );
/// }
/// </code>
/// </example>
/// <seealso cref="FtpFileUploader"/>
/// <seealso cref="HttpFileUploader"/>
public abstract bool Uploadable(string fileExtension);
		

[그림 4] 자동 생성된 클래스 명세서 예제

필자가 C#으로 한참 개발할 무렵에는 NDoc을 애용했었다. XML 주석([리스트 1] 참고)만 있으면 MSDN과 같은 멋진 문서를 자동으로 생성해주었기에 인기가 많았다. 더구나 오픈 소스 프로젝트의 산물이었기 때문에, 비용 지불을 하지 않아도 됐었다. 한국어 환경을 100% 지원하지 못해서 ‘???’로 표시된 부분을 텍스트 변환기로 제거하는 등 불편한 점이 많았어도 이런 훌륭한 도구가 있다는 것에 만족했었다.

학업에 복귀하니 NDoc을 사용할 일이 없었다. 그러다가 인턴이 되어 다시 문서화를 할 일이 생겼다. 한데 NDoc 프로젝트가 중단됐다는 사실을 알게 됐다. C# 개발자라면 한 번쯤 Ndoc을 사용해봤을 정도로 대중적인 프로젝트였는데 충격이었다. 게다가 프로젝트의 중단된 것이 커뮤니티의 지원이 없었기 때문이라고 하니, 안타깝기만 했다. 대중적인 인기에도 불구하고 재정적 또는 개발 측면의 지원이 거의 전무 하다시피 했다고 한다. 버전 1.3이 출시된 이래로 기부 건수가 11차례에 불과했으니 할 말이 없다. 주 개발자인 Kevin Downs가 고군분투하다가 끝내 손을 놓게 된 것도 이해가 되었다. (자세한 이야기는 Sandcastle – Microsoft CTP of a Help CHM file generator on the tails of the death of NDoc를 참고하기 바란다.)

오픈 소스의 가장 큰 장점으로 커뮤니티의 지원을 꼽는 경우가 많긴 하지만, 이렇게 지원이 부족하여 중도 하차하는 프로젝트도 무시 못할 정도로 많다. 필자는 이번에 스스로를 돌아보게 되었다. 프로젝트의 달콤한 성과만 빼먹고 기여는 하지 않은 것 같아, 속이 씁쓸했다. 그래서 금년에는 짬짬이 오픈 소스 프로젝트에 참여하려고 한다. 이미 참여할 프로젝트도 정해놓았다. 여러분도 관심 가는 프로젝트가 있다면 망설이지 말고 동참하면 어떨까? 세상에 기여하면서 자신의 실력을 갈고 닦을 기회가 되리라 믿는다

필자 노트

• C# 문서 자동화 도구 Sandcastle

  NDoc 프로젝트가 중단되었지만, 다행스럽게도 마이크로소프트 사가 Sandcastle이라는 대안을 내놓았다. 아직 CTP (Community Technology Preview) 버전이라 그래픽 사용자 인터페이스가 제공되지 않는다. 하지만 Sandcastle Help File Builder라는 프로젝트가 있으니 손쉽게 문서를 생성할 수 있다. NDoc과는 달리 한국어 지원이 잘 돼서 ‘???’와 같은 외계어를 마주칠 일도 없다. 자세한 내용은 필자가 쓴 [RedBook C#] 문서 자동화편를 참고해주길 바란다.

PowerShell 다시 보기

커뮤니티 노트 첫 시간(1월호)에 PowerShell을 소개한 바 있다. 마이크로소프트가 출시한 새로운 쉘 환경은 .NET Framework와 연동돼서 필자가 흥분을 감추지 못했다. 하지만 1월에는 막 정식 버전이 출시된 통에 실제로 도움이 될만한 스크립트 예제를 찾기 어려웠다. 덕분에 Yahoo! Weather로부터 날씨 정보를 가져오는 스크립트를 소개할 수밖에 없었다. 원고를 준비하다가 그때의 아쉬움이 떠올라 CodePlex에 들렸더니, 아니나 다를까 관련 프로젝트가 여럿 있었다.

• PowerShell Community Extensions

  PowerShell 함수나 스크립트 등의 확장 기능을 제공하는 프로젝트이다. 유사한 성격의 프로젝트로 PowerShell Scripts가 있다. 하지만 PowerShell Scripts는 활성화되지 못해서 출시조차 못하고 있다. 반면에 이 커뮤니티는 버전 1.1까지 내놓았다. 대체로 Base64 문자열이나 XML을 변환하는 기능이 많이 추가되었는데, XML 기반으로 작업할 일이 많은 최근의 개발환경을 생각하면 당연하지 않나 생각한다.

• ShinyPower

  필자가 개인적으로 고대했던 프로젝트이다. PowerShell 콘솔에서 매번 Help 명령어를 쳐가며 문서를 보려니 힘들었다. 문서를 읽는 것 자체가 어려운데다 예제를 마우스로 드래그하기도 힘들었다. 이제는 ShinyPower로 이런 불편이 해소됐다. 프로젝트 사이트에서 제공하는 스크린샷을 보면 문서가 영어로 표시되어 있지만, 한글판 PowerShell을 설치했다면 훌륭한 한글 문서를 볼 수 있다.

[그림 5] ShinyPower

커뮤니티 소개

• CodePlex

  마이크로소프트의 오픈 소스 프로젝트 호스팅 사이트다. SourceForge나 Ruby Forge 등을 떠올리면 떠올리면 된다. 프로젝트 대부분이 .NET Framework 기반인데, 흥미로운 라이브러리나 도구가 많다. 필자는 CodePlex의 RSS 피드를 등록해 놓고, 최근에 가장 인기 있고 활발한 프로젝트를 주시하고 있다. 아쉬운 점은 항상 몇 개의 프로젝트가 번갈아 가며 소개되는 통에 인기는 덜하지만 개인에겐 흥미로운 프로젝트를 놓치기 십상이라는 점이다. 그래서 생각날 때마다 한 번씩 들러서 알아둘 한 프로젝트가 없는지 확인한다. 블로그나 del.icio.us 등이 Web 2.0 서비스에서 많이 쓰이는 태그 시스템이 도입되어 있어서, 비교적 손쉽게 자신이 원하는 프로젝트를 찾아낼 수 있다.