디자인 시스템을 만들고 있어요 [UI/UX, product designer, design system]
HTML-код
- Опубликовано: 24 сен 2024
- 편집이 엉성하지만 오늘 야근했으니 봐주세욤 :3
#productdesigner #프로덕트디자이너 #디자인크리에이터 #designsystem
--------------------------------------------------------------------------------------------------------------
율로의 디자인놀이터, 율튜브 (Yullo's Yulltube)
율로의 디자인스튜디오, 유블스튜디오 (Yullo's YUBLE STUDIO)
율로의 인스타그램 / yullo__
![How to teach yourself about UI design [Figma]](http://i.ytimg.com/vi/cACNZVk9sTQ/mqdefault.jpg)
![6ix9ine - El Preso (feat. Lenier) [Official Music Video]](http://i.ytimg.com/vi/RQvGgosdeO8/mqdefault.jpg)
![[UX/UI디자인] 디자인 시스템 작업 실무 프로세스 이야기](/img/1.gif)
대다수가 자기 고민없이 이쁜 디자인만 생각하는데 멘토없이 이렇게 스스로 만들어가신다니 대단한 열정이네요...^^ 지속적인 콘텐츠 업데이트가 있으면 좋겠어요 ~~화이팅
와..정말 정말 최고라는 말밖에안나오네요..
이런영상을 그냥 공개해주시는것만으로도 정말 수십수백만원의 가치가있는 공부재료네요.. 너무너무감사합니다!!
많은 고민과 경험을 거쳐 계속 디벨롭 된 부분이 너무 인상적이라 잘 봤습니다 :) 특히나 디자이너와 개발자와의 소통이 항상 중요한 부분인데 신경을 많이 쓰신 것 같아서 많이 배워갑니다!! 한가지 궁금한 점이 있는데요, 저는 에이전시에서 UXUI디자이너로 일하고 있어 프로젝트별 심도 있는 디자인시스템이나 버전을 만들어나가기가 어려워 항상 고민 중에 있습니다ㅠ 하여 작업 순서가 최소 파운데이션이 되는 디자인은 먼저 잡고 > 메인 페이지 디자인이 나온 뒤 > 컴포넌트들을 정리 후 > 서브페이지를 만들어 가고 있는데요.. 특성 상 클라이언트 측 수정요청 사항이 많아 이렇게 하지 않으면 도저히 효율성이 나지 않더라구요..ㅠㅠ 주로 앱보다는 웹 작업이 많기도 해서 와이어프레임과 기획 문서만으로 디자인 시스템을 먼저 잡고 디자인을 시작하기가 쉽지가 않은데... 율로님 포함해서 다른 디자이너분들은 어떻게 실무에서 진행하시는지.. 또 어떤 고민을 가지시고 계신지도 궁금하네요😂 다양한 고견들을 답변으로 남겨주시면 정말 감사하겠습니다.
율로님, 주도적으로 생각하고 문제를 해결해나가는 플로우를 공유해주신것 정말 감사해요. 디자이너 초년생이예요. 디자인 의도가 있어야한다고 하는 영상은 많이 봤지만 이렇게나 실무에 바로 적용할 수 있게 구체적으로 도움이 되는 영상은 처음이네요. 이런 영상..앞으로도 좀 더 보고싶습니다!
어떤 점이 좋았는지 구체적으로 피드백을 주셔서 제가 앞으로 콘텐츠를 어떤 방향으로 가져가야 하는지 생각하는데 도움이 되었어요. 정말 감사합니다! 혹시 원하시는 콘텐츠가 있다면 언제든 편하게 요청해주세요 :)
회사에서 혼자 디자인 시스템을 만들 것 같아 자료를 서치하고 있는데 방향 잡는 데에 큰 도움이 되었습니다. 디자인 시스템을 다루면서 얻어가는 인사이트나 고민들을 율로님 영상에서도 보니 반갑네요. 굉장히 많이 고민하신 티가 나셔서 몰입하면서 봤어요. 그래픽/시각쪽으로만 일하다가 UIUX쪽으로 맨땅에 헤딩 격으로 도전하는 중인데, 기본기를 다지는 것이 정말 중요할 것 같아서 열심히 공부 중입니다. 율로님께서 수행목적부터 해서 참고자료 등 why-how-what을 정말 치밀하고 촘촘하게 준비하신 걸 보니 저도 이렇게 기반을 잘 갖춘 디자이너가 되고 싶네요. 좋은 영상 올려주셔서 감사해요!
현실적인 디자인 시스템 제작, 고민 과정이어서 진심이 느껴지네요^0^
코딩을 어느정도 할줄 알고 계시니, chart.js 와 echart도 배우시는걸 추천 드립니다.
실제로 제가 디자인한 차트 스타일을 개발자분들이 디테일하게 적용하는것에 한계를 느꼈고,
그때마다 수정해야 되는 부분을 캡처해서 개발자들에게 요청하고 , 다시 수정하는 과정에서 불필요한 시간이 소비 되었었는데...
직접 차트 샘플을 코딩해서 개발자들에게 배포하면 많은 시간이 절약 되는걸 느꼈습니다.
율로님은 기본 소양이 있으시니 조금만 시간을 투자 하시면 마스터 하실것 같네요^^
캬..... 너무너무너무 ...와...너무 최고에요.
다음 디자인과 미래의 영상들도 기대되는 영상이였어요.
감사합니다
자존감 올라가는 댓글이네요 ㅎㅎ 감사합니당~ 좋은 컨텐츠 보여 드릴 수 있도록 노력할게요~ :)
관련 영상 정보 더~ 있었으면 하네요 잘 봤습니다. 감사합니다.
구독했습니다.
혼자서 했다기에는 상당하네요.
왜? 디자인 시스템기반이 중요한지에 대한 부분도 굉장히 잘 짚어주셨고,
추상화 단계를 벗어나서 각각의 디자인 계층 및 컴포넌트 구조에 대한 래퍼런스를 굉장히 깔끔하게 정리해 놓으셨네요.
다음 콘텐츠로 혹시 기회가 된다면 디자인 시스템기반에 대한 기준을 조금더 디테일하게 설명해주실수있으신가요 ?
여러모로 아쉬움이 많이 남는 콘텐츠인데 좋게 봐주셔서 감사합니다 :) Roger님이 말씀하시는 기반에 대한 기준의 디테일에 대해 조금만 더 구체적으로 말씀해주실 수 있을까요? 말씀하시는 부분에 대한 예측은 가는데 좀 더 확신이 필요해서 어떤 부분이 가려운지 좀 더 디테일하게 파악하면 제가 더 좋은 콘텐츠를 제작하는데 도움이 될 것 같습니다 :-) 다시 한번 좋은 댓글 감사드립니다!
@@yullo 디테일 하게 들어가면 내부 콘텐츠들이 정말 많이 만드실 수 있을것 같긴한데..
예를들어 12:20 초부터 버튼에 대한 설명과 왜 이렇게 만들어야하는지에 대한 이해가 필요하다고 하셨는데 구체적인 예시와 경험을 들어서
설명 해주시면 보시는분들 입장에서는 정말 도움이 많이될것같아요. 이것도 가능 하다면 짧은 클립 위주로 하나씩뺴서 만드시면 정말 좋을것같구요.
저 또한 디자인 시스템의 중요성을 알게되었고 회사에서 혼자서 디자인 시스템 제작을 하고 있네요..! 많은 고민이 들어간 내용인 듯 하네요..! 저도 정말 심도 깊게 고민을 더 해보면서 디자인 시스템을 구축해보아야겠네요! :)
제가 대표면 뽑고싶을정도로 정말 열심히하셨네요. 현재 어디서 어떻게 만족스럽게 일하고 계실지 모르겠지만 정말 끝없이 올라가실수있을것같네요!
00:10 1.서론
00:36 2.수행목적 및 자료조사 (업무범위와 우선순위 정하기)
02:23 3.서비스를 만들어가면서 디자인시스템을 발전시켜야 한다.
02:58 4.개발자에게 얻은 정보
03:33 5.초창기 디자인시스템
04:10 6.경험기반이 중요한 이유
05:00 7.기존 자료들을 모아서 정리해서 정립 (예시:shadow)
05:50 8.스타일 가이드와 컴포넌트 가이드 두가지로 나눔 (아토믹 자료를 여러가지 찾아봤을때 오히려 많이 쪼개는 것이 관리에 더 어렵다는 결론에 도달해 2개로 분리했습니다.)
05:57 9.스타일 가이드와 컴포넌트 가이드의 차이
06:20 10.컬러 변경 히스토리
08:00 11.카본디자인시스템을 많이 참고한 이유 (가장 개발자 친화적이고 소통하기 좋을 거라고 생각했기 때문에)
08:28 12.개발자의 방식을 반영 (예시:shadow, 구조화)
09:50 13.이름규칙
10:45 14.그리드가이드 (미디어쿼리에 대한 이해 필요)
12:04 15.버튼
14:17 16.모달(세부적으로 만들게 된 이유와 앞으로의 계획 언급, 스토리북, 웹사이트)
15:36 17.텍스트필드
16:22 18.프로그레스 > 레퍼런스만 모아둔 이유
16:37 19.페이지네이션
17:17 20.에디터
18:39 21.그래프
19:39 22.디자인시스템 원칙
20:44 23.앞으로 해결해야 할 이슈
21:40 24.마무리
ㅠㅠ저런걸 해야한다고 생각하니... 넘 .. 부담.. 열심히 정리하신 거에 박수드립니다!^_^
우와 너무 멋집니다!
막연하게 조각조각 알고있던 지식이 정리된 느낌이에요. 좋은자료보여주셔서 감사합니다!
저도 한번 도전해보고싶어지네요ㅎㅎ
직접 부딪히며 얻은 인사이트와 고민들을 나눠주셔서 정말 정말 감사합니다
정말 큰 도움이되었습니다. 구독도 눌렀습니다!!
직업 자체에 대한 모티베이션이 되는 플젝이네요.
SPA 기반에서 UX을 개선?하는 사이드를 구상 중인데, 저도 모티베이션을 얻네요.
수고하세요!
웹퍼블리셔로 일하고 있는데 영상보고 신선한 충격을 받았네요...정리 귀찮아서 이렇게까지 꼼꼼하게 하지 않았었는데....좋은 영상 감사합니다!!
좋은 댓글 감사합니다!
좋은 영상 감사합니다! 수많은 고민의 흔적들이 보이네요 ㅎㅎ 👍
감사합니다 윤규님도 인사이트가 좋아보이시던데 :3 앞으로 많이 배워가겄습니당 _ _)
감사해요
저도 디자인 시스템을 혼자서 공부하려고 찾다고 보게 되었는데요!! 스스로 공부하신 부분을 너무 자세히 영상으로 담아주셔서 도움이 많이 되었어요!! 혼자 공부하고 작업하신 부분이 진심으로 너무 멋있으세요!!! 올해본 디자인 유튜브 중에 최고입니당 ㅠㅠ!
좋은 영상 만들어주셔서 감사합니다. 디자인 시스템에 대한 필요성은 느끼지만 어떻게 만들어야할지 고민하는 중에 이 영상보게되었는데 도움도 많이 되고
열심히 하시는 모습보면서 자극도 되네요! 앞으로도 좋은 영상 기대하겠습니다! 항상 화이팅하세요!!
이런 디자이너 만나고 싶네요.... 프론트개발하기 너무 빡쎔... 기술 공부하랴 디자인 보랴 ㅠㅠ
와- 멋지십니다👍
일코님만큼 멋있게요 :3)/ 일코님 짱
욜로님 너무 멋지시네요. 디자인 시스템 저도 항상 고민이었는데, 저도 말씀해 주신대로 정리를 해봐야겠네요. 너무 알찬 정보였어요..최고!
너무 많은 도움이 되었어요! 좋은 영상 감사드립니다~
고생하셨어요! ^^
도움이 많이 됐어요! 감사합니다. ㅎㅎ
영상 너무 좋아요 감사합니다! 대체 작업하면서 시스템은 어떻게 만드는건지(만들시간이 없는데) 시간날 때 정리하는거였네요 ㅋㅋㅋㅋ
안녕하세요. 올해로 10년차 UI디자이너 입니다.
그동안 프로젝트 진행하면서 제대로된 정리를 못하고 그냥 감으로만 작업을 진행을 하다보니..
디자인 작업에대한 표준 양식에 대한 정리가 없다보니 디자이너 후임 들어와도 제대로된 교육같은걸 못해주고 업무하면서 가르쳐주고 그런 형식으로 하고있었습니다. 이 영상보면서 그동안 뭐했나 싶네요 ㅎ;;
그리고 서비스 기획은 어떤식으로 진행하고 작성하셨는지 궁금해서 댓글 남깁니다.
Awesome!!!
신입 디자이너여서 좋은 영상이였던거 같아요..ㅎ
처음부터 잘하려고 잘만들려고 욕심만 부렸던거 같아요~
좋은 정보와 영상을 만들어주셔서 감사합니다.
혹시 해당 가이드를 공유가 가능하신지..
만들어야하는데 시작을 못하겠어서..ㅎㅎ
안타깝게도 회사 자료라 공유가 안돼요 ㅠㅠ 국내에 이미 훌륭한 좋은 사례들이 많으니 찾아보시면 좋을 것 같아요. 이게 직접 찾는것도 훈련과정이라 조금만 힌트를 드릴게요. 소카, 클래스101, 라인 디자인시스템 한번 검색해보세요 :) 저도 외부에 공유가능한 디자인시스템 꼭 제작해서 공유해보도록 하겠습니다!
정말 알고싶었던 정보였는데 너무 감사합니당!
영상 보다가 초기에 CODY KIT (코디킷) 이란 페이지 있는것 같은데 제가 볼수 있는 페이지 일까요? 페이지 링크 공유되나요?
진짜 도움 완전 많이 돼요 감사합니다 🙏🏻😃 ++ 더 자세한 수치도 궁금해져요 핳ㅎㅎ 그리고 보통 버튼 아웃라인 타입은 fill 오파시티 값을 100으로 주시나요? 아니면 오파시티를 낮추시는지 궁금해요!!!
저는 투명도 100으로 하고 컬러를 줍니다.
(기본적으로 투명도를 잘쓰지 않습니다) 왜냐면 백그라운드에 영향을 받지 않기 위해서 인데 장단점이 있죠 ㅎㅎ
하지만 제가 이렇게 한다고 해서 그게 기준은 아니며, 투명도를 잘 쓰실수있는 기준을 내부에서 잡고 합의한다면 충분히 쓰실슈있죠.
다만 가이드가 잘 적용될 수 있도록 우려되는 점을 잘 체크해보시면 좋을 것같고 긴 휴면기에 오래된 영상인데 아직도 좋아해주시는 분이 계셔서 감격스럽고 죄송하네요...! 디자인 화이팅하세요!
Ps. 저도 여전히 시스템을 계속 공부하고 있기때문에 why가 많은데 그럴때 레퍼런스를 많이 찾고 참고합니다~
@@yullo 감사합니다 참고하겠습니다 ㅎㅎ 영상 기다리고있어요 ♥️
너무 잘 봤습니다 ! 현재 it동아리에서 디자인시스템을 구축하는 프로젝트를 진행중인데 궁금한 것이 있는데요,
아이콘에 규칙이 있는것처럼 폰트, 컬러, 그림자에 대한 규칙도 다 설계가 되신건가요? 이미 정형화되어있는 규칙이 있어서 생략하신건가요?
도움이 되었다니 다행이네요 :), 영상 다시 자세히 보시면 폰트(타이포그래피), 컬러(썸네일에도 나와있듯이), 그림자(엘리베이션) 모두 규칙이 설계되어 있습니다. 이를 다크모드 라이트모드에 따라 추가로 분리하기도 합니다. 현재 그 부분은 당장 필요한 일부만 정리되어 있으나, 현재 디자인시스템에서 앞서가는 기업들은 대부분 설계되어 있습니다.
율로 yullo 감사합니다 ㅎㅎ 다시한번 정독하고 나중에 스토리북도 기대하겠습니다 !!
와 .. 너무 멋져요!
무엇이 멋진지 구체적으로 서술하시오 ;Dㅋㅋㅋㅋㅋ
혹시 색상 만드신것.. 100-200-300-400.. 이것의 기준은 레퍼런스가 어떻게되나요? ㅠ
가장 대표적인 케이스는 구글의 컬러시스템이 있구요. materialmixer.co/#B39DDB/40C4FF 처럼 / 저 같은 경우는 500과 600사이의 컬러가 필요할때 확장성을 가지기 위해서 100의 단위를 사용하게 되었어요. 그리고 50의 단위보다 100의 단위로 커지는게 이름을 기억하고 활용하기도 쉽구요. 제가 당시에 레퍼런스를 찾을땐 1의자리도 있었어요. 정답이 딱 뭐다는 없다고 생각하고 시스템도 결국 커뮤니케이션 도구기 때문에 뭐가 가장 다양한 사람들과 함께 했을때 효율적인지 생각해보시고 결정하시면 될 것 같습니다. 디자인시스템 레퍼런스 찾아보면 형태는 정말 많이 나옵니다!
잘 보았습니다! 혹시 디자인시스템은 pc용 모바일용 따로 파일을 만드시는지 궁금합니다!
만들때도 있고 아닌 경우도 있습니다. 지금은 제가 디자인시스템을 만드는 작업을 적극적으로 하고 있지않아서 말씀드리기 그렇지만 두개로 나누어 사이즈를 조정할 수 있게 만들면 확실히 편한 것 같아요.
@@yullo 답변 감사드립니다! 시간만 된다면 모바일에서도 세분화하여 AOS, iOS 디자인시스템 만들어두고 싶네요ㅠ
안녕하세요 저는 현재 산업디자인과에 3년째 재학중인 학생입니다!
UI/UX 디자인쪽으로 취업을 생각하고 있는데 무엇부터 준비해야할지 막막합니다... UI/UX 쪽으로 가려면 어떻게 준비를해서 취업해야하는지 조언 부탁드립니다!
저는 일을 하면서 경험을 통해 습득했던 케이스이기 때문에 정답이 있다고 하긴 어렵지만(대학생 창동 스타트업에서 처음 경험을 쌓았어요). 빠른 길을 가길 원하신다면 괜찮은 학원에서 기본적인 내용을 학습하는 것도 도움이 됩니다. 아니면 관련 인턴 경험을 쌓는 것도 좋구요. 독학하실 수 있다면 그 외 유튜브나 브런치, 미디엄 등에 UI/UX관련 자료가 많으니 찾아보시고 또 좋은 방법으로는 온라인 강의 교육 커리큘럼의 제목이 있잖아요. 제목에 있는 키워드나 학습 목표를 구글에 검색해보시면 관련 방대한 자료를 얻을 수 있습니다. 이 또한 방법이죠 ㅎㅎ 처음이시라면 학원은 개인적으로 리메인 추천드립니다. (선생님에 따라 효과는 다를 수 있습니다) 해서, 어느정도 지식이 쌓이셨다면 하나의 프로덕트를 한번 프로세스의 처음부터 끝까지 제작해보는 과정을 가져 보거나, 좋다고 생각하는 프로덕트를 따라하면서 왜 이렇게 했는지 생각해보시는 것도 좋을 것 같네요. 분명 그 중간중간 의문이 생길텐데 그때마다 해당 자료를 찾으면 훨씬 성장에 도움이 될겁니다. 자료가 널려 있으니 잘 찾아보면 많은 정보를 얻으실 수 있을거에요. 음...질문을 토대로 관련해서 제가 성장해왔던 과정과 경험을 공유하는 콘텐츠도 한번 준비해 볼게요~ 화이팅입니다 :)
고민한 흔적이 느껴지네요. 저런 프로젝트를 디자이너로써 혼자 진행하고 계신가요? 기간을 어느정도 잡고 하시는지 궁금하네요
네 저는 혼자 진행하고 있습니다. 기간을 딱히 잡고 하고 있진 않고요. 왜냐면 저희 내부 태스크로 보았을때 우선순위가 높지 않기 때문에 별도의 기간을 책정하고 수행하지 않았습니다. (그 외 다른 이슈들도 있고) 다만 목표가 있다면 내년 3월 초 쯤엔 오픈가능한 내부 디자인 시스템 사이트가 나왔으면 좋겠다 정도 되겠네용 ㅎ.ㅎ 댓글 감사합니당 _ _)/ 좋은 밤 되세요~
영상 재미있게 잘 봤습니다. 전 일본에서 디자인 회사를 운영하고 있는 사람입니다. 최근 몇년간 디자인 시스템에 주목하고 있고, 일본의 큰 업체들에게 디자인 시스템을 만들어주는 일도 하고 있어요. 부탁드리고 싶은 일도 있고, 얘기를 좀 나누고 싶습니다. 혹 괜찮으시다면, 답변 주시면 연락처 드리도록 할게요.
재미있게 봐주셔서 감사합니다 :) 어떤 이야기인지 궁금하네요. 기타문의는 artsyull@gmail.com 또는 인스타 yullo__로 DM주시면 됩니다. 좋은 하루되세요~
디자인 가이드 평균 제작 시간이 얼마나 걸리나요? 보통 얼마정도의 시간이 주어지나요?
규모나 상황에 따라 다른데요. 레거시가 쌓이지 않은 상태에서는 한달이면 시스템MVP를 만들기 충분하다고 보고 있구요. 하지만 말그대로 MVP이기 때문에 지속적인 업데이트 및 운영관리가 필요합니다. 그리고 레거시가 많이 쌓인 조직같은경우는 모든 UI를 모아서 정리하는 작업이 필요하기 때문에 더 오래 걸려요. 그래서 플랫폼 디자이너라는 직군이 새로 생겨난 이유기두 하고요 ㅎㅎ
혹시 컬러 부분에서 50 - 900으로 나뉘는 이유가 있나요?
작업 당시 100의 단위로 900대 까지 컬러칩을 만들었는데 더 연한 색이 필요해서 50을 추가했었어요. 투명도를 사용하는것도 고민했었는데 자주 쓸 것이라고 봤기때문에 추가를 했었구요. 현재는 컬러칩을 다시 한번 재정비해서 50정도의 톤을 100에 배치했어요 (그렇다고 50의 값을 가지는게 틀렸다는건 아니고 팀 내부 운영방식 협의에 따라 다를 것 같아요!)
만드신 디자인 시스템을 사고 싶습니다. 살 수 없나요?
저도 시스템을 갖추는데 어려움을 겪고있는 분들이 쉽게 만들 수 있는 시스템 메이킹 툴을 만들고 싶다는 생각을 가지고 있는데 아직은 여러가지로 저의 여건이 안되네요.ㅠ 말씀만이라도 너무 감사합니다.
대신 피그마 커뮤니티나 기타 등에서 좋은 시스템들 구하실 수 있으니 그런 자료들 받아서 써보시는것을 추천드려요! 어도비에서도 좋은 자료들을 공개중입니다 :)
좋은정보인데 말이너무빨라요ㅠㅠ
아 말이 빠르군요 ㅠㅠ 말이 느리면 지루해 하실거라고 생각했는데 속도 조절에 실패했네요 ㅎㅎ 좋은 피드백 감사합니다!!