웹을 구성하는 기술은 크게 HTML, CSS, JavaScript로 나뉘며, 각 기술은 웹 페이지에서 서로 다른 역할을 수행한다. 마치 건축물에서 구조, 인테리어, 자동문처럼 각기 다른 기능을 맡고 있다.
🔗 참고 사이트 링크
HTML은 웹 페이지의 구조와 내용을 담당한다. 제목, 이미지, 본문, 목록 등 화면에 어떤 정보가 들어가는지를 정의한다. HTML은 다양한 태그(tag)로 이루어져 있으며, 예를 들어 <h1>은 큰 제목을, <p>는 문단을 나타낸다.
🔗 참고 사이트 링크 CSS는 웹 페이지의 시각적 스타일을 정의하는 언어이다. 색상, 글자 크기, 여백, 정렬, 반응형 레이아웃 등을 담당한다. HTML로 만든 구조에 디자인을 입히는 역할을 하며, 디자인 시안과 실제 웹 페이지 간의 시각적 일치를 구현하는 핵심이다.
🔗 참고 사이트 링크 JavaScript는 웹 페이지에 행동을 부여하는 프로그래밍 언어이다. 버튼 클릭 시 메뉴가 열리거나, 스크롤에 따라 이미지가 바뀌거나, 폼 제출 후 확인 메시지가 나타나는 등의 인터랙션을 가능하게 한다. 사용자의 입력이나 이벤트에 반응하여 화면이 동적으로 변하는 부분을 구현할 수 있다.
이 세 가지 기술은 함께 동작하며, 웹의 구조 → 스타일 → 행동이라는 순서로 구성되어 있다. 디자이너가 이 흐름을 이해하고 있다면, 디자인된 UI가 실제로 어떻게 구현되는지 예측하고, 더 실현 가능한 디자인을 할 수 있다.
🔗 참고 사이트 링크 디자인은 시각적인 결과물을 만드는 것으로 끝나지 않는다. 사용자 경험이 코드로 완성되는 웹 환경에서는 디자이너가 개발에 대한 이해를 갖추는 것이 필수적이다. 그 이유는 다음과 같다.
첫째, 디자인 의도를 정확히 전달할 수 있다. 개발자가 구현해야 하는 상태, 인터랙션, 전환 효과 등을 명확하게 설명할 수 있어야 의도한 UX가 그대로 실현된다. 이를 위해서는 기본적인 개발 개념과 표현 방식을 이해하고 있어야 한다.
둘째, 현실 가능한 디자인을 할 수 있다. 개발 난이도를 고려하지 않은 디자인은 구현이 어렵거나 리소스를 낭비하게 만든다. 반면, HTML/CSS/JS를 이해하고 있다면 현실적인 제약 안에서 최대의 효과를 낼 수 있는 디자인을 구상할 수 있다.