[UX UI 디자이너를 위한 개발 #1] 반응형 웹
안녕하세요
UX UI 디자이너 댄비입니다
디자이너가 개발을 알아야 하는 이유
UX/UI 디자이너로 일하다 보면, 단순히 “예쁜 화면”을 만드는 것만으로는 부족하다는 걸 점점 느끼게 됩니다.
디자인은 결국 실제 서비스로 구현되어 사용자에게 전달되어야 하니까요.
그래서 디자이너에게 개발 지식은 선택이 아니라, 이제는 기본 소양에 가까운 역량이 되어가고 있습니다.
1) 개발자와의 원활한 소통
디자이너와 개발자가 사용하는 언어는 다릅니다.
디자이너는 비주얼적으로 "이렇게 보였으면 좋겠어요"라고 말하고,
개발자는 "코드로는 이렇게 구현할 수 있어요"라고 이야기하죠.
이때 기본적인 HTML/CSS, 프론트엔드 구조를 알고 있으면
커뮤니케이션을 훨씬 정확하게 할 수 있습니다.
불필요한 오해도 줄어들고, 협업 속도도 눈에 띄게 빨라집니다.
2) 현실적으로 구현 가능한 디자인
아무리 휘황찬란한 디자인이라도, 구현이 어렵거나 비용이 과도하게 드는 구조라면 실현 불가능입니다.
개발 환경을 이해한다면, 구조를 알 수 있고
자연스럽게 실무에 바로 쓰일 수 있는 디자인을 하게 됩니다.
3) 디자인을 결과물까지 연결하는 힘
디자인 → 퍼블리싱 → 실제 화면
이 흐름을 이해하는 디자이너는 단순히 시안을 만드는 사람이 아니라,
하나의 프로덕트를 완성까지 끌고 가는 사람에 가까워집니다.
UX/UI 디자이너에게는 사용자의 경험을 설계하는 것이 중요하기에,
개발에 대한 이해는 디자인의 완성도 자체를 올려 줍니다.
반응형 웹
반응형 웹은 웹 · 태블릿 · 모바일 등 다양한 디바이스 화면 크기에 맞춰
레이아웃과 UI 요소가 유연하게 변화하는 웹 디자인 방식입니다.
단순히 화면이 늘어나고 줄어드는 것만이 아니라,
해상도와 디바이스 환경에 따라 텍스트 크기, 이미지, 버튼 배치, 컬럼 구조까지
자연스럽게 재배치되도록 설계해야 합니다.
반응형 웹의 3가지 핵심
|
1) 가변 그리드 (Fluid Grid)
가변 그리드는 고정된 px 단위 대신, 비율(%) 기반으로 레이아웃을 구성하는 방식입니다.
예를 들어 1200px 기준으로 3컬럼 레이아웃을 만들었다면,
각 컬럼을 px이 아니라 %로 나누어 어떤 화면에서도 자연스럽게 비율을 유지하도록 합니다.
box { width: calc ( 1200px / 3);}
→
box { width: calc ( 100% / 3);}
rem 단위 정리
브라우저 기본 폰트 크기는 보통 16px = 1rem입니다.
자주 쓰이는 공식이 있습니다.
target / context = result
target: 내가 만들고 싶은 요소의 크기(px)
context: 기준이 되는 전체 영역(px)
result: % 값
(
target / context = rem 값
예: 16px / 16px = 1rem
)
2) 가변 이미지 (Flexible Image)
이미지는 화면 크기에 따라 자동으로 줄어들고 늘어나야 합니다.
그래서 보통 CSS에서 이렇게 설정합니다.
img { max-width: 100%; }
이렇게 하면 이미지가 부모 개체의 너비를 넘지 않도록 제한되어,
작은 화면에서도 반응합니다.
3) 미디어 쿼리 (Media Query)
미디어 쿼리는 디바이스의 화면 크기에 따라
서로 다른 스타일을 적용할 수 있게 해주는 CSS 문법입니다.
예시로: 데스크톱에서는 3컬럼/ 태블릿에서는 2컬럼/ 모바일에서는 1컬럼
이런 식으로 화면 너비에 따라 레이아웃을 바꿀 수 있습니다.
노가다 같다고 느껴집니다................
하지만 반응형 웹을 만들기 위해서는 반드시 필요한 과정이기도 합니다 �
앞으로도 개발자와 원활히 소통하는 디자이너가 되기 위해
열심히 코딩을 배워보겠습니다~