디자인과 개발을 나누지 않을 때
시안이 개발 단계에서 뒤집히는 경우가 줄어듭니다. 컴포넌트 단위로 설계하면 재사용이 가능하고, 수정 범위도 명확해집니다. 디자이너와 개발자가 같은 문서를 보기 때문에 해석 차이가 줄고, 일정이 짧은 프로젝트에서 특히 차이가 납니다.
컴포넌트 정의 · 재사용 범위 · 수정 이력
웹디자인·UX/UI
웹디자인은 화면이 아니라 우선순위를 정합니다
사용자가 무엇을 먼저 봐야 하는지 정하는 일부터 시작합니다. 기획과 설계, 개발을 한 팀에서 이어서 진행하는 인피니컬 IT 솔루션의 웹디자인 방식입니다.
우선순위를 정하지 않으면 화면은 예뻐지고 아무 일도 하지 않습니다
웹디자인과 UX/UI 설계는 보기 좋은 화면을 만드는 작업이 아니라, 사용자가 무엇을 먼저 봐야 하는지 정하는 작업입니다. 문의를 늘릴 것인지, 재방문을 높일 것인지, 특정 상품 조회를 유도할 것인지에 따라 같은 페이지라도 남겨야 할 정보와 버려야 할 정보가 완전히 달라집니다.
인피니컬 IT 솔루션은 기획과 설계를 개발과 분리하지 않고 한 팀에서 진행합니다. 첫 미팅에서 시안보다 목표를 먼저 확인하는 이유도 여기에 있습니다. 목표가 정해지지 않은 상태에서 시작한 디자인은 수정 요청이 쌓일수록 방향을 잃기 쉽습니다.
- 먼저 확인하는 것
- 비즈니스 목표와 핵심 사용자 행동
- 그다음 정하는 것
- 화면별 정보 우선순위와 컴포넌트 기준
문의를 늘릴 화면인지, 다시 찾게 만들 화면인지 — 답이 정해져야 배치가 정해집니다.
UX/UI 설계가 비즈니스 목표와 만나는 지점
디자인은 목표가 정해져야 방향이 잡힙니다. 목표가 없으면 예쁘지만 아무것도 하지 않는 화면이 나옵니다.
문의 전환 목표
상담 신청과 견적 문의가 목적이라면 첫 화면에서 서비스 범위와 다음 단계가 바로 보여야 합니다. 상세 설명은 뒤로 밀고, 신뢰를 만드는 요소를 위로 올립니다.
재방문 목표
다시 찾는 사용자가 목적이라면 최신 정보와 탐색 경로가 우선입니다. 메뉴 구조와 목록 화면의 정보 밀도가 전환 화면보다 중요해집니다.
상품 조회 유도
특정 상품이나 카테고리를 보게 하려면 목록과 상세 화면의 연결이 핵심입니다. 필터와 비교 요소의 위치가 조회 수를 좌우합니다.
업무 시스템 목표
사내 시스템은 반복 입력의 속도가 목표입니다. 처음 보는 사람의 이해보다 매일 쓰는 담당자의 동선을 먼저 설계합니다.
반응형 웹디자인의 실제 작업
반응형은 화면을 줄이는 작업이 아니라 우선순위를 나누는 작업입니다. 모바일에서 먼저 보여줄 정보와 PC에서만 노출할 정보를 구분하고, 표·차트·다단 폼은 기기별로 다루는 방식을 완전히 다르게 잡습니다.
이 결정을 설계 단계에서 미루면 개발 막바지에 화면을 다시 짜게 됩니다. 그래서 와이어프레임 단계에서 기기별 노출 규칙을 문서로 함께 남깁니다.
설계에서 결정하고 개발로 넘기는 것들
디자인 시스템과 유지보수
버튼, 입력 필드, 카드, 표 같은 요소를 먼저 정의하고 스타일 기준을 문서로 남기면 이후 수정이 빨라집니다. 담당자가 바뀌어도 화면이 흔들리지 않고, 운영 단계에서 페이지를 추가할 때 같은 기준을 그대로 씁니다.
요소 정의 · 상태 규칙 · 확장 기준
어떤 프로젝트에 맞는가
신규 사이트 구축, 리뉴얼, 사내 업무 시스템 화면 설계에 적합합니다. 화면 설계와 개발을 함께 가져가려는 프로젝트에 특히 맞습니다. 브랜드 아이덴티티 작업 자체는 주력 범위가 아니며, 별도 파트너와 협업하는 편이 낫다고 안내드립니다.
신규 구축 · 리뉴얼 · 업무 시스템
웹 접근성과 정보 구조
한국인터넷진흥원(KISA)이 다루는 접근성 기준은 화면 설계 단계에서 반영해야 합니다. 색 대비, 대체 텍스트, 키보드 탐색은 나중에 고치기 어렵습니다. 화면을 먼저 그리고 접근성을 뒤에 붙이면 구조 자체를 다시 손봐야 하는 경우가 생깁니다.
정보 구조(IA)를 먼저 정리하면 메뉴와 페이지 수가 자연스럽게 줄어듭니다. 어떤 정보가 어디에 있어야 하는지가 정해지면 화면 구성은 따라옵니다. 반대로 화면을 먼저 그리면 이 과정이 뒤로 밀리고, 같은 내용이 여러 페이지에 중복되기 시작합니다.
- 색 대비와 텍스트 크기 기준
- 이미지 대체 텍스트 규칙
- 키보드 탐색 순서와 포커스
한국 사용자에게 맞는 화면 설계
국내 사용자는 모바일 접속 비중이 높고, 정보 탐색보다 검색 유입이 많습니다. 첫 화면에서 핵심 정보를 빠르게 보여주는 구성이 효과적입니다.
사용자 화면
검색으로 들어온 방문자가 한 화면 안에서 답을 찾도록 요약과 핵심 행동 버튼을 위로 올립니다. 스크롤을 줄이는 대신 첫 화면의 정보 밀도를 높이는 방향입니다.
관리자 화면
B2B 업무 시스템은 PC 기준의 표와 다단 입력 폼이 중심입니다. 같은 사이트라도 관리자 화면은 반복 작업 속도와 입력 오류 방지를 먼저 봅니다.
모바일 우선 원칙
작은 화면에서 남길 정보를 먼저 정하고, 넓은 화면에서는 여백과 보조 정보를 더하는 방식으로 확장합니다. 반대로 PC 화면을 줄여서 모바일에 맞추는 접근은 정보가 잘리거나 손가락으로 누르기 어려운 요소를 만듭니다.
디자인 검수 기준
검수는 취향이 아니라 목표 기준으로 합니다. 시안 단계에서 확인 항목을 합의해두면 수정 요청이 명확해지고, 취향 논쟁으로 흐르는 일이 줄어듭니다. 아래 네 가지는 프로젝트 시작 시점에 함께 정하는 기본 항목입니다.
확인 항목
무엇을 보는가
판단 기준
도달 클릭 수
사용자가 원하는 정보에 몇 번의 클릭으로 도달하는지, 중간에 이탈을 만드는 단계가 있는지 확인합니다.
핵심 정보는 두 단계 안에 도달
행동 유도 노출
주요 행동 유도 요소가 스크롤 어느 지점에 나오는지, 다른 콘텐츠에 가려지지는 않는지 봅니다.
첫 화면과 각 섹션 끝에 배치
모바일 입력 편의
입력 필드의 크기와 순서, 자동 완성과 오류 안내가 실제 손가락 조작에서 어떻게 동작하는지 확인합니다.
누르기 쉬운 크기와 즉각적인 오류 안내
접근성 반영
색 대비와 대체 텍스트, 키보드 탐색이 시안 단계에서 반영되었는지 확인합니다. 개발 이후 수정은 범위가 커집니다.
설계 문서에 기준 명시
자주 묻는 질문
웹디자인과 UX/UI 설계를 시작하기 전에 자주 확인하시는 항목입니다. 프로젝트마다 답이 달라지는 부분은 상담에서 함께 정리합니다.
시안만 먼저 받을 수 있나요?
화면 설계와 개발을 함께 가져가는 프로젝트를 기준으로 진행합니다. 시안만 필요한 경우에는 범위와 산출물 기준을 따로 정리해 안내드립니다. 두 경우 모두 정보 구조와 목표 정리 단계는 동일하게 거칩니다.
디자인 시스템은 새로 만들어야 하나요?
기존에 쓰던 기준이 있으면 그 위에 필요한 요소를 더합니다. 없으면 버튼, 입력 필드, 카드, 표처럼 반복되는 요소부터 정의하고 문서로 남깁니다. 운영 담당자가 바뀌어도 같은 기준을 쓸 수 있게 하는 것이 목적입니다.
관리자 화면도 같이 설계하나요?
네. 같은 사이트라도 사용자 화면과 관리자 화면의 설계 기준이 다릅니다. 사용자 화면은 정보 노출과 전환을, 관리자 화면은 표와 다단 입력 폼의 처리 속도를 기준으로 봅니다. 두 화면을 한 번에 설계하면 데이터 구조도 자연스럽게 정리됩니다.
접근성은 어느 단계에서 반영하나요?
화면 설계 단계에서 반영합니다. 색 대비, 대체 텍스트, 키보드 탐색은 개발 이후에 고치면 구조를 다시 손봐야 하는 경우가 생깁니다. 시안에 기준을 함께 적어두면 개발자와 검수자가 같은 항목을 확인할 수 있습니다.
브랜드 로고나 아이덴티티 작업도 가능한가요?
브랜드 아이덴티티 작업 자체는 주력 범위가 아닙니다. 별도 파트너와 협업하는 편이 낫다고 안내드리며, 이미 정해진 아이덴티티를 화면 설계에 반영하는 작업은 함께 진행합니다.
