[UX/UI디자인] 디자인 시스템 작업 실무 프로세스 이야기
HTML-код
- Опубликовано: 18 сен 2023
- #ux #uxdesigntips #designsystem #디자인시스템 #디자인팁
안녕하세요. 썬이예요~.
오늘 내용은 구독자 요청으로 만들었어요. 제가 갖고 있는 자료를 참고용으로 보여드리고 싶어서 자료 모으느라 시간이 좀 걸렸어요. 가뭄에 콩 나듯 영상 올린 점.. ㅜㅜ 죄송합니다. 그래도 나름 열심히 준비한 영상 보시고, 영상 봐주신 모든 디자이너분들 뭔가 정보 하나라도 얻어 가실 수 있는 아님 본인이 하는 방식과 같구나 하면서 공감하는 12분이 되시길 바랄게요^^* 감사합니다.
------------------------------------------------------
Time Stamp
0:12 주제 소개
0:29 #1. 디자인 시스템이란
0:55 #2. 디자인 시스템이 없다면
3:04 #3. 디자인 시스템이 있다면
4:12 디자인 시스템을 어떤 과정으로 만들었나
4:36 #4. 처음 디자인 시스템을 만드는 경우
6:02 #5. 디자인 시스템이 있는 경우
6:48 새 컴포넌트 추가 여부 결정하는 방법(Decision Tree 소개)
7:48 디자인 컴포넌트 Copy/Paste로만 간단히 만든 팝업창 샘플
8:07 디자인 시스템 템플릿 샘플
8:28 #6. 디자인 시스템은 있지만, 디자인 일관성/효율성이 떨어진다면?
9:06 팀원과 디자인 시스템 문제점 찾기
9:18 #7. 내가 추천하는 디자인 시스템 참고 사이트 Top 3
9:40 Google Material Design
10:33 Human Interface Guidelines
11:00 WrapBootstrap Dashboard Templates
------------------------------------------------------
급하게 상담이 필요하신 분 / 멘토가 필요하신 분들을 위해 제가 1:1 상담 창을 만들었습니다.
1:1 Career Coffee Chat - calendly.com/uxsun/
이제 커피챗 calendly.com/uxsun/ 통해서 시간 잡아주시면 제가 자세하게 준비해서 1:1 상담해 드릴게요.
------------------------------------------------------
참고 자료
📍 Figma 영상자료 www.figma.com/file/nBDLVUOlEI...
📍개인 소장용 디자인 시스템 샘플 PDF
UX SUN이 작업했던 디자인 시스템들 모음입니다. 거의 5-8년전에 작업했던 거라 너무 올드하지만 참고용으로 공유해요. drive.google.com/drive/folder... 영상에서도 말했지만 이렇게 디테일하게 요즘에는 안해요^^: 아래 구글 - material design 피그마 스타일로 디자인 시스템 만드시면 좋을거 같아요.
📍 (추천) Figma- Material design
www.figma.com/file/GKcQNFu4KX...
📍 Google material design
m3.material.io/components
📍 Apple Human Interaction Design Guidelines
developer.apple.com/design/hu...
developer.apple.com/design/re...
📍 Wrapbootstrap Admin templates
wrapbootstrap.com/category/te...
------------------------------------------------------
Made with Vrew, the AI video editor
Music by Epidemic Sound (To get a 30-day free trial, click this. www.epidemicsound.com/referra...)
![[앱UX/UI디자인] STEP1. UX 디자인을 위한 리서치 / 디자이너가 쉽게 리서치 하는법 / 새 프로젝트 시작할때 저의 리서치 하는 법 공유해드릴게요.](http://i.ytimg.com/vi/ZBwuho9xiEo/mqdefault.jpg)
![J.P., NLE Choppa - Bad Bitty (Remix) [Official Music Video]](http://i.ytimg.com/vi/rBDa6BCvw10/mqdefault.jpg)
Time Stamp
0:12 주제 소개
0:29 #1. 디자인 시스템이란
0:55 #2. 디자인 시스템이 없다면
3:04 #3. 디자인 시스템이 있다면
4:12 디자인 시스템을 어떤 과정으로 만들었나
4:36 #4. 처음 디자인 시스템을 만드는 경우
6:02 #5. 디자인 시스템이 있는 경우
6:48 새 컴포넌트 추가 여부 결정하는 방법(Decision Tree 소개)
7:48 디자인 컴포넌트 Copy/Paste로만 간단히 만든 팝업창 샘플
8:07 디자인 시스템 템플릿 샘플
8:28 #6. 디자인 시스템은 있지만, 디자인 일관성/효율성이 떨어진다면?
9:06 팀원과 디자인 시스템 문제점 찾기
9:18 #7. 내가 추천하는 디자인 시스템 참고 사이트 Top 3
9:40 Google Material Design
10:33 Human Interface Guidelines
11:00 WrapBootstrap Dashboard Templates
우와 드디어! 기다렸습니다
기다리게 해드려서 죄송해요 ^^;; 분발할게요.
1. Material UI Design
2. ios human interface guideline
3. wrapbootstrap dashboard
넘 감사합니다!💗
영상 봐주셔서 감사합니당 💕
너무 오래 기다렸어요~ ㅠㅜ 이전 수업 여러번 듣고 있었어요 😊항상 감사합니다!
구또기님 반가워요. 영상이 뜸해서 죄송해요. 노력할게요. 유튜브에도 최선을 다할 수 있도록.. 그러니 계속 관심가져주세요. 구또기님 처럼 기다려주시는 분들 덕분에 제가 이렇게 영상 올리게 되네요 진짜 감사드립니다. 큰 힘이 되어주셔서.🙂
왕 썬님 선댓글 먼저 달아요 넘 오랜만예요 ~~ 기대됩니다 애껴봐야지! 😊
호호야님^^ 반가워요. 잘 계시죠? 진짜 오랜만이에요. 기대져버리면 안 되는데.. 꾸준히 올리는데 목표를 맞춰서 노력해 봐야겠어요. 반성하고 반성하고 또 반성하고 ㅜㅜ 그래도 호호야님 랜선으로 이렇게라도 만나서 반가워요^^*
아니 이게 얼마만이에요!!!!! ㅠㅠㅠㅠㅠ 영상 감사합니다
아 정말 오랜만이죠. 영상 자주 올리고 싶었는데 계획대로 잘 안되어서 ㅜㅜ 이제 올리게 되었네요. 영상 봐주셔서 정말 감사해요.
감사합니다 ! 도움 많이 되었어요
너무좋네요. 도움많이 되었어요 ㅎ
유용한정보 감사합니다❤
영상이 도움이 되었다니 다행이예요^^ 영상 봐주셔서 감사합니다.
헐 ! 순간 업로드 시간 재 확인 했네요😂 와 이렇게 영상 올려주셔 너무 감사합니다 🎉🎉
진짜 너무 뜸해서 죄송해요. 제가 번아웃이 왔었는지 게으른 건지 다시 한번 더 정신 차려보자 노력 중이에요.;; 오랜만에 올린 영상 조금이라도 도움이 되었으면 좋겠어요. 감사합니다.
@@uxsun와 일년에 한번 올려주셔도 좋아요 ㅋㅋㅋㅋ 왜냐면 썬님 올려주신 강의는 진짜 수업 같아서 매번 필요할 때 마다 자주 자주 돌려봐요 ㅎㅎ 늘 감사합니당
영상이 도움이 많이 되었습니다! 넘 감사합니다 :))
도움이 되었다니 다행이예요^^ 제가 더 감사드려용.
도움이 많이 됐어요!!! 감사합니다. ㅎㅎ
도움이 되었다니 다행이예여^^ 감사합니다.
와우..! 오랜만에 영상 올려주셨네용
제가 잘못봤나 싶어서 냉큼 달려왔습니다 ㅎㅎㅎ
ㅎㅎ 냉큼 클릭해 주셔서 너무 감사드려요. 진짜 오랜만에 올려서 저도 너무 민망하고 죄송하네요. 정신 차리고 작은 내용이라도 꾸준히 올릴 수 있도록 정신 차려보겠습니다. ^^ 찾아주셔서 진짜 감사드려요.^^
화이팅!❤
감사합니당
와.. 오래 기다렸고 무슨 일 있으신가 걱정했어요. 업데이트 감사합니다.
저도 제가 컨텐츠 업데이트가 너무 오랫동안 안되어있다는 사실을 알았을때 스스로 놀랬습니다.^^: 업데이트 된 영상 그래도 봐주셔서 감사드려요. 정신차리도록 노력할게요 꾸준히!! 를 목표로 삼아보려고요. 하하
저 그래픽 디자이너로 근무하다가 다른 영상들도 많이 보고 uxsun님 영상도 정말 많이 보면서 공부하다가 몇달전에 프로덕트 디자이너로 이직해서 지금 제너럴하게 엄청 열심히 일하고 있었습니다 ㅎㅎ 근데 이게 우연인지 디자인 시스템 관련해서 팀원들에게 이야기 하고 오늘부터 사실상 기초를 다지기 시작했는데 이 영상이 올라왔네요 🙂바쁘시겠지만 영상 자주 부탁드려요 항상 챙겨보고 있습니다!!
근데 예전에 올려두셨던 브이로그는 삭제됐네요 저 그거 재밌게 봤었는데 아쉬워요 😥 단발 너무 예쁘고 잘어울리세요!!
관심있게 영상 봐주셔서 감사해요. 조금이라도 유용한 내용이 있었음 좋겠어요. 앞으로 제가 더 노력할게요 꾸준히 올릴 수 있게요. ^^
브이로그를 봐주시는.분이 있었다니ㅜㅎㅎ 넘넘 감사해요 . 기회 있을 때 일하는 새 브이로그 올려볼게여 ^^
너무 오랜만이에요!
그러게요. 진짜 넘 부끄러워지게 오랜만이예요;; 스스로 채찍질 합니다. ^^;;;;; 앞으로 제가 더 노력 많이 해야할거 같아요.
오랜만이에요! 2년 전에 썬님 영상 보면서 하나하나 따라하다가 지금은 저도 미국에 와서 HCI 공부하고 있어요, 언젠가 지나가다 뵐 기회가 있음 좋겠어요 ^^ UX 영상 항상 퀄리티가 참 좋아 많이 배웠어요!
우와 지금 미국에서 공부하시는 군요. 어느 지역에 계시는지? 저는 산호세 쪽에 살아요. 이 쪽 지역에 계신다면 정말 왔다갔다 하다 뵐 수도 있겠어요^^ 하하 제 영상 늘 봐주신 점 제가 더 감사드려요. 꼭 공부 잘 마스터하시고 원하시는 UX 디자이너로 취업하시길 응원하겠습니다.^^
@@uxsun오 저도 산호세에 있어요! 지금 산호세 주립대 대학원에서 공부중이에요 ^^ 썬님 따라서 피그마 하나하나 공부하고 포트폴리오 만들던 기억이 새록새록 나는데 오랜만에 썬님 영상 떠서 얼마나 반가웠는지 몰라요 오다가다 뵈면 인사드릴게요 ㅎㅎㅎ
@@jin9984 우와 같은 동네에요. 산호세 주립대 좋죠~ 진짜 오다가다 보면 인사해요^^* 신기해요. 제가 영상이 넘 뜸했죠. 갑자기 제가 번아웃이 왔었나봐요 ㅜㅜ 다시 정신차리고 살려구요. 하하 영상으로 자주 뵐 수 있도록 노력할게요. 감기 조심하시구요. 또 뵈용😄
롱타임 노씨예요!!
썬님 항상 좋은 영상 감사드립니다! :) 진짜 영상의 퀄리티가 남다릅니다... 진짜 실무에 맞는 꿀팁과 정보들 너무 감사드려요! 바쁘시겠지만 영상 자주 업로드 부탁드려요 ㅠㅠ 감사합니다!!!
넹, 그럴게요. 영상 꾸준히 업로드 할 수 있도록 노력할게요. 영상 봐주셔서 감사합니다.^^
진짜 너무 오래 기다렸어요!! 😢
늘 배우고 있어요
저희는 기존의 디자인 시스템을 토큰 스튜디오를 이용해 토큰 기반 디자인시스템으로 바꾸는 작업을 하고 있어요. 디자이너가 직접 디자인시스템 코드를 푸시하고 관리할 수 있다는 것에 굉장히 큰 의의가 있다고 보는데, 토큰 관련해서는 혹시 다루지 않으실까요?!
오랜만에 올렸는데 기억해 주시고 봐주셔서 무한 감사드려요. 거기에 사용하고 계시는 디자인 시스템 공유해 주시고 너무 감사해요. 저는 토큰 스튜디오를 말로만 들어봤지 실제로 사용해 본 적은 없어서 공유할 이야기가 없네요. 제가 다니고 있는 회사는 아직까지 Figma 안에 있는 Variables 기능으로 디자인 요소를 바꿔주고 있어요. 제가 나중에 토큰 스튜디오로 작업할 일이 있게 된다면 그때 영상으로 한번 제 이야기도 해보고 싶네요 의견 주셔서 감사해요 ^^
자주 와주세요 ㅜㅜ 너무 고맙습니다. 썬님 혹시 영상에서 보여주신 디자인 시스템 수립에 관한 피그마 자료 오픈링크 공개 가능하신가요…??🥲🥲🥲
아 영상속에 나왔던 피그마 링크 영상 설명란에 넣어놨어용. 다시 한번 더 확인해봐주세요. 링크 안열리면 다시 알려주세요. 제가 다시 링크 확인해볼게요. 영상 봐주셔서 넘 감사해용
안녕하세요. 저랑 이름이 같으셔서 뵌적도 없는데 가깝게 느껴져요^^ 저는 독학으로 ux 공부를 하는 중이라 선님의 동영상이 정말 도움이 많이 되고 있어요. 이제 슬슬 포트폴리오를 만들어보려고 하는데 어떤 사이트에 만들어야 하는지 모르겠네요. 포트폴리오 만드실때 어떤 사이트를 사용하시는지 궁금합니다. 앞으로도 다양한 영상 기대할게요! 감사합니다!!
하하 저희 이름이 좀 흔하죠. ㅎㅎ 반가워용~ 저는 다양한 플랫폼 사용은 안해봤는데 제가 써봤던건 wix.com 이랑 지금 Squarespace 를 쓰고 있어요. 둘다 free trial 기간이 있어서 둘다 써보시고 맞는 걸로 선택하셔도 되는데.. 갠적으로 저는 심플한 게 좋아서 Squarespace 템플릿이 더 갠적으로 좋아서 쓰긴 하는데.. 유지비가 들어가요 ^^; 보니까 다른 분들도 weebly도 많이 쓰는거 같더라구요. 답변이 도움이 되었을지 모르겠어요. 다른 더 궁금하신 점 있으시면 언제든지 문의주세요. 조만간 새 영상 올릴게용^^* 감사합니당
와 썬님 오랜만이에요! 저도 최근에 봉사프로젝트 하나 마치면서 디자인시스템 구축하는 작업 했었는데, 7명이 디자인한걸 혼자서 재정비했거든요. Practical UI 책 보면서 고치고 또 고치고 했었어요.
현직자 입장에서 어떻게 디자인시스템 구축하셨는지 들어보니 공감도 되고, 제가 놓쳤던 부분도 배우게 되네요, 감사합니다!
혹시 디자인시스템 만들 때 accessibility 도 고려하신 점이 있는지 물어봐도 될까요?
보통 디자인 시스템 만들때 accessibility 고려해서 디자인 하는게 저는 맞다고 생각해요. 폰트 사이즈 정할때, 컬러 사용, 마우스 사용했을때, 폰에서 선택했을때, 마우스 사용을 못할때, 키보드를 사용해서 누를때 등등 고려해서 Inclusive하게 모두 사용자가 사용하기 편한 디자인이 될 수 있도록 디자인 컴포넌트 정의하는 게 젤 이상적이지 않을까 싶어요. 저는 디자인 컴포넌트 만들때 accessibility 고려해요.
@@uxsun 저도 동의합니다! 썬님께서 어떻게 accessibility를 고려하시는지 궁금했어요, 답변 감사합니다 :-)
써니님께서 만드신 디자인시스템이 궁금합니다
현재 디자인 시스템 작업 중인 주니어입니다ㅠㅠ 모바일 환경과 pc 환경을 함께 작업해야 하는데, navigation 등등 어떤 컴포넌트는 모바일과 pc가 확연히 다른데, 이 경우에는 따로 작업해주나요..??
제 경험으로는 다 따로 작업을 해요. 앱(app)이랑 웹 (pc)도 네비게이션이 달라서, 보통 플랫폼마다 다 컴포넌트 따로 만들어요.