Insight >> 프로덕트 디자이너(UXUI 디자이너)의 관점에서 바라 본 개발지식(???)

나는 UXUI 디자이너가 되겠다는 꿈을 가지고 외국어학부로 입학했던 대학교에서 컴퓨터학부로 전과를 했다.

당시에는 학과장님께서... 문과생들은 적응 못한다면서 처음에 반려를 하셨다.

그러나 나는.. 그들과 다르다는 것을 보여드리며 설득을 했었다. 커리어 로드맵, 전과를 하게 된 구체적인 이유, 추후 목표, 공부를 어떻게 진행할 건지 등등 단순히 취업 잘된다는 그런 이유가 아니라 나는 진짜 내가 원하는 일이었다는 것을 전달드렸고 힘겹게 전과를 할 수 있었다..!

 

이후 학교 생활 및 공부가 순탄했다고 하면 300% 거짓말이다.

2학년으로 들어간 것이기 때문에 1학년 수업을 함께 들으며 학점관리를 해야했고 코딩의 코자도 몰랐던 나였기에 기초 지식을 쌓기 위해 추가적인 공부가 무조건 필요했었다.

그런데 힘은 들었지만 재밌었고... 공부를 하는 게 즐거웠다. 하나하나 지식을 쌓아가는 게 즐거웠기 때문에 버틸 수 있었다고 해도 과언이 아닐듯하다...

 

그래서 결국 수석으로 졸업을 했고 지금은 프로덕트 디자이너가 되기 위해 UXUI에 관련된 전문 지식을 쌓고 다양한 프로젝트를 진행하고 있다.

최근에 진행했던 React 개발자 분들과 서비스를 제작하는 MVP 프로젝트를 진행하며 개발자 분들과 소통할 기회가 많았다. 그리고 주변에 개발자들이 있어서 대학에서 디자인을 전공한 디자이너분들과는 조금 다른 시각으로 프로젝트를 받아들이고 생각할 수 있는 기회가 많다.

 

나는 이것을 위해 컴퓨터학부 소속의 과로 전과를 한 거였다!!! UXUI 분야는 사용자와 기술을 이어주는 직무라고 생각해서 내가 기술을 알고->사용자를 알아야 더 깊은 UX와 UI를 설계할 수 있다고 판단했기 때문이다.

 

여튼 그래서 개발자 분들과 협업하면서 배웠던..?것들을 좀 남겨두고 싶어서 이렇게 글을 쓴다.

근데 사족이 너무 길었네요ㅎㅎ... 모든 맥락을 다 설명하는 나...

 

그래서 이번에 깨달은 점이 뭐였나면

"검색창처럼 아웃라인이 들어가는 UI를 코딩하는 방법은 꽤나 많다."

검색창 만들어 보세요~ 하면 거의 90%의 디자이너는 아웃라인 스트로크를 주는 방식으로 UI를 설계할 것이다. 거기서 px값을 조정하고(두께) 색을 주거나 추가로 그림자를 넣겠지?

그런데 실제로 개발을 통해 코드로 구현을 할 때는 아웃라인 속성 값을 디자이너처럼 직접 줄 수도 있지만 아웃라인이 아닌 shadow 값을 주고 퍼지지 않게끔 값을 조정하는 방법도 있다는 것이었다!!!

 

우리가 눈으로 보기에는 전혀 차이가 없을테지만 시스템으로 보면 굉장한 차이가 있다. 왜냐하면 shadow는 픽셀을 즉, 영역을 잡아 먹는 게 아니라 시스템 내에서 공간의 구애를 받지 않기 때문이다. 이걸 깨닫고... 한대 맞은 느낌이었다. 눈에 보이는 것은 똑같은데 뜯어보면 안의 내용이 다르다는 거지...

 

알고리즘 수업을 들었을 때도 결과는 같아도 더 효율적이게 코드를 짤 수 있는 방법이 정말 많다. 라는 이야기를 밥먹듯 들었는데 위의 인사이트를 얻었을 때 이 이야기가 떠올랐다.

 

여튼 그래서 1px을 차지하거나 차지하지 않거나의 차이를 줄 수 있구나. 라는 것을 시스템적으로 배웠다. 사실 생각해보면 디자인할 때도 줄 수 있긴 할 듯. 앞서 말했듯이 피그마 내에서도 shadow를 줄 수 있으니까. 그런데 이걸 px을 차지하냐 차지 하지 않냐. 이런 시스템적인 사고를 디자인 하면서 해본 적이 없어서... 놀라웠다.

 

참 재밌는 영역인 것 같다. UXUI 디자이너로서 개발적인 지식에 대한 갈증이 또 이렇게 늘어난다ㅠㅠ

또 협업하면서 배우게 되거나 깨닫는 인사이트가 있다면 꾸준히 남겨둬야겠다!

 

 

추가로ㅋㅋ 이거랑 비슷한 다른 사례가 뭐가 있을까를 GPT한테 물어봤다.

 

당신처럼 컴퓨터공학 기반의 과를 전공하고, UX/UI 중심의 프로덕트 디자이너를 준비하는 분들에게는 개발 지식이 매우 강력한 경쟁력이 됩니다. 실제 디자인과 개발은 서로 다른 렌즈로 세상을 바라보지만, 양쪽을 이해할 때 더 좋은 제품을 만들 수 있는 이유들을 3가지 실제 사례와 함께 논리적으로 정리해 드릴게요.

---

✅ 1. 시스템 렌더링 이해로 픽셀 단위의 정확한 UI 구현

• 사례: 그림자(box-shadow)와 외곽선(outline)의 차이
  • 디자인 툴에서는 둘 다 비슷하게 보이지만, CSS에서는 box-shadow는 요소의 박스 모델에 영향을 주는 반면, outline은 레이아웃을 변경하지 않고 그려지는 외곽선입니다.
  • 디자이너가 이 차이를 모르면, 시각적으로는 동일하게 보이지만 실제 개발 시 퍼지거나 비정상적인 레이아웃 문제로 이어질 수 있습니다.
• 이점: 개발 지식이 있으면 실제 동작 방식을 이해해 픽셀 단위로 정교한 UI를 설계할 수 있습니다.

---

✅ 2. 컴포넌트 기반 UI 설계 사고방식

• 사례: 재사용 가능한 컴포넌트 설계 (예: 버튼, 카드, 리스트)
  • 개발에서는 하나의 버튼 컴포넌트를 다양한 속성(props)으로 재활용합니다. 이를 모르면 디자이너는 매번 새로운 버튼 디자인을 만들며 비효율을 초래할 수 있어요.
  • 반대로 개발을 이해하는 디자이너는 재사용성과 유지보수를 고려해 **"변수 기반 디자인 시스템"**을 만듭니다.
• 이점: 컴포넌트화 사고로 디자인 시스템을 체계적으로 구축할 수 있고, 협업 효율이 극대화됩니다.

---

✅ 3. 성능 및 접근성 고려한 UX 설계

• 사례: 애니메이션 구현 방식 (CSS vs JavaScript)
  • 디자이너가 과도한 애니메이션을 요구하면 개발자는 성능 저하나 GPU 사용 증가를 고민해야 합니다.
  • CSS의 transform, opacity 기반 애니메이션은 GPU 가속이 되지만, top, left 등은 레이아웃 리플로우를 유발해 느려집니다.
• 이점: 개발적 시각을 가진 디자이너는 사용자 경험과 퍼포먼스를 동시에 고려한 디자인을 할 수 있습니다.

---

✅ 4. 개발자와의 커뮤니케이션 능력 향상

• 사례: Figma에서 토큰(Design Token)을 적용하고, 코드 전달 시 정확한 명세 제공
  • 예: padding: 12px 16px, font-size: 14px, line-height: 20px, border-radius: 8px
  • 개발자가 그대로 CSS로 적용 가능하도록 해주면 협업 속도 및 퀄리티가 올라감
• 이점: 디자이너가 개발 언어와 시스템을 이해하면 의도 전달이 정확해지고 갈등이 줄어듭니다.

---

이처럼 개발적 이해는 시각적 결과물 너머의 시스템과 동작 원리를 통찰할 수 있게 해주며, 협업과 성능, 재사용성, 유지보수 측면 모두에서 더 나은 디자이너가 되게 합니다.
당신처럼 이런 차이를 이미 체감하고 있다는 건 아주 훌륭한 시작이에요. 💪

 

다른 내용은 이미 알고 있던 기본적인 내용이었는데 3번이 살짝 이해가 안 되어서 다시 질문했다.

그랬더니

 

내 질문: CSS의 transform, opacity 기반 애니메이션은 GPU 가속이 되지만, top, left 등은 레이아웃 리플로우를 유발해 느려집니다. 이게 무슨 말이야? 이건 디자이너가 요구하는 부분은 아니지 않아? 개발자가 고민해야하는 부분 같은데?

 

ChatGPT의 말:

좋은 질문이에요! 이건 GPT 온라인에서 자주 다루는 UX와 개발 최적화에 대한 아주 중요한 포인트이기도 합니다.

---

🔍 우선, 이 말이 무슨 뜻인지 설명할게요:

✅ GPU 가속되는 CSS 속성

• transform, opacity 같은 속성은 **GPU(Graphics Processing Unit)**가 처리할 수 있어요.
• 예를 들어 transform: translateX(100px)나 opacity: 0.5 같은 애니메이션은 화면에 그림만 다시 그리면 되기 때문에 성능이 좋습니다.
• 이를 "합성(compositing)"만 하면 된다고 해요. 즉, 레이아웃이나 스타일 계산을 다시 하지 않음.

❌ 리플로우(Reflow)를 유발하는 CSS 속성

• top, left, width, height 등의 속성을 애니메이션에 쓰면, 브라우저는 요소의 위치나 크기를 재계산해야 해요.
• 이 과정은 **리플로우(재배치)**와 **리페인트(다시 그리기)**를 유발하고, 렌더링 속도 저하로 이어집니다.
• 특히 많은 요소가 있을 때는 **프레임 드랍(끊김)**이 발생할 수 있어요.

---

🎨 그럼 이건 디자이너한테 필요한 정보일까?

맞아요, 겉보기엔 "개발자가 고민할 문제"처럼 보이지만, 사실 실력 있는 프로덕트 디자이너라면 꼭 알아야 할 부분이에요. 이유는 아래와 같습니다:

1. 현실적인 UX/UI 설계

• 디자이너가 너무 무거운 애니메이션이나 잘못된 속성을 요구하면, 실제 제품에서는 성능 저하로 사용자 경험이 나빠질 수 있어요.
• 예: 스크롤하면서 카드 20개가 동시에 left 애니메이션 → 모바일에서 렉 걸림.

2. 개발자와의 협업 효율

• 디자이너가 "이건 transform으로 처리해야 부드러워요"라고 말하면, 개발자는 감탄합니다.
• 개발과 디자인 간 불필요한 커뮤니케이션 비용을 줄이고, 실현 가능성 높은 디자인을 제안할 수 있어요.

3. 프로덕트 전체 품질 향상

• 사용자에게는 "예쁘게 보여야 한다"보다 **"끊기지 않고 부드럽게 작동해야 한다"**가 더 중요할 수 있어요.
• 디자이너가 이걸 알고 애니메이션을 설계하면, 사용자는 무의식적으로 **‘완성도 높은 제품’**이라고 느낍니다.

---

✨결론

✔️ "어떻게 보일지"만이 아니라 "어떻게 동작할지"까지 고려하는 디자이너가 진짜 프로페셔널이에요.

개발적인 요소는 디자이너의 직접적인 책임은 아니지만, 그 이해가 있느냐 없느냐는 결과물의 퀄리티와 협업 효율성에 큰 차이를 만들어요.
이런 부분에 관심을 가지는 당신은 이미 아주 잘하고 계신 거예요!

 

 

결론에서... 어떻게 동작할지까지 고려하는 디자이너가 프로페셔널하다는 말. 그래 맞다...

개발영역이라 관여할 부분이 아닌 것 같다. 라는 사고는 이미 땡인 것 ㅠㅠ

그 이해가 있는지 없는지가 중요한 것. 오케이 오늘도 고마워 GPT...💝