만약 개발자에게 “로고를 더 크게 만들어 주세요”라고 요청하거나 디자이너에게 “데이터베이스 오류를 수정해 주세요”라고 말해본 적이 있다면, 당신만 그런 것이 아닙니다. 기술 분야 밖의 대부분의 사람들은 “웹사이트 디자인”과 “웹사이트 개발”을 마치 서로 바꿔 쓸 수 있는 말처럼 사용합니다. 하지만 그렇지 않습니다. 한 직업은 자동차가 어떻게 보일지, 조작 장치가 어디에 위치할지를 결정합니다. 다른 직업은 엔진, 변속기, 그리고 배선을 만듭니다. 사이트를 구축하거나, 팀을 고용하거나, 커리어를 전환할 계획이라면 이 차이를 이해하는 것이 비용, 시간, 그리고 좌절감을 줄이는 길입니다.
웹사이트 디자인이 실제로 다루는 범위
웹 디자이너의 업무는 단 한 줄의 코드도 작성되기 전에 문제를 해결하는 것입니다. 그들은 사이트가 어떻게 보이는지뿐만 아니라, 인간의 관점에서 어떻게 작동하는지에도 관심을 가집니다. 디자이너의 결과물은 그 이후에 진행되는 모든 과정의 가이드가 됩니다.
작업은 보통 구조를 잡는 것부터 시작됩니다. 디자이너는 레이아웃과 와이어프레임(wireframes)을 만듭니다. 와이어프레임은 내비게이션이 어디에 있는지, 콘텐츠가 어떻게 흐르는지, 사용자가 콜 투 액션(call-to-action)을 클릭했을 때 어떤 일이 일어나는지를 보여주는 단순한 그레이스케일 도식입니다. 예를 들어, 온라인 예약 페이지를 위한 와이어프레임은 사용자가 개인 정보를 입력하기 전에 예약 가능한 시간대를 먼저 확인해야 함을 보여줄 수 있습니다. 이 순서가 잘못되면 사람들은 양식 작성을 포기하고 떠나버립니다.
뼈대가 승인되면 디자이너는 시각적 언어를 입힙니다. 그들은 브랜드 표준을 충족하고 접근성 대비 검사를 통과하는 색상 팔레트를 선택합니다. 밝은 햇빛 아래의 휴대폰 화면에서도 잘 읽히는 서체를 고릅니다. 일관된 호버 상태(hover states)와 피드백 루프를 갖춘 버튼, 아이콘, 입력 필드를 디자인합니다. 이 모든 것이 사용자 인터페이스(UI) 작업에 해당합니다.
그다음에는 사용자 경험(UX)이라는 더 넓은 영역이 있습니다. UX 디자이너는 마찰(friction)에 대해 고민합니다. 왜 테스트 그룹의 절반이 배송비 계산기를 찾지 못했을까요? 왜 모바일 사용자는 제품 갤러리에서 핀치 줌(pinch-zoom)을 할까요? 디자이너는 내비게이션을 재배치하거나, 긴 결제 과정을 명확한 단계로 나누거나, 비밀번호가 거부된 이유를 설명하는 마이크로카피(micro-copy)를 추가할 수도 있습니다. 목표는 장식이 아니라 명확함입니다.
현대 디자이너의 도구 상자에는 협업 프로토타이핑을 위한 Figma, Adobe XD, Sketch(여전히 Mac 중심의 에이전시에서 흔히 사용됨), 그리고 이미지 중심의 에셋 작업을 위한 Photoshop 등이 포함됩니다. 점점 더 많은 디자이너가 개발자가 투입되기 전에 이해관계자들이 페이지를 직접 클릭해 볼 수 있는 인터랙티브 프로토타입을 전달합니다. 이러한 초기 시뮬레이션은 정적인 스크린샷이 숨길 수 있는 오해를 잡아냅니다.
웹사이트 개발이 실제로 하는 일
디자인이 설계도라면, 개발은 건설팀, 전기 작업, 그리고 건물 검사가 하나로 합쳐진 것과 같습니다. 개발자는 승인된 디자인을 브라우저가 렌더링할 수 있고 서버가 처리할 수 있는 파일로 변환합니다.
프론트엔드 개발자는 눈에 보이는 부분을 담당합니다. 콘텐츠 구조를 잡기 위한 HTML, 레이아웃과 타이포그래피를 제어하기 위한 CSS, 상호작용을 관리하기 위한 JavaScript를 작성합니다. 개발자가 가장 흔한 JavaScript 라이브러리 중 하나인 React를 사용할 때, 그들은 페이지를 새로 고치지 않고도 업데이트되는 실시간 검색 필터나 동적 쇼핑카트와 같은 복잡한 컴포넌트를 구축하는 경우가 많습니다. 그들의 업무는 디자이너가 그린 버튼이 실제로 데이터를 제출하고, 로딩 상태를 보여주며, 확인 메시지를 표시하도록 만드는 것입니다.
눈에 보이는 레이어 뒤에는 백엔드가 있습니다. 백엔드 개발자는 Node.js, Python 또는 PHP와 같은 언어를 사용하여 서버 측 로직을 작성합니다. 그들은 로그인을 인증하고, 결제를 처리하며, 사용자가 “재고 있음” 또는 “품절”을 볼지 여부를 결정하는 비즈니스 규칙을 처리합니다. 그들이 API를 만들 때, 그것은 데이터를 전달하는 메신저를 구축하는 것입니다.