LAYER BUILDER
Designing What to Build
모션 디자이너에서 구조를 설계하는 디자이너로 개인 브랜드를 다시 세운 셀프 리브랜딩입니다
- 기획, 디자인, 디렉팅
- 이주영
- 카피
- 초안/결정 이주영, 교정 Gemini
- 리서치 보조
- Claude
- 개발 구현
- Claude Code, 정적 HTML
- 초기 아카이브
- 대학 과제(디지털디자인경영, 2021) 발표 자료
Project Overview
2021년 대학 과제에서 ‘어느 분야든 차근차근 층을 쌓듯이 디자인하는 레이어빌더’라는 자기소개로 이름을 붙였습니다. 2022년부터 BDM과 NAU에서 3D 모션 실무를 하는 동안 이름만 남고 본래의 뜻은 흐려졌습니다. BX로 작업 영역을 넓히기에 앞서, 이름의 의미를 실제 작업 방식으로 다시 세운 리브랜딩 기록입니다.
Brand Story
처음에는 프로젝트를 주제 선정, 무드보드, 시각화의 세 단계로 나누고 각 단계를 첫째부터 셋째 층으로 기록했습니다. 디자이너의 역할은 따로 분석, 소통, 시각화의 세 층으로 그렸습니다. 이름은 그대로였지만, 층이 가리키는 대상은 작업 시기마다 달라졌습니다.
- Building Layer by Layer 2021
흰 바탕과 12칸 선 격자 위에 아이소메트릭 마름모 썸네일을 두었습니다. 당시에는 층을 과정의 단계로, 반듯한 정렬을 좋은 디자인으로 보았습니다.
2021 디자이너의 역할을 분석, 소통, 시각화의 세 층으로 나눈 장표 - Motion Design Practice 2023
검정 바탕에 마름모 와이어프레임 표지를 썼습니다. 이때부터 참여 파트와 수정 전후 비교를 넣어 내 담당 범위를 구분해 적기 시작했습니다.
2023 담당 범위와 참여 인원을 구분해 적은 상세 화면 - Building a City — 덜어낸 안 2026 초 시안
프로젝트 11개를 건물로 세우고, 이를 모아 도시이자 브랜드로 보여주려던 화면입니다. 첫 화면에서 내 역할과 전체 작업 목록이 한눈에 읽히지 않아 홈 화면에서는 뺐습니다.
2026 초 시안, 프로젝트 11개를 건물로 세웠던 도시형 홈 화면 - Designing What to Build 2026
종이와 먹색 바탕에 파랑 한 색과 12칸 격자만 남겼습니다. 모든 작업 설명은 프로젝트마다 필요한 층으로 나눠 이어집니다.
2026 당시 버전: 대표 작업 4선과 네 단계로 구조화한 상세 화면(지금 Featured는 3개)
Issue → Goal
IssueGoal
- 01
마름모나 건물 같은 외형이 브랜드의 정체성을 대신하고 있었습니다.
화려한 그래픽에 앞서, 무엇을 왜 만들지 먼저 판단하는 설계자로 소개합니다.
- 02
결과물이 무엇인지는 보였지만, 어떤 조건에서 왜 그렇게 만들었는지는 보이지 않았습니다.
층이라는 개념을 화면 장식이 아니라 논리를 전개하는 정보 구조로 씁니다.
- 03
BX 실무자의 시선에서는 문제를 푸는 설계자가 아니라 그래픽을 만드는 모션 디자이너로만 읽힐 수 있었습니다.
첫 화면 5초, 작업 목록 30초, 상세 화면 2분 안에 내 역할과 판단 근거가 명확히 읽히게 합니다.
Brand Definition
Layer Builder는 브랜드, 콘텐츠, 경험을 기획하고 구조화해 실현하는 디자이너입니다.
지금의 정의는 정보 구조와 판단 순서를 먼저 세우는 방식입니다. 건물이나 마름모 같은 외형을 모든 결과물에 입히는 규칙은 아닙니다. 아래의 건축 도면과 도미노(Dom-Ino) 비유는 2021년 대학 과제에서 이름이 출발한 기원 기록입니다.
사이트 전체를 한 장의 건축 도면처럼 설계했습니다.좋은 도면은 누가 읽어도 같은 뜻이고, 다음에 할 일을 분명히 알려 줘야 합니다.
| 2021 Wix | 2026 Layer Builder | |
|---|---|---|
| 단위 | 한 작업 안의 Layer 1, 2, 3과 Outcome | 여러 프로젝트의 연결, 작업별 담당 범위와 팀 크레딧 명시 |
| 탐색 | 긴 한 페이지, 메뉴의 섹션 이동, 마우스오버 영역 | Featured, Motion, Lab 구간, 호버 영상 미리보기, 상세 페이지 |
이름의 기원: 2021년 과제의 Dom-Ino 비유
르 코르뷔지에의 Dom-Ino는 기둥과 바닥판을 먼저 세우고, 벽과 창은 그 위에 자유롭게 놓는 건축 구조입니다.
이 사이트도 같은 순서로 지었습니다. 12칸 격자와 1px 선이 기둥이고, 작업마다 층으로 나눈 글 구조가 바닥판입니다. 작업 이미지와 영상은 그 뼈대 위에 프로젝트별로 자유롭게 놓습니다.
뼈대가 먼저 서 있으면 작업이 늘어나도 읽는 순서가 흔들리지 않습니다. 그래서 2021년의 12칸 격자를 지금도 그대로 씁니다.
- 기둥
- 12칸 격자, 1px 선
- 바닥판
- 작업마다 나눈 글의 층
- 채움
- 프로젝트별 이미지, 영상
Interaction Principle
차원이 바뀌는 건 작업을 고르는 순간뿐입니다. 상세 화면에서는 다시 평면의 층으로 읽힙니다.
- 그리다 Draw, 평면
여러 작업이 도면 위에 선으로 그려집니다.
- 고르다 Select, 평면 → 입체
작업을 고르면 결과물과 판단 기록을 담은 판이 층으로 쌓이며 입체로 바뀝니다.
- 쌓다 Build, 입체 → 평면
쌓인 층이 다시 정렬되며 상세 화면으로 완성됩니다.
