inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

디자인시스템 관련

71

snowmanoh

작성한 질문수 1

0

우선 좋은 강의 정말 감사합니다.

 

저는 B2B 회사에서 PM/기획자로 일하고 있는데요

회사 내 디자이너는 없이 기획자와 프론트 엔지니어 협의를 통해서 서비스를 만들고 있습니다.

서비스를 만드는 건 괜찮으나 통일된 UI/UX를 제공하기에는 많이 아쉽다보니 이번에 강의를 듣게 되었어요

 

디자인 업무를 하진 않았어서 강의를 반복으로 들어야 할 것 같은데요...

강사님이 보시기에...디자이너 없이 디자인 시스템을 회사에 적용하는 것이 가능할까요? 또는 효과적일까요?

 

강의에서 말씀해주신대로 초기 시간/인력이 투여되지만 해놓으면 확실히 좋을 부분이라서..고민이 좀 되네요

디자이너가 없다면 아무래도..더 시간이 걸릴 것 같은데요 강사님의 의견을 듣고 싶습니다.

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 프로덕트디자인

답변 1

1

볼드 UX

안녕하세요, snowmanoh님.

우선 좋은 질문 주셔서 감사합니다.

저는 디자이너 없이도 디자인 시스템을 구축하는 것은 충분히 가능하다고 생각합니다. 많은 분들이 ‘디자인’이라는 단어 때문에 반드시 디자이너가 있어야 한다고 생각하시지만, 실제로는 그렇지 않습니다.

 

그리고 초기 단계에서는 인력과 시간이 한정되어 있기 때문에, 새로 모든 것을 만드는 것보다 기존의 라이브러리를 활용하는 것이 훨씬 효율적입니다. 특히 B2B 서비스의 경우, 심미적인 완성도보다 기능적 안정성과 효율성이 훨씬 더 중요하기 때문에, 초반부터 디자인 리소스에 많은 투자가 꼭 필요하다고 보지 않습니다. 실제로 아마존의 일부 AWS 서비스만 봐도 “이게 디자이너가 만든 게 맞나?” 싶은 부분이 있을 정도죠. 반면, 디자인 시스템에서 개발자의 역할은 필수적이라고 생각합니다.

 

특히 요즘처럼 AI 툴이 있는 경우에서는 사실 기획자와 디자이너 사이의 경계가 점점 줄어들고 있습니다. 제가 일하는 곳의 PM의 경우 러버블 같은 툴을 활용해 프로토타이핑을 하거나, v0에 디자인 시스템을 연결해 직접 디자인 흐름을 잡기도 합니다. 그래서 해외에서는 기획자와 디자이너의 역할 구분이 뚜렷하지 않은 경우가 많고, 그만큼 프로덕트 디자이너 역할이 이 둘을 모두 커버하며, 사용자 경험(UX)에 더 집중하는 역할로 바뀌고 있습니다(비즈니스 부분도 강조되고 그래서 데이터 역량도 요구 되고 있고요)

 

추천드리고 싶은 방법은, 디자인 시스템을 처음부터 직접 다 만들기보다는, 개발자와 협의하여 현재 사용하는 기술 스택과 프레임워크를 확인한 후 이미 존재하는 시스템을 적극 활용하는 것입니다. 예를 들어 머티리얼(Material)을 사용 중이라면, 이미 완성된 머티리얼 디자인 시스템을 기반으로 시작하시고, 필요한 부분만 커스터마이징하시면 됩니다. 이는 제 강의를 통해서도 그러한 접근법을 쉽게 익히실 수 있을 거예요.

 

결국 우리가 서비스를 만드는 일은 ‘아트’를 만드는 게 아니라, 사용자의 멘탈 모델에 맞춘 효율적인 인터페이스를 설계하는 일입니다. 예를 들어 버튼 하나를 디자인한다고 해도, 남들과 전혀 다른 형태나 새로운 인터랙션을 만드는 게 아니라, 사용자가 익숙하게 인식할 수 있는 형태의 버튼을 만드는 것이죠.

 

특히 제 강의는 개발자 분들이 많이 들으시는데, 다 듣고 나시고 실제 개인프로젝트, 그리고 회사에 사용하시는 분들을 많이 보았습니다. 디자인 감각이 없으셔도 충분히 하실 수 있습니다.

 

감사합니다.

볼드 드림.

반응형 웹 디자인

0

57

2

액션 아이콘 컴포넌트 질문

0

46

2

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

48

3

스피너 아이콘 크기 질문

0

50

2

미리보기 빈칸생기는 현상

0

40

2

아이콘 빌런 부분

0

45

2

배리어블 Value에 관해 질문있습니다.

0

79

1

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

61

1

Navigation Mobile 토글 베리어블이 안됩니당

1

61

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

56

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

61

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

76

2

next step?

1

91

1

16강 Print Variables 출력 질문

0

93

2

open in Figma 누르고 ui kit 다운?받았을 때

0

94

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

122

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

139

2

이미지 캐러셀 영상

0

82

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

136

3

완강/리뷰 이벤트 후 강의자료

0

74

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

74

1

컴포넌트별 베리어블 구축

0

102

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

51

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

59

2