UX/UI 디자이너가 꼭 알아야 할 웹/앱 기반 기술 이해하기

 

디자이너 여러분 😊 UX/UI 디자인을 하다 보면 종종 이런 질문이 생기지 않으셨나요?

"내가 꼭 HTML이나 CSS까지 알아야 해...?"

 

또는,

"디자인만 잘하면 되지, 개발은 개발자의 몫 아닌가요?"

 

이 질문들, 참 공감이 갑니다. 하지만 실제로 현업에서 경험을 쌓다 보면, 기본적인 웹/앱 기술을 이해하고 있는 UX/UI 디자이너는 커뮤니케이션 능력도 뛰어나고, 결과물의 완성도도 훨씬 높아요! ✨ 그래서 오늘은 디자이너분들이 꼭 알고 있으면 좋은 웹/앱 기반 기술, 특히 그래픽, HTML & CSS 중심으로 쉽게 정리해드릴게요. 이 글을 읽고 나면 “아! 이 정도는 꼭 알아야겠다!” 싶은 기준이 생기실 거예요 😊

---

1. 왜 디자이너가 기술을 알아야 하나요? 🤔

디자이너가 개발자가 되라는 얘기가 아니에요! 코드를 줄줄 쓰라는 것도 아니고요. 대신 다음과 같은 이유로 기본 이해는 정말 중요해요:

💬 1) 개발자와의 소통이 쉬워져요

개발 용어를 몰라서 말이 안 통하면 커뮤니케이션 오류가 생기기 쉬워요.

예: "여기 위치 좀 띄워주세요" → 실제로는 position: absolute 를 써야 할 수도 있고, 그것 때문에 다른 요소들이 깨질 수 있어요.

기술을 조금이라도 이해하고 있다면 이런 오해를 줄일 수 있어요.

⚙️ 2) 디자이너의 기획력과 구현력이 올라가요

디자인 시스템을 짤 때, 웹/앱에서 가능한 범위와 제약을 이해하고 있다면 더 현실적이고 효율적인 결과물을 만들 수 있어요.

🚀 3) 협업 속도가 빨라지고, 결과물의 완성도도 높아져요

코딩을 몰라도 좋지만, 기술의 ‘언어’를 이해하면 “왜 이렇게 구현됐는지”, “왜 이게 안 되는지”를 이해할 수 있어요. 문제를 빠르게 파악하고 피드백도 명확하게 줄 수 있죠!

 

---

2. 디자이너가 꼭 알아야 할 웹/앱 기반 기술 💻

1️⃣ HTML (HyperText Markup Language)

웹의 뼈대를 구성하는 언어예요.

• 무엇을 하는 언어인가요?
  • 텍스트, 이미지, 버튼, 링크 같은 요소를 '어디에', '무엇으로' 보여줄지를 정의해요.
• 디자이너가 알아야 할 포인트:
  • 구조적으로 어떤 태그들이 쓰이는지 (<header>, <footer>, <section>, <button> 등)
  • 버튼과 링크의 차이점은 무엇인지
  • 시맨틱 마크업이 왜 중요한지 (접근성과 SEO에 영향!)

📌 팁: 디자인 시 wireframe에 해당 태그 개념을 염두에 두면 실제 구현에서 큰 도움이 돼요.

 

---

2️⃣ CSS (Cascading Style Sheets)

HTML로 만든 구조에 스타일을 입히는 언어예요 🎨

• 무엇을 하는 언어인가요?
  • 색상, 폰트, 여백, 위치, 애니메이션 등 '보이는 모습'을 정의해요.
• 디자이너가 알아야 할 포인트:
  • margin/padding 차이
  • display: flex/grid 기본 개념
  • position 속성들 (static, relative, absolute, fixed)
  • 반응형 디자인의 기본 원리 (media query 등)

📌 팁: Figma나 XD에서 마진과 패딩을 설정할 때, 실제 CSS 값을 의식하면 개발자와 이야기할 때 훨씬 원활해요.

 

---

3️⃣ 웹 브라우저 동작 원리 이해 🧠

웹사이트가 실제로 어떻게 화면에 그려지는지도 알아두면 좋아요.

• 렌더링(Rendering): HTML → DOM → CSSOM → 화면에 그리기
• 로딩 시점 이슈: 어떤 요소가 언제 뜨는지, 왜 로딩이 느린지 이해 가능
• 디자인 퍼포먼스 고려: 이미지 사이즈, 폰트 최적화, 애니메이션 과다 여부 등

📌 예: 너무 많은 이미지, 무거운 폰트는 로딩을 느리게 만들고 사용자 경험을 해칠 수 있어요.

 

---

4️⃣ 그래픽 포맷 및 이미지 최적화 📷

디자인 결과물을 넘길 때 이미지 포맷을 잘못 넘기면 개발자가 다시 수정해야 할 수도 있어요. 기본적인 포맷 차이를 알아두면 유용해요.

포맷특징언제 사용하나요?

PNG	투명 배경, 고화질	아이콘, UI 요소, 투명 이미지
JPG	고압축, 용량 작음	사진, 배경 이미지
SVG	벡터 기반, 확대해도 깨지지 않음	로고, 아이콘, 일러스트
WebP	고화질+저용량, 최신 브라우저 지원	고성능 웹 이미지 최적화

📌 팁: 개발자에게 넘길 때는 용량도 고려해서 export 해주세요. 예: 2x, 3x 버전, 폴더 정리 등.

 

---

5️⃣ 모바일 앱 기술의 기본 ⚙️

모바일 앱은 웹과 다르게 네이티브 앱과 하이브리드 앱이 있어요. 디자이너는 이 차이점을 기본적으로 이해하고 있으면 좋아요.

• iOS vs Android 디자인 가이드 차이
• 터치 제스처, 상태바, 하단 탭 등 OS마다 다름
• 해상도, 비율 문제 (Density, dp, pt 단위 등)

📌 팁: 가능한 경우 플랫폼 가이드라인(예: Apple HIG, Material Design)을 참고해서 UI 요소를 맞춰주세요. 

---

 

3. 실무에서 어떻게 활용하나요? 💼

🎨 예: 버튼 디자인 시

• 텍스트가 너무 길면 반응형에서 줄바꿈 이슈 발생 → 디자이너가 미리 시나리오 설계
• hover, active 상태 시 스타일 변화 고려 → CSS 효과 반영 안내

📱 예: 앱 UI 제작 시

• iOS에서만 지원되는 제스처를 안드로이드에도 넣으려다 개발자에게 막히는 경우 방지
• 3배수 이미지 필수인데 1배만 넘긴 경우 개발 단계에서 재작업 발생

🧑‍💻 예: 개발자와 협업 시

• “이거는 absolute로 띄우는 거예요?” → “flex 써서 가운데 정렬했어요!” → 서로 통하는 용어로 커뮤니케이션 가능 👍
•  

---

4. 어디서 배울 수 있나요? 📚

기본만 알아도 큰 도움이 됩니다. 아래 추천 자료를 참고해보세요:

• MDN Web Docs (HTML, CSS 기초)
• Flexbox Froggy (재미있는 flex 연습 게임)
• CSS Tricks
• Frontend Masters - 디자인을 위한 코드 강의
• Material Design 가이드

---

 

마무리하며 😊

디자이너가 모든 기술을 다 알 필요는 없어요. 하지만 기본 개념을 이해하고 있다면, 협업도 원활하고 디자인도 훨씬 실현 가능하게 만들 수 있어요! 디자인은 단순히 '예쁘게'만이 아니라, 기술과 현실 안에서 사용자 경험을 완성해내는 일이에요.

기초 개념을 하나씩 익혀가다 보면, 개발자에게도 신뢰받고, 사용자에게도 사랑받는 디자이너가 될 수 있답니다 😊

오늘도 읽어주셔서 감사합니다! 다음 글에서는 “디자인 시스템과 CSS 프레임워크의 관계”에 대해 더 깊이 다뤄볼게요 👋