depict는 간소화된 와이어프레임인 빵판(breadboards)을 빠르게 그릴 수 있는 웹 기반 소프트웨어입니다.

이 문서는 depict의 전체 기능을 설명합니다. 튜토리얼을 보고 싶다면 depict 튜토리얼 문서를 읽어주세요.

장소, 아이템, 링크

브레드보딩의 핵심 요소는 장소, 아이템, 링크입니다.

장소

최상위 수준의 항목은 장소를 나타냅니다.

장소는 화면, 대화상자, 메뉴, 팝업 등을 나타내는 추상적인 개념입니다. 브레드보드를 그릴 때에는 구체적인 UI 요소가 아니라 내용에 집중하기 위해 의도적으로 추상적인 용어를 사용합니다.

홈
소개
연락처

아이템

각각의 장소는 0개 이상의 아이템을 가질 수 있습니다. 아이템은 들여쓰기로 표현합니다.

만약 홈 장소에 3개의 아이템이 있다면 다음과 같이 표현할 수 있습니다.

홈
  헤더
  메인 콘텐츠
  푸터

소개
연락처

아이템은 하위 아이템을 가질 수 있습니다.

홈
  헤더
    로고
    네비게이션
  메인 콘텐츠
  푸터

소개
연락처

- 기호를 쓰면 구분자가 만들어집니다.

홈
  메뉴1
  메뉴2
  -
  메뉴3

링크

아이템에서 다른 장소로 이동하는 링크를 걸 수 있습니다. 링크는 => 기호로 표시합니다.

홈

소개
  설명
  홈으로 돌아가기 => 홈

이제 소개 장소에서는 설명과 홈으로 돌아가기라는 두 개의 아이템이 있고, 홈으로 돌아가기 아이템은 홈 장소로 연결되었습니다.

만약 아이템의 이름과 연결된 장소의 이름이 동일하다면 링크를 표현할 때 장소의 이름을 생략할 수 있습니다.

홈

소개
  설명
  홈 =>

타입 어노테이션

작업이 더 진행됨에 따라, 브레드보드에 더 많은 세부사항을 추가하고 싶을 수 있습니다. depict는 이를 위해 여러 종류의 타입 어노테이션을 제공합니다.

타입 어노테이션은 . 으로 시작하며, 아이템의 이름 뒤에 붙입니다.

아이템에 타입 어노테이션 추가하기

.input, .button을 아이템 이름 뒤에 붙이면 텍스트 필드나 버튼을 만들 수 있습니다. 아이템 이름 앞에 []를 붙이면 체크박스를 만들 수 있습니다. 아이템 이름 앞에 ()를 붙이면 라디오 버튼을 만들 수 있습니다.

회원 가입
  이메일 .input
  패스워드 .input
  [] 약관에 동의합니다
  가입하기 .button

장소에 타입 어노테이션 추가하기

이 매뉴얼의 서두에서 언급했듯이, 장소는 추상적인 개념입니다. 브레드보딩에서는 의도적으로 추상적인 용어를 사용하여 내용에 집중할 수 있도록 하고 있습니다.

하지만 작업이 진행됨에 따라, 더 많은 세부사항을 추가하고 싶을 수 있습니다. 예를 들어, 홈은 페이지로, 회원 가입은 대화상자로 만들고 싶을 수 있습니다. 장소에 타입 어노테이션을 추가하면 의도를 명확히 표현할 수 있습니다.

홈 .page
회원 가입 .dialog

정식 문법과 축약 문법

[], (), => 등의 기호는 타입 어노테이션을 쉽게 쓰기 위한 축약 문법입니다. 링크를 나타내는 => 기호 대신 정식 문법인 .link 타입 어노테이션을 사용해도 됩니다.

홈

소개
  설명
  홈 .link target=홈

위 문법은 아래 문법과 동일합니다.

Home

About
  Description
  Home => Home

그리고, 위 문법은 아래 문법과 동일합니다.

Home

About
  Description
  Home =>

이와 유사하게 []와 ()는 각각 .checkbox와 .radio 타입 어노테이션의 축약 문법입니다.

회원 가입
  이메일 .input
  패스워드 .input
  약관에 동의합니다 .checkbox

만약 간결함보다 일관성을 더 선호한다면, 축약 문법 대신 정식 문법을 사용하세요.

스타일 어노테이션과 와이어프레임 모드

타입 어노테이션은 의미 정보를 담기 위해 사용합니다. 반면, 스타일 어노테이션은 화면에 보이는 표현을 바꾸기 위해 사용합니다.

브레드보드를 그리는 맥락에서는 의도적으로 표현에 대해 고민하지 않음으로써 내용과 의미에 더 집중한다고 말했습니다. 하지만 작업이 더 진행됨에 따라 브레드보드를 더 구체적인 모습으로 다듬고 싶을 수 있습니다. 스타일 어노테이션은 이럴 때 사용합니다.

:row 모드와 :col 모드

상위 아이템에 :row 스타일 어노테이션을 추가하면 해당 아이템에 속한 하위 아이템들이 수평으로 그려집니다. :col 스타일 어노테이션을 추가하면 수직으로 그려집니다.

홈
  헤더 :row
    로고
    제목
    검색 .input
    도움말

헤더 아이템에 :row 스타일 어노테이션을 추가했기 때문에, 이 영역은 와이어프레임 모드로 렌더링됩니다. 와이어프레임 모드는 의도적으로 브레드보드 모드와 다르게 보이도록 구현되어 있습니다.

한편, 헤더라는 이름을 생략하고 스타일 어노테이션만 사용할 수도 있습니다. 이렇게 하면 관련된 아이템들을 시작적으로 묶어줄 수 있습니다.

홈
  :row
    로고
    제목
    검색 .input
    도움말

:fill 모드

아이템에 :fill을 추가하면 해당 아이템이 화면의 남은 영역을 채워줍니다. 아래 예시에서는 익명의 :fill 아이템을 추가하여 로고 및 제목이랑 나머지 항목 사이에 공간을 만들어줍니다.

홈
  :row
    로고
    제목
    :fill
    검색 .input
    도움말

혼합 피델리티mixed-fidelity 프로토타이핑

스타일 어노테이션을 추가하기 시작하면, 이 작업물이 브레드보드인지 와이어프레임인지 구분하기 어려워집니다. 브레드보드와 와이어프레임 사이의 어딘가의 어중간한 상태일텐데, 이는 전혀 이상하지 않습니다. (참고: Mixed-fidelity prototyping of User Interface)

피델리티의 일관성에 지나치게 집착하지 마세요. 필요한 부분에만 세부사항을 추가하고, 나머지는 그냥 두세요.

브레드보드로 간단히 시작한 뒤에 필요한 시점에 필요한 부분에만 제한적으로 세부사항을 추가하기를 권장합니다. depict는 이러한 작업 방식을 지원하기 위해 설계되었습니다.

다음은 일반적인 혼합 피델리티 프로토타입의 사례입니다.

홈
  헤더 :row
    로고
    검색 .input :fill
    회원 가입 .button =>
  메인 :row
    카테고리 :col
      여성
      남성
      잡화
    상품 목록 :col
      상품*3 :row
        이미지
        상품명 => 상품 상세 :fill
        가격
  푸터 :col
    소개 =>
    저작권

상품 상세
  상품 정보 요약
  상세 설명
  리뷰

회원 가입
  ID .input
  Password .input
  -
  Sign-in .button => 홈

기타 기능

보드를 웹 사이트에 임베딩하기

공유된 보드를 iframe 또는 PNG 이미지로 다른 웹사이트에 임베딩할 수 있습니다.

• 우선 보드의 공유 설정을 “Anyone with the link”로 수정하세요.
• 공개된 보드의 URL 뒤에 .embed 를 추가하면 iframe 임베드용 화면이 나옵니다. 예를 들어 보드의 주소가 https://depict.page/boards/abc123이라면, 임베드용 주소는 https://depict.page/boards/abc123.embed 입니다. .embed 대신에 .png를 추가하여 주소를 https://depict.page/boards/abc123.png로 바꾸면 PNG 이미지가 나옵니다.