SITE007
Brew Atlas
브루잉 방법을 기준으로 정보를 찾는 학습형 사이트
여섯 가지 추출법을 세 묶음으로 나누고, 방법마다 비교 화면을 따로 뒀습니다.
11
LVIV Design지금까지 만든 웹사이트를
지금까지 만든 웹사이트를
모았습니다.
제품 소개부터 아카이브, 정보 탐색, 모션 중심 사이트까지 서로 다른 11개 작업입니다.
주요 작업
FORM/01
구성
홈, 부품 소개, 기술 설명, 저널처럼 성격이 다른 페이지에서도 하나의 제품처럼 일관되게 보이도록 구성했습니다.
처음 시도한 방식
처음에는 입체 모델을 실시간으로 보여주려 했지만 원하는 수준까지 나오지 않았습니다.
바꾼 방식
입체 모델 대신 직접 만든 스틸 이미지로 방향을 바꾸고, 여섯 페이지에 같은 제품이 자연스럽게 이어지도록 다시 정리했습니다.
현재 상태
여섯 페이지까지 완성했고, 모바일 화면은 추가로 다듬고 있습니다.
최종안은 스틸 이미지로 구성했습니다.
정리하면
FORM/01은 입체 모델 대신 스틸 이미지로 방향을 바꿨습니다.
다른 작업
먼저 볼 여섯 작업
성격이 가장 다른 작업을 먼저 골랐습니다.
SITE007
SITE008
Lightscape Rooms
빛의 효과에서 시작하는 조명 사이트
제품을 먼저 늘어놓지 않고, 원하는 빛의 효과부터 고르게 했습니다.
SITE009
FORM/01
실재하지 않는 모듈형 음향 제품 사이트
입체 모델을 실시간으로 보여주려 했지만 기준에 못 미쳐서 스틸 이미지로 바꿨습니다.
SITE010
Deep Space Observatory
규모와 거리감을 움직임으로 전하는 사이트
영상과 깊이감은 홈에만 넣고, 나머지 다섯 페이지는 글에 집중하도록 조용하게 만들었습니다.
SITE011
Material Library
건축·인테리어 소재를 찾고 비교하는 사이트
처음 짠 목록 구성이 마음에 안 들어서 소재 항목부터 다시 짰습니다.
SITE012
Vector Zero
하나로 이어지는 자동차 사이트
화면을 다섯 부분으로 끊어서 각각 역할을 줬습니다. 움직이는 중에도 제원과 설명은 읽힙니다.
전체 목록
전체 작업
11개를 모았습니다.
Reference Directory
주제와 연도로 자료를 찾는 레퍼런스 사이트
분류와 검색, 개별 글로 가는 길을 첫 화면 하나에 모았습니다.
작업 보기 ↗
Section-Led Feature Grid
기반은 같지만 섹션 구성만으로 달라지는 매거진
같은 틀에서 시작해도 기사 순서와 섹션 배치만 바꾸면 완전히 다른 느낌이 납니다.
작업 보기 ↗
Field Notes
현장 기록을 차례로 읽는 사이트
하나를 다 읽어야 다음이 열립니다.
작업 보기 ↗
Seoul Move
서울 러닝 코스를 지역별로 묶어 보여주는 사이트
코스를 고를 때 따지는 조건들을 한 자리에 모았습니다.
작업 보기 ↗
Contemporary Culture Archive
여러 시점을 바꿔가며 보는 문화 아카이브
종류가 달라도 시간 하나를 기준으로 모았습니다.
작업 보기 ↗
Brew Atlas
브루잉 방법을 기준으로 정보를 찾는 학습형 사이트
여섯 가지 추출법을 세 묶음으로 나누고, 방법마다 비교 화면을 따로 뒀습니다.
작업 보기 ↗
Lightscape Rooms
빛의 효과에서 시작하는 조명 사이트
제품을 먼저 늘어놓지 않고, 원하는 빛의 효과부터 고르게 했습니다.
작업 보기 ↗
FORM/01
실재하지 않는 모듈형 음향 제품 사이트
입체 모델을 실시간으로 보여주려 했지만 기준에 못 미쳐서 스틸 이미지로 바꿨습니다.
작업 보기 ↗
Deep Space Observatory
규모와 거리감을 움직임으로 전하는 사이트
영상과 깊이감은 홈에만 넣고, 나머지 다섯 페이지는 글에 집중하도록 조용하게 만들었습니다.
작업 보기 ↗
Material Library
건축·인테리어 소재를 찾고 비교하는 사이트
처음 짠 목록 구성이 마음에 안 들어서 소재 항목부터 다시 짰습니다.
작업 보기 ↗
Vector Zero
하나로 이어지는 자동차 사이트
화면을 다섯 부분으로 끊어서 각각 역할을 줬습니다. 움직이는 중에도 제원과 설명은 읽힙니다.
작업 보기 ↗
제작 강점방향을 먼저 비교하고,
방향을 먼저 비교하고,
만든 뒤에는 실제 화면에서 다시 확인합니다.
완성까지 반복해서 확인하는 여섯 가지 방식입니다.
여러 방향 비교
한 방향만 바로 만들지 않습니다. 서로 다른 구조와 화면 방향을 먼저 비교한 뒤 실제로 이어갈 방향을 고릅니다.
초기에 방향을 비교할 수 있어 잘못된 방향을 끝까지 밀고 가는 위험을 줄입니다.실제 화면 검토
설명만으로 승인하지 않습니다. 데스크톱과 필요한 화면을 실제로 렌더링해 눈으로 확인한 뒤 다음 단계로 넘어갑니다.
모바일 별도 확인
모바일을 마지막에 끼워 맞추지 않습니다. 작은 화면에서도 같은 내용을 읽고 사용할 수 있는지 별도로 확인하고 필요한 부분을 조정합니다.
움직임 별도 검증
움직임이 중요한 사이트는 따로 검증합니다. 스크롤, 포인터, 전환 효과가 화면 구조와 충돌하지 않는지 정적인 화면과 별도로 확인합니다.
결과를 보고 방향 수정
처음 계획을 그대로 밀어붙이지 않습니다. 실제 화면이 기대와 다르면 근거를 남기고 필요한 범위에서 다시 고칩니다.
작업 기록 유지
완성 후에도 작업 기록을 남깁니다. 어떤 문제를 어떻게 바꿨는지 정리해 다음 수정이나 확장 때 다시 확인할 수 있게 합니다.
의뢰 가능한 범위작업의 목적에 따라
작업의 목적에 따라
서로 다른 구조로 설계합니다.
완성한 작업을 근거로 정리한 여섯 가지 방향입니다.
제품·서비스 소개
제품의 구조와 특징을 한 흐름 안에서 이해할 수 있도록 구성합니다.
정보 탐색 / 디렉터리
분류, 검색, 목록, 상세 구조를 이용해 필요한 정보를 찾기 쉽게 정리합니다.
아카이브 / 에디토리얼
많은 내용을 읽는 순서와 정보 계층을 중심으로 구성합니다.
비교·선택 중심 인터페이스
여러 항목의 차이를 확인하고 좁혀갈 수 있는 구조를 만듭니다.
모션 중심 랜딩 / 소개
움직임이 필요한 경우 스크롤과 화면 전환을 구조의 일부로 다룹니다.
포트폴리오 / 작업 기록
작업 결과뿐 아니라 과정과 판단 근거도 함께 보여줄 수 있게 구성합니다.
모든 프로젝트에 같은 구조나 움직임을 적용하지 않습니다. 목적과 필요한 정보에 따라 화면 구성과 검수 범위를 조정합니다.
결과물과 검수화면을 만든 뒤
화면을 만든 뒤
실제로 사용할 상태까지 확인합니다.
실제 작업 순서를 기준으로 정리했습니다.
- Desktop 화면 확인
- Mobile 화면 확인
- 주요 페이지 실제 렌더 검수
- 이미지 / 링크 / 오버플로우 점검
- 필요한 경우 모션 별도 검증
- 배포용 파일 정리
- 수정·확장에 사용할 작업 기록
프로젝트 성격에 따라 검수 범위는 달라질 수 있습니다.
여러 작업에 겹치는 것
여러 작업에서 반복된 고민
사이트의 성격은 달라도 비슷한 문제를 여러 번 마주쳤습니다.
읽는 순서 정하기
내용이 많을수록 어디서 시작할지가 중요합니다. 첫 화면과 다음 단계를 먼저 정하고 나머지를 붙였습니다.
학습 순서 · 페이지 구성차이를 비교하기
선택지가 많을 때는 차이가 바로 보여야 합니다. 추출법, 조명 효과, 소재처럼 비교가 필요한 정보는 나란히 놓고 볼 수 있게 구성했습니다.
추출법 · 조명 효과 · 소재움직임으로 설명하기
영상과 움직임을 쓰되, 글과 이동 경로는 그대로 남겼습니다.
움직이는 홈 · 이어지는 화면방식 바꾸기
입체 모델을 실시간으로 보여주는 방식이 원하는 수준까지 나오지 않아 스틸 이미지로 방향을 바꿨습니다.
최종안은 스틸 이미지로 구성했습니다.작은 화면도 확인하기
모바일에서도 같은 내용을 읽고 사용할 수 있는지 다시 확인했습니다.
모션 축소 확인 3건보고 나서 고치기
완성된 화면을 직접 본 뒤 구조나 표현을 다시 손본 작업도 있습니다.
고친 기록 4건주제로 찾기
자주 나온 질문
작업하면서 자주 마주친 질문들입니다.
내용이 많을 때 무엇을 먼저 보여줘야 할까요?
내용이 많을 때는 순서부터 정합니다. Brew Atlas는 배우는 순서를 만들었고, Deep Space Observatory는 홈에 무게를 뒀으며, Vector Zero는 긴 화면을 구간별로 나눴습니다.
여러 선택지의 차이를 어떻게 보여줄까요?
선택지가 많을 때는 차이를 나란히 보여줍니다. Lightscape Rooms는 빛의 효과를 먼저 고르게 했고, Material Library는 비교 화면을 따로 뒀습니다.
영상이 움직이는 동안에도 내용을 읽을 수 있을까요?
영상이 움직이는 동안에도 글과 정보는 읽을 수 있어야 합니다. Deep Space Observatory와 Vector Zero에서 서로 다른 방식으로 풀었습니다.
제품을 보여줄 때 입체 모델이 꼭 필요할까요?
꼭 그렇지는 않습니다. FORM/01은 입체 모델을 실시간으로 보여주는 방식 대신 스틸 이미지로 방향을 바꿨습니다.
움직임을 줄여도 같은 내용을 볼 수 있을까요?
모션을 줄인 환경에서도 같은 내용을 볼 수 있게 했습니다. Deep Space Observatory, Material Library, Vector Zero에서 확인했습니다.
만든 화면이 기대와 다르면 어떻게 바꿀까요?
완성된 화면을 직접 확인한 뒤 구조나 표현을 다시 고친 작업도 있습니다.
작업 방식
대략 이런 순서로 만듭니다.
순서는 고정이 아닙니다. 막히는 지점에 따라 앞뒤로 오갑니다.
01 요청 읽기
02 구성안 벌여 보기
03 앞선 작업 확인
04 화면 만들기
05 직접 보고 수정
06 모바일 점검
07 기록 정리
입체 모델 대신 스틸 이미지로 바꿨습니다.
원하는 수준에 맞지 않았던 표현 방식을 중간에 교체했습니다.
움직임을 홈에만 뒀습니다.
나머지 다섯 페이지는 글이 먼저 읽히도록 조용하게 뒀습니다.
목록부터 다시 짰습니다.
목록에서 상세, 비교, 보드까지 한 흐름으로 이어지게 다시 구성했습니다.
화면을 다섯 부분으로 나눴습니다.
끊기지 않고 이어지는 화면을 다섯 부분으로 나눠 각각 역할을 줬습니다.
다음
관심 가는 작업부터 보시면 됩니다.
각 사이트마다 풀어야 했던 문제가 달랐습니다.
문의하기웹사이트 제작이나 기존 사이트 개선에 대해
웹사이트 제작이나 기존 사이트 개선에 대해
이야기해 주세요.
아래 이메일이나 Telegram으로 바로 문의하실 수 있습니다.