블로그 모아보기 - 인프런

Figma를 사용하는 방법에 관한 간단한 튜토리얼 만들었습니다!

이제 Figma는 단순한 디자인 툴이 아니죠! 처음 제가 접했을 땐 iOS에서의 UI 개념들과 유사한 부분들도 많고애니메이션을 구현하는 부분 같은 경우엔 에펙에서의 개념과도 비슷해서적응하는데 어렵지는 않았던 것 같아요. XD를 사용해오신 분들은 종종 전환하는데에 어려움을 겪으시는 것 같더라구요.사내 디자이너분들은 위한 튜토리얼을 만들었는데 개발자 분들께도 도움이 될 것 같아링크 첨부해 둡니다:) Figma랑 Framer를 조합하면 간단한 랜딩 페이지도 금방 찍어낼 수 있네요! https://www.figma.com/community/file/1314105663439944154

디자인 · 아트･figma･tutorial

4

2

[인프런 워밍업 스터디 클럽 1기] 프로덕트 디자인 1기 후기

오프라인 수료식 참가퇴근하자마자 달려간 판교. 공지사항에 안내해준 길로 가보니 인프런 워밍업 클럽 배너가 환영해줬다. 엘리베이터를 타고 인프런 사무실에 도착했을 때는 다들 파트별로 삼삼오오 모여있었다. 나는 인프런 스태프분의 안내로 프로덕트 디자인 파트 멘티분들과 한 테이블에 앉게 되었다. 네트워킹 시간인프런 측에서 제공해주신 피자와 음료수로 식사를 하면서 다른 분들과 이것저것 이야기하며 자유롭게 네트워킹 할 수 있는 분위기가 좋았다. 식사를 하며 도란도란 이야기를 나누는 네트워킹 시간이었는데 다들 디스코드를 통해 미션을 통해 본 이름이라서 그런지 처음보는데도 친근감이 들었다.프로덕트 디자인 파트 자리에는 오프라인 수료식에 참석하지 못한 볼드님 대신 인프런의 시니어 프로덕트 디자이너인 엠제이님께서 테이블에 함께 해주셨다. 그리고 Q&A 시간이 아님에도 불구하고 이런저런 사소한 질문들까지 모두 답변해주신 엠제이님 정말 감사드립니다. 다른 분들도 정말 날카로운 질문을 많이 해주셨다.덕분에 인프런에 대해 궁금한 점도 풀리고 인프런의 디자인 업무에 대해서도 답변을 들을 수 있었던 소중한 자리였다.멘토 소개 및 우수러너 시상그렇게 네트워킹 시간이 끝나고 각 파트를 담당하신 멘토님 소개가 있었다. 현재 ‘런던’에 계신 볼드님께서는 물리적 거리상 오프라인 수료식에는 구글미트로 참석해주셨다. 워밍업 클럽을 하면서 내내 봤던 볼드님 얼굴이었는데도 이렇게 또 보니 매우 반가웠다. 볼드님의 얼굴이 화면에 나타나자마자 프로덕트 디자인 테이블에서는 반가움의 환호도 터져나왔다. 그 다음은 대망의 우수러너 시상식이 진행되었다. 사실 워밍업 클럽 OT때의 우수러너가 되자고 호기롭게 다짐했던 것과 달리 미션하는 과정이 힘들어서 완주했다는 사실에만 만족하고 있었다. 처음에 다들 미션보드로 미션을 진행할 때 나는 다른 드래프트에서 미션을 진행해서 시작부터 삐끗했었고, 어느 순간부터는 제출 시간을 엄수하지 못했다는 아쉬움이 가득했기 때문이다. 그래서 어떤 분이 우수러너를 받으실 지 너무 궁금해서 핸드폰을 들고 우수러너 발표만을 기다리고 있었는데…. 어?!우수러너 발표 화면에 내 이름이 딱 나타난 순간 전혀 예상하지 못 해서 너무 놀랐다. 얼떨결에 나가서 우수러너 시상도 받고 사진도 찍었다. 쑥쓰러운 마음으로 자리에 돌아가니 다른 멘티분들이 정말 많이 축하해주셨다. 중간에 포기하지 않고 완주 한 것만으로도 스스로 만족하고 있었는데 이렇게 우수러너에 선정이 되다니, 모두 다 좋은 강의를 해주신 볼드님과 워밍업 클럽을 진행해주신 인프런 덕분이라고 생각한다. 질의응답잠깐 쉬는 시간을 가지고 Q&A 시간이 진행되었다. 질의응답은 구글 미트를 통해 온라인과 오프라인 동시에 진행되었으며, 미리 받은 질문 중 일부를 선정하여 진행하였다. 프로덕트 디자인 팀은 인프런의 시니어 디자이너 엠제이님께서 선정된 질문과 온라인으로 올라온 질문에 답변을 해주셨다.기억나는 질문과 답변들을 몇 가지 정리해보았다. (잊지 않고 내가 기억하고 싶어서 정리해봤습니다...)Q1. 개발팀과 핸드오프 할 때 어떤 방식으로 소통하나요?A1. 피그마에서 ready for dev 사용하고 변경사항도 dev mode를 통해서 확인합니다. 피그마에서 오거나이저 이상 플랜에서 베타버전으로 제공하는 code connect라는 기능도 사용하는데 앞으로 프로퍼티 작성이 중요해질 것입니다.Q2. 프로덕트 디자인을 잘하기 위한 방법이나 성장에 가장 도움이 되는 것은 무엇일까요?A2. 가설을 뾰족하게 세울 수 있어야 하며, 내가 세운 가설을 내부 팀원들도 이해하는지가 중요합니다. 내가 세운 가설을 증명하고 타인이 공감해야하며 끊임없이 시도하고 그게 먹힐 때까지 도전해야합니다. 외부에서 UT를 해볼 수 없다면 내부에서라도 UT를 진행해보시면 도움이 됩니다.Q3. AI와 새로운 플랫폼에 대항하는 커리어 설계 방법은 무엇이 있을까요?A3. 오히려 활용할 수 있는 방법이 다양해져서 좋습니다. 시간이 오래 걸리는 일은 이제 AI를 통해서 시간을 단축하고 그 시간에 디자이너는 다른 데 고민할 수 있는 시간이 생겼습니다. AI를 잘 습득하고 더 잘 활용하려면 어떻게 써야할지 본인만의 노하우를 쌓아서 대체 불가능한 인력이 되고 필요한 사람이 되는 것이 중요합니다.Q4. JD에서 말하는 디자인 시스템 구축 경험이 어디까지 일까요?A4. 꼭 문서화까지 해야 디자인 시스템을 구축했다고 말할 수 있는건 아니지만 구축한 레벨이 어느 정도까지인지가 중요합니다. 특히 코드화되어 싱크가 어느정도 되어있는지가 중요하고, 디자인 시스템을 다른 디자이너들과 같이 구축했는지도 중요합니다. 인원이 적은 상태에서 디자인 시스템을 구축하는 건 제한된 시간에 리소스를 낭비하는 게 될 수도 있습니다. 일단 파운데이션 정도로만 시작을 하고 거기에서 더 발전시켜나간다면 유의미하다고 봅니다.Q5. 디자이너로서 노력해야 하는 소프트 스킬 노하우가 있을까요?A5. 피드백에 대해서 수용적으로 받아들이고 긍정적으로 바라보세요. 어떤 의견을 수용 할 지 말지 결국 제 선택이지만 일방적으로 선택하기 보다는 협업하는 사람들을 생각합니다. 그리고 긍정적인 태도를 유지하려고 하며, 냉정하게 이야기 하지 않으려고 합니다.뒷풀이오프라인 수료식의 모든 과정이 끝났음에도 헤어지기 아쉬웠던 프로덕트 디자인 파트 사람들은 뒷풀이를 가자고 결정하였다. 함께하는 인원 중에는 학생분도 계셔서 모두가 갈 수 있는 배스킨라빈스를 가려고 했지만 사람이 너무 많아서 실패. 대신에 바로 옆에 있는 편의점으로 가서 음료수를 마시며 이야기를 더 하기로 했다.아무래도 온라인에서 한 달동안 이름을 지켜봐왔기 때문이었을까 다들 낯가리는 사람 없이 엄청난 수다를 떨었다. 다들 워밍업클럽이 진행되는 동안 미션에 대해 이야기를 하기도 했고, 직장을 다니시는 분들은 현업에 대해서도 다양한 이야기를 해주셔서 재밌고 유쾌한 자리가 되었다. 시간이 늦어져 헤어지는 것이 아쉬워서 다들 SNS이나 명함을 교환하고 언젠가 꼭 만나자는 말을 하며 헤어졌다. 워밍업 클럽 후기5월 한 달 내내 진행된 워밍업 클럽 스터디 1기가 정말로 끝났다. 매일 퇴근하고 컴퓨터 앞에 앉아서 미션하던 게 끝났다는게 시원섭섭하다. 워밍업 클럽 덕분에 볼드님의 강의를 완강 할 수 있었고, 디스코드 채널을 운영해주신 덕분에 미션을 진행하며 궁금했던 많은 질문도 할 수 있었다. 비록, 워밍업 클럽 스터디 1기가 끝났지만 시간이 나는대로 강의를 복습하거나 피그마 파일을 다시 켜서 한번 더 다듬을 부분이 있나 확인해볼 예정이다.기존 강의와 별개로 피그마의 업데이트 된 내용과 여러가지 프로 팁을 알려주시는 온라인 세션을 추가로 진행해주신 볼드님께 감사드리고, 이러한 자리를 만들어주신 인프런 측에도 감사드린다는 말을 끝으로 마무리하겠다. 다들 모두 수고하셨습니다! 👏

UX/UI･피그마･UIUX･UXUI･디자인･프로덕트디자인･figma

2

[인프런 워밍업 스터디 클럽 1기] 디자인 1주차 발자국

첫번째 발자국우여곡절이 많았던 1주차였다. OT때 하루에 하나씩 미션을 수행하겠다는 다짐과 달리 미션을 못 한 날도 있고 몰아서 한 날도 있었다. 어찌저찌 1주차를 맞았으니 그동안 돌아보는 발자국을 작성해봐야겠다. Day1 OT피그잼에서 수 많은 사람들의 마우스 커서와 함께 오리엔테이션이 진행되었다. 멘토님은 영국에서 우리와 다른 시간대에 계시면서 라이브를 진행하셨다. 인프런 워밍업 스터디 커리큘럼을 보면 매일 미션이 있어서 다 지킬 수 있을까? 하는 생각이 들어 신청하기 전 고민이 있었다. 미션은 기한을 놓치더라고 올리면 되고, 미리 올려도 된다고 말씀해주셔서 심리적으로 편안해졌다. 아무래도 온라인으로 진행되고 혼자하는 스터디라서 외롭지 않을까 싶었는데 피그잼에서 만난 다른이들의 마우스 커서가 정말 반가웠다. OT때 피그잼에 작성한 세 가지가 있었다. 스터디 러너로 신청한 이유, 매일의 계획, 자기 자신에게 줄 보상. 내가 적은 세 가지 항목들을 잊지말고 스터디에 열심히 임해야겠다. DAY2 배리어블과 토큰, 디자인 시스템의 개념강의를 시작하며, 먼저 해야할 것이 있었다. 그것은 바로 피그마 에듀케이션 계정 신청이다. 현재 개인 피그마 계정을 무료 플랜으로 사용하는 나는 강의 시작 전 필수 사항에 나와있는 내용으로 에듀케이션 계정을 신청했다. 안내해주신 방법으로 진행하니 금새 신청이 완료되었다. 1주차 중에서 이 날이 가장 어려웠다. 토큰과 배리어블의 개념을 유튜브나 디자인 아티클을 보며 대략적으로 알고 있었다고 생각했는데 아니었다. 그동안 내가 알고 있던 것은 모두 수박 겉핥기 뿐인 지식이었다. 아마 개념 강의를 들으며 적은 노트가 다른 강의보다 제일 많았다.특히 이번 파트에서 좋았던 건 내가 디자인시스템을 뜯어보며 가장 궁금했던 이름들의 의미를 알 수 있어서 좋았다. --md-, spectrum-, --p-, --lsdg- 이런 이름들의 의미가 시스템의 이름이라는 것을 알 수 있어서 좋았다. 그리고 티셔츠 사이즈라는 개념도 배웠는데, 예전에 디자인시스템을 뜯어보다 발견한 문자 중 sm과 lg가 small, large의 약자인 지 몰라서 한참을 검색했던 기억이 생각났다.Shopify Polaris에서 캡쳐 Day3 색상 스타일 등록 및 배리어블이 파트에서는 무엇보다도 색상 구조의 이름을 비교해보기 위해서 직접 엑셀에 이름을 하나하나 뜯어서 정리해보셨다는 것이 인상깊었다. 그동안 디자인시스템을 분석하기 위해 각 사이트들을 모아서 살펴보고 피그마 파일도 뜯어봤지만 이렇게 정리해볼 생각은 못 했다. 비록 지금은 미션이 급해서 엑셀로 정리를 못 했지만 완강 이후에 2회독 때 꼭 이 작업를 해봐야겠다고 결심했다. 강의에서 가장 인상깊었던 부분 - 색상 배리어블 구조, 이름 짜보기에서 캡쳐강의를 들은 이후에 MS의 Fluent 2 Design System의 Color token 문서를 다시보니 전과는 다르게 보였다. 그 전에는 쏟아지는 영어와 색상들과 스크롤 길이에 압도 당하는 느낌이었는데 이제는 찬찬히 살펴볼 수 있게 되었다.Fluent 2 Design System에서 캡쳐 드디어 첫번째 미션이다. 처음에 강의 명만 봤을때는 컬러를 어떻게 헥사코드로 뽑을지 HSL로 뽑을지 궁금했었는데 강의를 보며 모두 플러그인으로 진행하는 것을 보고 큰 충격을 받았다. 그렇다. 피그마는 이제 플러그인이 발달해서 적재적소에 쓰기만 하면 되는 아주 편리한 툴이란 것을 새삼 깨달았다. 물론 실무에서는 브랜드컬러에 맞게 색상을 좀 더 세밀하게 조정하기도 하겠지만 플러그인으로 빠르게 작업을 한다며 업무 효율도도 많이 오르고 좋을 것 같다. Color Scoping이란 기능이 신기했다. 처음에 배리어블에 색상을 등록하면서 이렇게 계속 등록하다간 나중에 배리어블 창은 작고 선택할 색상이 많아서 찾느라 시간 보내는거 아닐까? 하는 생각은 기우였다. 해당 기능으로 원하는 요소에 원하는 색상만 보이게 한다는게 편하고 좋았다. 정말 피그마란 툴이 효율적으로 프로덕트를 만들기 위해 제작되었다는 걸 또 깨닫게 되었다. 나는 현재 실무에서 배리어블이 아니라 스타일을 사용하여 작업하고 있는데 이제 배리어블을 알게되었으니 언젠가는 스타일에 있는 컬러를 배리어블로 전환하는 일을 해야겠다는 생각도 들었다. Day4 간격 배리어블, 타이포그래피, 아이콘간격 배리어블을 미리 알았으면 얼마나 좋았을까… 그동안 4,8,12로 간격을 주었지만 손가락이 미끄러져서 5,9,11 이런 식으로 잘못 오기된 나날들이 떠올랐다. 개발자 분이 작업한 간격이 이상해서 다시 살펴보면 내가 작업한 피그마에 간격이 잘못 입력되어 있을 때가 종종 있었기때문이다. 타이포그래피는 영문으로 진행되어 조금 아쉬웠다. 타이포 스타일 가이드 중에 국문으로 만들어주는 것이 있는지 찾아봐야겠다. 국문의 경우는 항상 자간을 조정하는데 영문은 그런 작업이 필요 없는지도 궁금했다. 추가로, 일단 화면 만들기 전에 타이포그래피 가이드를 먼저 만드는 점이 의아했다. 가이드를 만드는 선행 작업를 통해 작업물의 타이포 위계를 명확히 하려는 것이 목적인 거라면 실무에서 가이드로 만든 사이즈 외의 글자가 생겨날 땐 어떻게 대응하시는지 궁금했다. Feather Icon은 무료 아이콘으로 여러번 소개가 되어서 알고 있었는데 이렇게 강의에서 만나고 써보니까 새롭다. 일괄적으로 원하는 사이즈를 원하는 두께로 추출 가능하다는 점이 정말 좋았다. 바퀴를 다시 발명하지 마라 라는 격언이 떠올랐다. 오픈소스에다가 MIT라이선스인 아이콘 사이트가 하나 생각났다. 다른 러너분들도 알면 좋은 정보라고 생각되어 사이트를 기재해본다. Feather Icon처럼 두께 설정 세밀하게 할 수는 없지만 크기와 색상을 일괄적용 할 수 있어서 즐겨찾기 해둔 곳이다.Phosphor Iconshttps://phosphoricons.com/ Phosphor Icons에서 캡쳐 Day5 그림자 효과, 반응형 기준점, 기타 배리어블나는 정말 Elevation이 구글의 머터리얼 디자인 가이드를 살펴볼 때 너무 어려웠었다. 일단 단어가 생소하기도 하고 국문으로 일대일 번역하기 어려운 단어기도 해서 그런 것 같다. 특히 구글의 m3에서는 m2보다 내용이 더 추가되어 더 헷갈렸었다. 그런데 강의에서 ‘높낮이’라고 표현해주셨는데 그때 아! 하고 개념이 이해가 되었다. 비록 강의에서는 그림자(shadow)라고 한 뒤 미션을 진행되었지만 높낮이라고 이해하며 머터리얼 디자인가이드를 다시 읽으니 전과 다르게 이해가 잘되었다. 내게 Elevation의 개념을 가장 잘 설명해줬던 파트(강의 중 캡쳐) 반응형 기준점 설명 시에 나오는 고정형(fixed)과 반응형(fluid)는 미리 알고 있던 개념인데 하이브리드 개념은 처음 알게 되었다. 주로 왼쪽에 SNB가 있는 경우 왼쪽은 고정형, 오른쪽은 반응형으로 하는게하이브리드의 예시라고 하셨다. 이걸 알고나니 너무 속이 개운했다. 지금 실무에서 작업하는 레이아웃이 하이브리드 형태인데 그동안 이름을 몰라서 이걸 고정형도 아니고 반응형도 아니고 뭐라고 불러야되나 고심했던적이 있기 때문이다. 이렇게 강의를 들으며 새로 알게되는 사실이 그동안 고민을 했던 부분을 시원하게 해결해줘서 좋았다. 기타 배리어블에서는 테두리(Border)와 투명도(Opacity)를 다뤘다. 색상 배리어블 할 때 Frame, Text, Icon, Border의 색상 넣는 것을 할 때 보더의 두께나 투명도도 배리어블이 있었으면 좋겠는데 라는 생각을 했는데 강의가 나온 이후에 피그마에서 업데이트가 있었나보다. 여기에서도 앞에서 했던것과 마찬가지로 배리어블을 등록하고 쉬프트 누르고 왼쪽으로 클릭해서 값을 지정하니 정말 편했다. Day6 스타일 파운데이션 다듬고 내보내기컴포넌트 설명을 붕어빵에 비유하신게 정말 찰떡이고 기억에 남았다. 그리고 컴포넌트 만드는 순서를 두 가지 보여주셨는데 두 가지 사례 중에서 내가 실무에서 사용하고 있는 방법이 첫번째 방법이라서 익숙했다. 앞으로 강의도 이와 같은 순서로 진행된다고 하는데 내가 실무에서 사용하고 있는 방법와 어떤 부분이 같고 다른지 비교해 볼 수 있을 것 같아서 기대가 된다.앞으로 강의에서 사용될 예정인 컴포넌트 만드는 순서 캡쳐강의 자료로 공유해주신 컴포넌트 워크시트에서 웹접근성 항목을 보며 그동안 나는 웹접근성을 지키면서 컴포넌트를 만들었는지 스스로를 되돌아보게 되었다. 왜냐면 일정에 쫓겨 항상 급하게 무언가를 만들고 화면을 쳐내기에 바빴지 이렇게 상세하게 정리하고 체크해본적이 없기 때문이었다. 아직 미션4는 작업중인데 디스코드에 올라오는 다른 러너들의 다양한 스타일이 무척 흥미롭다. 나도 나만의 스타일 가이드를 만들어서 미션을 마무리 지어야겠다는 생각을 했다. DAY7 첫번째 중간점검 및 질의응답 세션특별강의에서 가장 신기한 것은 아이콘이 안 깨지게 조정하는 앤트맨 전략이 정말 신기했다. 깨진 아이콘 문제를 해결하기 위한 다양한 사례들을 하나하나 보여주셨는데, 아이콘 문제를 해결하기 위한 튜터님의 집념에 경의를 표하고 싶었다.피그마에서 최근 업데이트 된 멀티 에딧은 업데이트되었다는 소식만 듣고 시간이 없어서 제대로 살펴보지 못했는데 이 세션에서 자세히 살펴 볼 수 있었다. 앞으로 다양한 컴포넌트를 만들 때 정말 잘 쓰일 것 같다. 특히 멀티 에딧을 할 때 아이콘은 프레임 상태가 아니라 꼭 에셋 상태로 등록해야 멀티 에딧을 제대로 쓸 수 있다는 것도 알게 되었다.디스코드 질문 답변 채널에 남긴 질문에 대한 답변을 들을 수 있었는데, 강의를 들으며 궁금했던 부분을 이렇게 라이브 세션으로 답변 받을 수 있어서 속 시원했다. 아이콘 크기가 다른 경우에는 버튼도 크기를 다양한 세트를 준비하는 것이 작업에 더 효율적이라고 알려주셨다.내가 디스코드 채널에 올린 질문 그 외 추가로 채팅창에 올라오는 질문들도 하나하나 모두 답변해주셔서 정말 감사했다.Q.아이콘도 사이즈별로 구성하는걸 추천하나요? (16px, 24px, 32px…)→ YES. 그렇게 쓰려고 아이콘을 깨는 겁니다. 그래야 사이즈가 다양하게 조절해도 되니까요. 우리 회사 디자인 리소스가 많다면(=디자인 일할 사람도 많고, 디테일을 원한다면) 다양한 사이즈 추천. 하지만 사람이 없다. 그럼 하나의 아이콘으로 쭉 쓰는걸 추천.Q.오픈소스 아이콘을 써도 무방할까요?→ YES 디자이너가 하나하나 만들 수는 없다.Q. 아이콘을 flatten selection 하면 수정이 불가능한데, 원본을 따로 저장하나요?→ YES 원본은 따로 저장해둡니다. 나 말고 다른 사람이 어떻게 쓸 지 모르기 때문에. 특히 프레임으로 만들어진 아이콘 라이브러리 따로, 시스템에서 사용하는 것 따로 존재함 특강에서 앞으로 만들 컴포넌트 종류를 살짝 보여주셨는데 정말 많았다. 수많은 컴포넌트가 나를 기다린다는 사실이 너무 기대되고 흥미진진하다. 번외로내가 미션을 제공해주신 미션보드가 아니라 다른 곳에서 제출해서 냈다는 사실을 미션이후에 받은 피드백을 통해서 알았다. 내가 왜 그랬나 다시 돌이켜보니까 에듀케이션 계정을 생성하고 팀 라이브러리를 지정한다는게 그대로 미션을 진행했던 것이었다. 분명 오리엔테이션으로 안내받은 사항이었는데 깜빡했었나 보다. 다음 미션부터는 제공해주신 미션보드를 통해 진행해야겠다.

UX/UI･피그마･피그마토큰･피그마배리어블･figma･디자인

2

1

[인프런 워밍업 스터디 클럽 1기] 디자인 4주차 발자국

네번째 발자국 이번주는 스터디가 끝나는 주간이지만 지난주에 미션 진도를 많이 못했던 터라 못 다한 미션을 다 하도록 시간을 많이 할애했다. 1배속으로 듣던 강의를 1.25배속으로 들으며 완주를 위해 막판 스퍼트를 달린 주간이었다. 그리고 컴포넌트를 만들고 브랜드별 색상과 다크모드를 적용하는 부분이 너무 재밌었다. 이 작업을 하기 위해 그동안 스터디를 달려왔구나 싶었다. 그리고 인프런 러닝 클럽 스터디가 없었다면 아마 이 강의를 완주하지 못 했을 것 같다. Day13 네비게이션 컴포넌트 만들어보기Breadcrumb, Tabs, NavBar, Pagination, SideNavBar, Header, Carousel을 만드는 과정을 배웠다. 앞에 말한 컴포넌트들을 모두 네비게이션 컴포넌트라는 종류로 묶어서 명명할 수 있다는 점을 배웠다. 그전에 실무에서 해당 컴포넌트들을 만들었을 때는 이러한 지식이 전무한 상태에서 만들고 머터리얼 디자인이나 플루언트 디자인 시스템만 참고하다보니 모두 컴포넌트가 낱개로 흩어져 있었다. 앞으로 컴포넌트들을 만들더라도 크게 카테고리라이징을 할 수 있는 것을 강의를 통해 배웠다.특히 Pagenation, SNB, Header 이 세 가지를 만드는 법이 그동안 만든 컴포넌트들을 이용하여 레고 블럭을 쌓듯이 만들 수 있다는 점이 즐거웠다. SNB는 반응형을 고려하여 데스크탑 — 타블렛 — 모바일 버전으로 만드는 점도 무척 재밌었고 도움이 되었다. 오토 레이아웃을 이용하여 상단 메뉴들과 하위 메뉴를 구분하고 앱 세팅 부분은 위치를 고정 할 수 있다는 점을 배울 수 있었다.반응형을 고려하여 3가지 타입으로 만든 SideNavBar Day14 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기컴포넌트를 만들고 항상 Contrast 플러그인으로 접근성을 체크하는 작업을 반복하다보니까 디자인 할 때 접근성이 얼마나 중요한지 몸소 깨닫게 되었다. 사실 접근성이 중요하다고 하지만 실무에서는 바쁘거나 브랜드 아이덴티티를 더 중시한다는 이유로 접근성 체크를 하지 못한 채 넘어가는 일이 많기 때문이다. 그런데 말만 중요하다고 하는 것보다 강의를 들으면서 매번 체크를 하고 그렇게 컴포넌트를 접근성 기준에 맞추기 위해 수정하는 작업을 하다 보니까 앞으로 내가 하는 작업도 접근성을 꼭 놓치면 안되겠다는 생각이 들었다. 접근성을 체크 필수 플러그인 Contrast Day15 베리어블 다크모드 개념을 익히고 활용해보기강의 화면대로 따라하며 다크모드를 적용하는데 처음에 모드가 제대로 적용되지 않아서 많이 당황한 미션이었다. 알고보니 내가 색상을 제대로 지정하지 않아서 생긴 문제였다. 그래서 다시 메인 컴포넌트로 돌아가서 색상을 다시 지정해주고, 색상 배리어블도 매치가 제대로 되지 않은 부분이 있어서 강의에 나온대로 작업 → 테스트 → 확인을 계속 반복하며 시간이 많이 소요되었다.볼드님이 작업하신 완성본도 보니 이전에 컴포넌트 강의와 색상 부분이 다른 경우가 여러군데 있어서 참고해서 변경했다. 그동안 다크모드는 버튼 하나로 쉽게 바꿀 수 있는 기능이 피그마에 생겼다고 알고 있었지만 그렇게 보여지기 위해서 뒤에서는 많은 손길이 필요하다는 점도 알게 되었다.아이콘도 중간에 문제가 생긴 아이콘들은 Phoshor Icon으로 변경해서 진행했다. 온라인 세션에서 아이콘 문제를 해결하는 법을 알려주셨지만 그게 모두 적용되진 않아서 시간 관계상 이렇게 하는 것이 더 빨랐다. 다크모드로 변환되었을 때 짜릿한 순간도 잠시, 생각보다 수정해야 할 부분이 많았다. Day 17 기타 베리어블 모드 활용 개념 익히고 실습해보기브랜드 컬러 배리어블을 적용하는데 강의 화면에 있는 색상이 나에게는 없어서 다시 프리미티브 배리어블에 색상을 추가해서 진행했다. 처음 색상 배리어블을 추가할 때는 시간이 많이 걸렸는데 한 번 해본 작업을 다시 하려고 하니까 생각보다 금방 했다. 이렇게 또 중간에 색상 배리어블을 추가하는 작업을 복습하는 기회가 되었다.미션에는 없었지만 강의를 들으며 반응형 배리어블도 함께 실습하면서 진행했다. 여기에서는 오토레이아웃 기능 중 Warp을 써볼 수 있어서 재밌었다. 디바이스 크기 별로 카드 컨텐츠가 각기 다르게 표현되는 점과 반응형 사이즈도 모드를 적용해서 변경 할 수 있다는 것을 배울 수 있었다.특히 레이어를 Show/Hide 하는 불린을 배리어블의 모드로 적용하려면 눈 아이콘에서 오른쪽 마우스를 눌러야 배리어블을 사용 할 수 있는데 이 부분은 강의를 통해서 배우지 않았더라면 전혀 몰랐을 것 같다.반응형 모드를 적용하기 위한 배리어블그동안 만든 컴포넌트의 인스턴스를 모두 가져와서 브랜드 컬러를 입히고 라이트모드/다크모드를 적용하는데 순간 맥북이 커다란 비행기 소리를 내고 피그마의 온라인 상태가 잠시 끊어져 당황했었다. 아무래도 맥북을 바꿀 때가 된 것이 아닐까 하는 생각이 드는 미션이었다.피그마 온라인 상태가 끊길 때 나타났던 아이콘, 작업 한 내용이 날라갈까 조마조마했다. Day 18 B2B 이커머스 어드민 페이지 만들기그동안 열심히 컴포넌트를 만들었던 작업이 빛을 발하는 미션이었다. 정말 재밌었다. 아무래도 실무에서 어드민 페이지와 테이블을 많이 만드는 작업을 하다보니까 이번 강의가 정말 나에게 큰 도움이 되었다. 나와 다른 방식으로 작업하는 볼드님의 작업 순서를 많이 참고하여 실무에 적용 할 수 있도록 해야 겠다. 강의 중간에는 컴포넌트에서 수정해야 할 부분을 볼드님은 report로 남겼지만 나는 즉시 메인 컴포넌트에 들어가서 수정하며 작업을 했다. 이런 부분을 통해서 디자인 시스템 만드는 디자이너와 화면을 만드는 디자이너 사이에서 어떤 식으로 커뮤니케이션을 하는 지 엿볼 수 있는 기회였다.데스크탑 모드를 먼저 만들고 전체 오토레이아웃을 적용해서 데스크탑 - 랩탑 - 타블렛 - 모바일 이렇게 반응형 배리어블을 적용하는 것도 재미있었고, 브랜드 컬러를 입힌 뒤에 다크모드를 적용하는 것도 재미있었다. 강의에서는 데스크탑 - 타블렛 이렇게 두 가지 반응형 모드만 진행했었지만, 미션의 완성본을 참고하여 데스크탑 - 랩탑 - 타블렛 - 모바일까지 만들어 줬다.아직 보너스 미션은 해보지 못했는데 이 것도 차차 꼭 해보도록 해야겠다. 반응형도 적용하고 라이트/다크 모드도 적용해 볼 수 있었던 미션 Day 19 B2C 이러닝 페이지 만들기마지막 온라인 세션 때 디자인 시스템의 성공 지표가 있다는 것을 배웠다. 디자인 전체에서 디자인 시스템을 얼마나 잘 사용하고 있는지, 페이지를 작업하면서 디자인 시스템 컴포넌트 라이브러리를 사용해서 만들었는지 비스포크를 하지 않는 것이 중요하다고 배웠는데 이번 미션을 통해서 그런 성공지표가 왜 필요한 지 알게 되었다. 그동안 만들었던 컴포넌트를 아예 안 쓴 건 아니고 재활용해서 쓰기도 하고, 이번 작업에 필요한 컴포넌트를 추가로 만들면서 진행했다.이번 미션에서 구글 스프레드 시트를 이용하여 실제 데이터를 넣는 방법에 대해서도 배웠다. 실 데이터를 넣기 위해 많은 데이터가 필요한데 이럴 때는 Google Sheets Sync 플러그인으로 쉽게 적용할 수 있었다. 사실 이건 실무에서도 써본 적 있는 플러그인이라서 반가웠는데, 나는 다른 시트에 있는 데이터를 넣는 방법을 몰라서 결국 한 번 사용해보고 다방면에 활용해보지 못했었다. 그런데 볼드님이 알려주신 트릭으로 구글 시트의 위치를 변경해서 하나의 구글 시트 파일 안에서 다양한 데이터를 넣는 방법을 배울 수 있었다.데이터를 넣을 때 효과적으로 사용되는 플러그인 Google Sheets SyncDay 21 Q&A 온라인 세션 - 디자인 시스템 문서화 (Feat. Chat GPT)디자인 시스템을 문서화 하는 이유에 대해서 배웠다. 디자인 시스템을 문서화 하는 이유는 서로 생각하고 있는 UI가 다르기 때문에 일관성, 효율성을 위해 디자인 시스템 문서화가 필요하다. 이는 곧 디자인 시스템은 혼자 하는 작업이 아니고 협업을 위해서 필요한 작업인 만큼 문서화가 얼마나 중요한 지 알게 해주는 부분이었다. 그리고 디자인 시스템에도 성공 지표가 있다고 하는데 디자인 파일 전체에서 디자인 시스템을 얼마나 사용하고 있는지 디자인 시스템을 채택해서 디자인 했는지가 중요하다고 알려주셨다.그리고 피그잼을 통해서 디자인 시스템 문서화에 필요한 필수 요소를 투표해봤는데 대부분 생각이 비슷한 지 투표 결과가 몰리는 것을 확인 할 수 있었다. 내가 투표한 디자인 시스템 문서화에 필요한 필수 요소는 스펙, 스테이트, 반응형 디자인 이렇게 세 가지를 투표했었다.온라인 세션 시작 전에 ChatGPT를 활용하는 시간이 있다고 해서 어떤 강의를 하는지 기대했었는데, 이 날 진행된 온라인 세션은 정말 최고였다. 수 많은 국내/해외 디자인 시스템 문서를 보면서 이런 문서들에 들어갈 내용을 모두 작성하려면 어떻게 작성해야되는지 궁금했었다.그런데 ChatGPT에게 프롬프트를 입력하면 컴포넌트의 사양, 상태, 사용법 등 디자인 시스템 문서화 하는데에 밑바탕이 되는 글을 작성해주는 점이 정말 편리하고 신기했다. 이런식으로 ChatGPT를 활용하는 방법을 알려주신 볼드 멘토님께 감사하고, 알려주신 프롬프트는 잘 저장해두고 훗날 디자인 시스템 문서화를 현업에서 진행 할 때 적용해봐야겠다.물론 ChatGPT가 완벽한 건 아니고 결과 값이 나오면 꼭 읽어보고 사람이 검토를 해야 할 점이 있다. 그리고 영문과 국문이 결과가 다르고 ChatGPT가 3.5ver인지 4.0ver 인지에 따라서 결과 값이 다르다고 하니까 다양한 방법으로 활용해봐야겠다. 피그잼에 모여서 프롬프트를 사용해서 컴포넌트 별 결과물을 검토해본 온라인 세션 스터디를 마무리하며강의를 결제해두고 시간이 부족하다는 이유로 안 듣고 있었는데 인프런 워밍업 클럽 스터디 덕분에 커리큘럼에 따라 미션을 수행하면서 완주 할 수 있었다. 스터디를 하며 가장 좋았던 점은 아무래도 세 번이나 진행된 라이브 온라인 세션이었다. 사수가 없는 회사에서 고군분투하는 내게 볼드님이라는 든든한 사수가 생긴 기분이었다. 그 중에서 피그잼으로 진행되는 온라인 세션들은 다른 사람들의 마우스 커서들을 보면서 이 과정을 함께하고 있는 이들이 있다는 점이 큰 위안이 되었다.그리고 온라인 세션을 통해서 질의응답도 상세히 해주신 덕분에 미션을 하면서 많이 배울 수 있었고 성장했다고 느꼈다. 특히 온라인 세션 중에서 앤트맨 작전과 ChatGPT와 함께하는 디자인 시스템 문서화는 나중에 온라인으로 강의가 따로 올라오거나 세션 때 녹화한 부분을 풀어줬으면 하는 작은 소망이 있다. 인프런 여러분... 볼드님... 부탁드립니다... 🙏그리고 디스코드 채널 안에서 다른 이들의 미션을 확인 할 수 있었던 점도 좋았다. 강의를 보면서 미션을 진행했지만 혼자서 미션을 수행하며 이게 맞나 고민하는 시간만 길게 갖는 것보다 다른 사람들은 어떻게 작업하고 있는지 참고해가면서 할 수 있어서 큰 도움이 되었다. 사람들마다 피그마 파일에서 각자 강의를 수강하는 다양한 방식도 엿볼 수 있어서 좋았다. 강의 메모를 피그마에 하시는 분도 계시고, 강의의 스크린샷 캡쳐를 하시는 분들도 있어서 나도 그걸 보고 배웠다. 초반에는 인프런 강의를 수강하면서 강의 화면에 있는 노트 기능을 많이 썼는데 피그마 파일에 직접 실습하면서 메모하는 방법이 더 좋다고 느꼈다.비록 처음 OT때 결심과 달리 날짜를 맞춰 미션을 수행하는 것은 실패했지만 그래도 이 과정을 통해 강의를 완강 할 수 있게 되어 무척 감사하다. 이런 기회를 만들어주신 인프런 측에 감사의 인사와 한 달 동안 스터디를 위해 시간을 할애해주신 볼드님께도 무한한 감사를 드립니다.

UX/UI･피그마･figma･design･productdesign･프로덕트디자인･uiux･uxui･디자인시스템

1

[인프런 워밍업 스터디 클럽 1기] 디자인 2주차 발자국

두번째 발자국시간이 너무나도 부족했던 2주차였다. 퇴근 후에 남는 시간을 모두 강의와 미션에 할애했는데도 불구하고 시간이 많이 소요되는 2주차였다. 아직 미션을 완주하지 못 했지만 이번주를 되돌아보는 발자국을 작성해야겠다. Day8 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기 드디어 모든 컴포넌트의 기초인 버튼 컴포넌트를 만들어 볼 수 있게 된 시간이라서 무척 기대했다. 왜냐면 내가 실무에서 만든 버튼 스타일과 볼드님의 버튼 만드는 순서나 과정이 어떻게 다른지 궁금했기 때문이다. 버튼 컴포넌트에서 내가 만든 것과 볼드님의 스타일 중 다른 것은 바로 아이콘과 레이블의 배치였다. 나는 label onlly, icon+label, label+icon 이런식으로 버튼 타입을 구성했었는데, 볼드님은 LeadingIcon+Label+TrailingIcon으로 구성했다는 점이 달랐다. 이 점이 훨씬 더 경제적이고 아이콘을 불린 프로퍼티로 관리할 수 있어서 편리한 방법이라는 생각이 들었다.그리고 포커스 버튼 상태를 포커스 링 컴포넌트를 만들어서 앱솔루트 포지션으로 만드는 점도 인상깊었다. 나는 이전까지 버튼의 포커스 상태는 직접 스트로크를 outline 상태로 줘서 만들었는데 포커스링을 이용하여 만드는 포커스 상태는 더 눈에 잘 띄고 배리언트 관리가 용이하다고 느껴졌다.그리고 체크박스와 라디오버튼은 단독으로 쓰이기도 하지만 레이블과 함께 결합해서 미리 컴포넌트를 구성해두는 방법을 배우게 되었다. 토글 스위치에는 버튼에 아이콘을 넣을 생각조차 못 했는데 강의를 통해서 ON/OFF 상태에 아이콘을 넣어서 좀 더 명확하게 표현 할 수 있다는 것을 배웠다. 그리고 보너스 미션으로 설문조사 폼을 만들어봤는데, 만들고 나니 컴포넌트를 어떻게 활용해야 겠다는게 감이 잡히게 되었다. Day9 입력 컴포넌트 나머지 만들고 마지막 점검하기 IconPlaceholder라는 지식을 배우게 되었다. 그동안 입력 필드에 들어가는 텍스트만 플레이스홀더라고 생각했었지 아이콘은 플레이스 홀더라는 생각을 못했는데 이번 강의를 들으면서 새롭게 알게되었다. 입력필드도 생각보다 다양한 상태가 있어야 한다는 것을 알게 되었다. 그동안 상태는 버튼만 많다고 생각했는데 입력필드도 총 7가지의 상태(디폴트, 호버, 프레스, 셀렉트, 입력, 에러, 디스에이블)를 만들었더니 내가 실무에서 빼먹은 상태가 무엇인지 알게 되었다.텍스트필드 다음에 만든 텍스트 에리어에서는 현재 카운트와 토탈 카운트를 따로따로 구성한다는 것을 알았다. 그동안은 모두 현재 카운트와 토탈카운트를 하나의 텍스트 입력으로 퉁 쳤는데 이렇게 나눠서 구성하고 레이어 이름을 지으니 개발자와 소통하기 더 편할 것 같다는 생각이 들었다.셀렉트 그룹은 가장 배우고 싶었던 컴포넌트인데 배우고 나니까 바로 실무에 적용해야 겠다는 생각이 들었다. 왜냐하면 현재 실무에서 내가 만든 셀렉트는 어디가 잘 못 된 지 모르겠는데 오토레이아웃으로 하면 틀어지고 프레임으로 해야만 선택한 상태를 볼 수 있는 상태다. 그런데 볼드님의 방식으로 셀렉트를 만들고 인스턴스를 테스트해보니 아이콘도 붙일 수 있고, 체크박스도 붙일 수 있고, 라디오버튼도 붙을 수 있고 심지어는 포커스 상태도 만들 수 있는 아주 이상적인 셀렉트 박스를 만들 수 있었다.그리고 보너스 미션으로 회원가입 폼을 간단하게 만들어봤는데 이 날 배운 모든 컴포넌트를 이리저리 조합하니까 회원가입 폼을 쉽게 만들 수 있어서 매우 편했다. 잘 만든 컴포넌트를 UI를 빠르게 디자인 할 수 있는 아주 좋은 기초 공사라는 생각이 들었다.보너스미션으로 제작한 회원가입 폼 여담나는 1주차 미션을 미션보드에서 진행하지 못 했기 때문에 이전에 만든 스타일 가이드를 모두 퍼블리시해서 2주차 과제부터는 미션보드에서 작업 할 수 있었다. 1주차부터 미션보드를 활용한 사람들과는 조금 다르게 이번주 미션을 했지만 그래도 덕분에 퍼블리시 기능을 이용해 볼 수 있는 좋은 기회가 되었다고 생각한다.아직 미션7과 8을 모두 끝내지 못 했지만 한 주의 마무리를 하기 위하여 미션하며 느꼈던 점을 위주로 발자국을 작성했다. 돌아오는 주에 좀 더 시간을 투자하여 미션을 진행해야겠다.

UX/UI･피그마･figma･인프런워밍업클럽･컴포넌트･디자인

1

[인프런 워밍업 스터디 클럽 1기_디자인] 첫번째 발자국

첫번째 발자국지난 일주일 동안의 나의 행적과 앞으로의 목표 및 소망 4/26 OT8시에 구글 미트에 모여 피그잼으로 ot를 진행하였다.지식 공유자이자 이번 클럽의 멘토이신 볼드님의 소개로 시작된 ot는피그잼으로 다른 러너분들의 지원 동기, 매일 계획, 끝나고 자신에게 줄 선물 등다양한 생각과 다짐을 들었고, 이번 클럽의 전체적인 진행 방식과 보상에 대해 들었다.그 중 나를 가장 자극 했던건 우수 러너들에게 주어지는 보상으로,꼭 열심히 활동해서 우수 러너가 되겠다는 목표가 생기는 순간이였다. 4/29 1일차디자인 토큰과 베리어블, 그리고 디자인 시스템과 베리어블 이름에 대해 배우는 시간이였다.전문적인 지식을 처음 접하는 나에겐 하나같이 다른 나라 언어처럼 들렸다.하지만 시간을 들여 천천히 또 반복적으로 들어보니 하나 둘 씩 이해가 되기 시작했다.매번 새로운 개념을 보며 불을 발견한 원시인처럼 강의에 빠지게 시작하고 앞으로의 강의가 기대가 된다. 4/30 2일차컬러 베리어블을 등록했던 날.강의에서는 3개의 구조, primitive, theme, sematic을 위주로 설명해주었다 색상 베리어블 구조, 이름 짜보기 강의 중 캡쳐위의 사진이 내게 베리어블 구조를 가장 잘 이해하게 해준 사진이다. 처음으로 베리어블을 만들어보면서 느낀건 primitive, theme, sematic 구조를 이해하고 무슨 역할을 하는지만 알아두면기존에 쓰던 style보다 훨씬 편하고 수정도 빠르다는 것을 느꼈다. 미션은 강의를 천천히 다시 봐보며 메모하고 연습도 해보고 수정도 하는 등그 날에만 7번 정도 베리어블을 처음부터 끝가지 만들어보기도 했다. 개인적으로는 이번 일주일 동안 가장 어려웠고 가장 고생한 날인거 같았다.하지만 내가 써본적도 없는 유용한 플러그인도 많이 알아가는 시간이여서 즐거웠고뭔가 전문적인 지식이 쌓인다는 만족감이 좋았다. 아쉬운 점은 theme에서 color scoping 설정을 못했던 게 조금 아쉬웠다.내가 만든 베리어블 sematic 일부분 캡쳐 5/1 3일차타이포그래피, 아이콘, 간격 베리어블 등록 모바일, 데스크탑 등 다양한 상황에 쓰이는 폰트와 크기, 굵기 등을heding과 body로 나눠 간단하게 스타일로 정리해보았다.가장 기억에 남는건 폰트를 한번에 바꿔주는 플러그인이였다그동안 어떻게 한번에 바꿀까 고민이 많았는데 그 고민을 날려주는 플러그인이였다또 새로운 걸 배워서 좋은 경험이였다. 내가 만든 타이포그래피 중 깨지는 desktop heading 캡처항상 아이콘이 필요하면 icon8에서 하나씩 찾아왔는데다양한 아이콘 사이트를 알게 되었고 아이콘을 하나의 면 처리 작업도 해보았다.중간중간에 깨지는 빌런들 때문에 골머리를 앓았던 날이였다.그리고 아이콘이 깨지면 어떻게 해야되는지 질문 드렸는데 너무 친절하게 답변해주셨다!내가 만든 아이콘 중 깨지는 아이콘 일부 캡처 간격 베리어블을 등록하면서 4,8,12로 짝수로 배치해야 되는 이유에 대해 배운 게 가장 큰 거 같다.매번 간격을 아무렇게 배치하던 내게 반성하는 시간이 되었다. 5/2 4일차그림자, 반응형 그리드, 테두리 및 투명도 높낮이를 표현해주는 그림자를 스타일로 만들어보았다.2개의 properties를 주어서 그림자를 표현하고 라이트와 다크일때의 차이도 구분하며 공부했다. 반응형 그리드는 고정형, 반응형 그리고 하이브리드형을 알게 되었다.하이브리드는 보통 왼쪽이 고정, 오른쪽이 반응형으로 만들어진다고 배웠다.각 그리드의 간격 넓이, 마진도 설정해주고 반응형은 어떻게 늘어나는지까지 실습해 보았다. 다른 색이나 값 처럼 투명도나 테두리도 베리어블로 등록해 사용할수 있다는걸 알았다.원래 이런 기능이 없다는거에 놀라기도 했고, 다음에는 어떤 업데이트가 나올지 궁금해지기도 했다. 5/3 5일차스타일 파운데이션 만들기 지금까지 배운 내용을 돌아보며 하나 하나 만들어보니 내가 지금 뭐가 부족한지,또 어떤건 기억이 남는지 등, 지난 날들을 되돌아보며 재밌게 작업했던 기억이 났다. 아침에는 일정이 있어서 저녁 늦게 시작한 까닭에 정리가 조금 지저분 하면서도완벽하게 나온거 같지가 않아 아쉬웠다. 다른 러너분들은 너무 잘 만들어서 비교되기도 했다.. 무사히 1주차를 넘겼구나 하는 안도감도 들었고앞으로 남은 강의도 열심히 들어야겠다는 다짐을 했다. 5/4 특강중간점검때 다시 볼드님과 온라인으로 만나 이번 한 주의 소감과 궁금했던 점을 이야기 하였다.가장 기억에 남는건 저번 아이콘 배울 때 union을 하면 깨지는 현상를 해결하는 앤트맨 방법에 대해 들었다.단순한 방법으로 문제를 해결하는 볼드님의 모습을 보고 프로는 다르구나 라고 생각하게 되었다. 종합전체적으로 아쉬운 점도 많았지만 그래도 하루도 빼먹지 않고 열심히 한 나를 칭찬해주고 싶다.좀 더 열심히 공부해서 실전에서도 쓸 수 있는 실력을 만들고 싶다.

UX/UI･figma･디자인클럽･피그마_베리어블･디자인

1

[인프런 워밍업 스터디 1기 디자인] 피그마 배리어블과 파운데이션

회사에서 프로젝트가 하나 둘씩 늘어가면서 일관성 없는 UI/UX 가 생겨나고 디자인 시스템이 있으면 좋겠다는 생각을 했습니다. 마침 사랑하는 인프런에서 피그마 배리어블을 활용한 디자인 시스템 구축 스터디를 모집하고 있었고 즐거운 마음으로 참여하게 되었습니다. 디자인 시스템이란? A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications.[1] Design systems aid in digital product design and development of products such as mobile applications[2] or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.[3]-출처: https://en.wikipedia.org/wiki/Design_system살펴보면 디자인 시스템을 구축하기 위해서는pattern/components librariesdesign languages/brand languagesstyle guidescoded componentsdocumentation같은 것들이 필요한 것을 알 수 있습니다. 이 강의에서는 무엇을 배우나?인프런 워밍업 스터디 1기에서 학습하는 피그마 배리어블을 활용한 디자인 시스템 구축하기 - 볼드 UX 에서는 피그마로 디자인 시스템을 구축하기 위해 다음과 같은 것들을 배웁니다.피그마 배리어블디자인 파운데이션 만들기 (font, color, spacing, effect, breakpoint, border, elevation, etc)피그마로 컴포넌트 만들기 (엄청 많이 만듬)모드(light, dark)를 설정해서 배리어블 제대로 활용하는 방법[B2B] e-commerce admin page 만들기[B2C] e-learning page 만들기우리도 당장 적용해야 할까?디자인 시스템을 적용한다고 해서 갑자기 생산성이 좋아지고 일관적인 디자인으로 정리되는 것은 아닙니다. 오히려 생산성이 떨어지겠지요. 프로젝트 기간이 부족하거나 규모가 작을 경우에는 디자인 시스템을 적용하지 않는 편이 더 좋을 수도 있습니다. 디자인 시스템을 구축하는 것만으로도 시간과 노력이 많이 들어가기 때문입니다. A Design System isn’t a Project. It’s a Product, Serving Products.- Nathan Curtis 그러나 디자인 시스템이 안정적으로 도입되고 나면 생산성이 훨씬 높아질것이라 기대합니다. 디자이너의 생산성 뿐만 아니라 기획자, 개발자 등 팀 간의 의사소통도 쉬워지니 전체적인 생산성이 높아지겠지요. 디자인 시스템은 누가 만드나요?디자인 시스템은 디자이너 혼자 만드는 작업이 아닙니다. 디자인 시스템이 프로젝트 전체 팀원간의 소통 도구가 되고 제품 인터페이스의 기반이 되려면 디자이너, 개발자, 비즈니스 간의 효과적인 커뮤니케이션이 중요합니다.코드화된 컴포넌트까지 디자인 시스템에 포함하기 위해 개발팀과 긴밀히 소통해야 합니다. 개발팀에서 현재 프로젝트에서 사용하고 있는 UI 관련 라이브러리를 파악하고 이 라이브러리에서 제공하는 디자인 토큰을 디자인팀에서 반영해야 하면 개발과 디자인 단계에서 큰 도움이 될 수 있습니다.예를 들어 팀에서 tailwindCSS를 사용하고 있다면 tailwindCSS의 디자인 토큰을 디자인 시스템에 반영한 후 디자인 시스템을 구축해 나간다면 좀 더 빠르게 진행할 수 있습니다.무엇보다 디자인 토큰의 이름을 공유해서 디자인팀과 개발팀이 처음부터 같은 용어를 사용한다면 디자인 핸드오프 과정이 한결 쉬워질 것입니다. 디자인 토큰과 피그마 배리어블디자인 토큰은 모든 UI 요소의 기본 구성 요소로 진실의 근원의 역할을 하는 작고 반복 가능한 디자인 결정입니다. 다시 말해, 가장 작은 단위의 디자인 결정을 미리 해두는 것입니다. 예를 들면 색상을 미리 골라둔다거나 여러 가지 폰트 속성을 미리 정의해두는 것입니다. font, color, spacing, effect, breakpoint, border, elevation 등등 다른 디자인 요소들도 토큰화할 수 있습니다.피그마 배리어블은 이런 디자인 토큰들을 변수로 관리할 수 있는 기능을 제공합니다.프로그래밍에서 변수를 만들 때 가장 중요한 것은 변수명을 짓는 것입니다. 이 변수가 의미하는 것이 무엇인지 이름을 잘 지어야 다른 개발자에게 존경받습니다. 이렇듯 디자인 토큰을 변수로 관리한다는 것은 디자인 토큰에 이름을 지어준다는 의미도 됩니다. 파운데이션 만들기여러 종류의 디자인 토큰을 정의하고 문서화해서 파운데이션을 만듭니다. 피그마 배리어블을 사용해 컬러 파운데이션을 만드는 과정을 좀 더 살펴보겠습니다. 피그마 배리어블은 컬렉션에 저장할 수 있습니다. 컬렉션은 여러개를 만들 수 있습니다. 이 컬렉션을 레이어처럼 사용해서 primitive, theme, semantic 같은 이름으로 3개의 컬렉션을 만듭니다. primitive 컬렉션에는 이 세상에 존재하는 모든 색상 중 사용하고 싶은 색상만 모아서 담아줍니다. 이 때 이름은 보편적인 이름으로 짓습니다. theme 컬렉션에는 브랜드 컬러에 맞는 색상들을 primitive 컬렉션에서 골라 담습니다. 이 때 이름은 브랜드 컬러의 관점에서 짓습니다. 마지막으로 semantic 컬렉션에서는 실제 컴포넌트 디자인에서 사용할 색상들을 theme 컬렉션에서 골라 담습니다. theme 컬렉션에 없으면 primitive 컬렉션에서 담아도 괜찮습니다. 이 때 이름은 컴포넌트 관점에서 짓습니다. 이렇게 계층 구조로 배리어블 컬렉션을 만들고 primitive 나 theme 컬렉션은 배리어블 사용 시 드러나지 않도록 숨긴 후 semantic 컬렉션의 배리어블을 사용해서 컴포넌트와 페이지를 만듭니다. 피그마 플러그인앞에서 살펴본 디자인 토큰 배리어블 등록 과정에는 단순 반복 작업이 다소 포함되어 있습니다. 그러나 피그마에는 재미있고 편리한 플러그인들이 많아 이 등록과정이나 문서화 과정을 쉽게 할 수 있는 방법도 있으니 이런 방법을 사용하는 것을 강력 추천드립니다. 인프런 워밍업 클럽 1주차 후기지식공유자 볼드님과 인프런이 준비를 너무 잘해주셔서 서로의 학습을 응원하며 재미있게 작업을 진행하는 분위기가 만들어졌습니다. 이런 커뮤니티가 저에게는 학습 뿐만 아니라 일상의 소소한 즐거움을 줍니다. 워밍업 클럽에 참여하신 모두 완주하길 바라며 수료식에서 한 단계 성장한 모습으로 만났으면 좋겠습니다. 화이팅 🔥

UX/UI･figma･desgin_system･design_token･variable

1

0

[인프런 워밍업 클럽 Figma 2기] 프로덕트 디자인 4주차 발자국

인프런 워밍업 클럽 2기 4주차‘3주차에서 못했던 부분 수정하고, 다음 진도까지 끝마무리 확실하게 짓기’를 목표로 함.‘모르는 부분은 찾아가면서 디깅하자!!’라는 마음가짐으로 시작 4주차 학습내용B2C 이러닝 페이지 만들기(컴포넌트 활용, 다크모드 버전, 반응형 모드)모바일 OTT서비스 만들기(컴포넌트 활용, 다크모드 버전, 반응형 모드) 전체 회고이번주는 만들어둔 컴포넌트를 화면에 맞춰 조립하고, 베리어블 모드를 통해 상황에 따라변경할 수 있게 만들어 놓으니 편하기도 하고 재미있었다.혼자 강의를 들으면서 실습했다면 엄청 헤맸을텐데... 미션을 하면서 피드백을 통해 못했던 부분을할 수 있을 때까지 시도하고 수정해보는 과정을 하면서 배우는게 많았다. 스터디하기 전과 후를 비교했을 떼 컴포넌트 사용에 있어서 발전한 부분이 있었고, 베리어블에 대해서어느정도 개념이 잡힌 것 같아서 좋았다. 무엇보다 목표했던 강의 완강을 하게 되어서 만족스럽다.이후 혼자서도 할 수 있도록 복습하면서 완전히 숙지하는게 목표다.

UX/UI･figma･boldUX･디자인시스템･워밍업클럽･프로덕트디자인

0

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 4주차 발자국

드디어 오늘 저녁에 있을 온라인 특강을 제외하고 어찌보면 길고 어찌보면 짧은 워밍업 클럽 프로그램이 마무리되었다! 확실히 온라인 강의만 결제해서 혼자 공부할 때보다는 스터디 프로그램이 함께 진행되다보니 열심히 듣고자 하는 의지도 더 활활 타올랐던 것 같고, 매일 기한에 맞춰서 미션을 진행해야 되기 때문에 미루지 않고(사실 못하고..) 들었던 것 같다 ㅎㅎ퇴사를 하고나서 세웠던 계획 중에 하나인 피그마 공부와 디자인 시스템 공부를 한번에 해결할 수 있어서 뿌듯하면서도 알찬 시간이였고, 이제부터는 지금까지 배운 내용을 계속해서 반복하고 작업해보면서 내 것으로 만드는 시간을 가져봐야 할 것 같다. 이렇게 좋은 강의를 만들어주신 볼드님께도 다시 한번 감사하다는 말씀을 드리고 싶다! [4주차 강의 요약]4주차에도 지난주에 이어서 지금까지 열심히 만들어놨던 파운데이션과 컴포넌트를 이리저리 조합해서 새로운 페이지로 만들어보는 시간을 가졌다. 강의 초반에 볼드님께서 이 부분을 수강생분들이 제일 좋아하셨다는 말을 하셨었는데 실제로 나도 이 부분 강의가 제일 재미있고 흥미로웠다. 잘 다져놓은 기반으로 튼튼한 건물을 짓는 기분이랄까.. B2C E-Learning 페이지 제작모바일 OTT 서비스 페이지 제작 확실히 배리어블 모드를 잘 만들어놓으니까 디바이스별 반응형 디자인, 다크모드 전환을 이렇게 쉽게 할 수 있는 것에 다시 한번 박수를 보낸다..👍 그리고 실제 데이터를 'Google Sheet Sync' 플러그인으로 바로 적용할 수 있는 것도 앞으로 디자인할 때 편하게 사용할 수 있는 기능인 것 같다. [이번주 회고]스스로 칭찬하고 싶은 점프로그램이 끝날 때까지 강의랑 미션을 기한에 맞춰서 다 완수했다!기존에 XD로 작업했던 작업물을 다시 피그마로 제작해보면서 배웠던 내용을 적용하고 있다퇴사를 하고 '나는 어떤 디자이너가 되고 싶은가'라는 의문과 함께 내가 부족한 부분 중 어떤 점을 먼저 채워야 할지 고민만 하다가 시간이 흘렀는데 프로그램을 열심히 참여하면서 다시 한번 디자인에 대한 열정을 가질 수 있었고 더 많이 공부하고 싶다는 생각이 들었다. 아쉬웠던 점, 보완하고 싶은 점조금 더 피그마, 디자인 시스템에 익숙해져서 작업 시간을 줄이고 싶고 앞으로 실무에서 활용할 수 있는 효과적인 디자인 방법을 고안해보고 싶다.내 디자인을 보다 효과적으로 전달하기 위해 프로토타이핑 관련 공부도 더 해보고싶다.

UX/UI･UX/UI･프로덕트디자인･디자인시스템･피그마･figma･토큰디자인･볼드UX

0

[인프런 워밍업 클럽 Figma 2기] 프로덕트 디자인 3주차 발자국

인프런 워밍업 클럽 2기 3주차'2주차때 못했던 부분을 수정하고, 다음 진도를 꾸준히 따라가기'를 목표로 함.'주어진 과제를 완벽하게 끝내보자!!'는 마음가짐으로 시작 3주차 학습 내용내비게이션 컴포넌트 만들기 : Link, Bredcrumbs, Tab, Bottom Nav, Pagination, Side Nav, Header, Carousel베리어블 모드 활용(다크모드, 브랜드 컬러 지정 모드, 다중언어 지원화면)컴포넌트 활용하여 이커머스 어드민 페이지 만들기 잘한점그때 그때 미루지 않고 강의를 들으면서 과제 제출을 했다는 것막히는 부분은 할 수 있을때까지 시도해봤다는 점. 아쉬운점반응형 과제를 해보면서 예상한 방식으로 크기 조정이 되지 않는 부분이 존재했고, 상위 컴포넌트 auto layout의 설정을 확인하는 과정을 반복하게 되었다. 이를 통해 auto layout의 fill, hug 부분에 대하여 정확히 숙지하지 못했다는 생각이 들었다...ㅜ 전체회고 및 다음주 목표한동안 컴포넌트를 배우고 만들다가, 만든 컴포넌트를 활용해서 반응형 페이지를 만들게 되어서 재미있었다. 그리고 베리어블 모드를 통해 상황에 따라 바꿀수 있다는 점이 신기하고 편해서잘 활용해 볼 수 있도록 해봐야겠다는 생각이 들었다. 또한, 다음주가 마지막인데 꾸준히 따라온 만큼 마무리를 확실하게 하고싶다.

UX/UI･figma･디자인시스템･boldUX･워밍업클럽･프로덕트디자인

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 3주차

3주차 발자국 기록 정신 차려보니 어느덧 워밍업 클럽도 절반 이상 넘어가고 한 주 정도 남았네요! 출퇴근 전•후로 열심히 하면 수료식 전까지 커리큘럼 마칠 수 있겠죠..? ㅋㅋㅋ - 이번 주 기록 ☑ Input 컴포넌트와 Display 컴포넌트 제작 버튼, 라벨, 텍스트 박스 등 기본적인 컴포넌트를 쭉 만들었다.볼드님 알려주신 대로.. 그대로 잘 따라 한 것 같은데가끔씩 인스턴스 조작해 보면 나는 왜 안 되는지는 의문이다..ㅎㅎ그래도 1기 때와 다르게 이제는 멀티 에딧을 잘 쓸 수 있어서중간에 많은 요소를 한 번에 수정할 때 시간이 많이 줄고 편해진 것 같다. - 회고 이번 주 평일에는 바빠서 커리큘럼 계획대로 전체는 못하더라도 매일 조금씩 한 개의 컴포넌트라도 꾸준히 만들어보려고 했습니다.그래도 아직 많이 남아서 워밍업 클럽을 위해 다음 주 주말 전체를 반납해야 할 것 같은데요..ㅎㅎ마지막까지 힘내서 완주해 보겠습니다!

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 스터디 2기 디자인] 2주차 발자국

2주차에는 1주차에서 배운 배리어블 및 스타일을 이용하여 다양한 컴포넌트를 제작하는 방법에 대해 배웠다.예전에는 피그마에 대한 지식 없이 막연하게 피그마를 사용했다면, 이번 과정을 통해 컴포넌트를 만들고 재사용하는 방법 그리고 다양한 프로퍼티를 추가하여 컴포넌트를 플랙서블하게 변경하는 방법에 대해 배웠다.input 컴포넌트 종류buttoncheckboxradioswitch(toggle)label & control grouptext fieldtext areaselect & dropdown menu display 컴포넌트 종류avataraccordionbadgetooltipsdividerchipsbasic cardstable 2주차 느낀점1주차를 마치고 매일매일 꾸준하게 강의를 듣고 미션을 완료해야겠다고 다짐했지만 그러지 못하고 주말에 몰아서 듣느라 너무 힘들었다..3주차에는 매일 강의를 듣고 꾸준하게 연습해야겠다

UX/UI･figma

0

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 2주차 발자국

벌써 스터디 2주차가 끝나다니 시간이 정말 빠른 것 같다. 2주차가 되니 피그마 사용하는 것도 그렇고 강의 듣고 실습하는 것도 적응해가면서 시간이 조금은 덜 걸릴 줄 알았는데 여전히 미션을 진행하는데 꽤 오랜 시간이 걸렸다 ㅠㅠ이번주는 지난주의 입력 컴포넌트에 이어서 계속해서 여러 종류의 컴포넌트를 만들어 가는 과정이였는데 오랜만에 디자인 작업을 하는 것 자체가 너무 재미있었던 것 같다. 특히 예전에 회사를 다니면서 UI디자인 작업을 했을 때, 이런 식으로 컴포넌트에 배리어블을 활용해서 디자인 했으면 얼마나 더 효율적이였을까 하는 생각이 계속해서 들었던 것 같다. [2주차 강의 내용 요약]1) 컴포넌트에 대한 기본 개념 다시 한번 정리컴포넌트 = 붕어빵 틀, 인스턴스 = 붕어빵 재료 (재료에 따라 다양한 붕어빵을 만들 수 있다)컴포넌트 만드는 순서싱글 컴포넌트 만들기 - 인스턴스(복제본)으로 테스트 - 베리언트 프로퍼티 - 테스트Property 먼저 적용 : 불린 프로퍼티, 텍스트 프로퍼티, 인스턴스 스왑 배리언트 프로퍼티는 보통 state별 -> Type(Style)별 -> Size별 2) 여러 컴포넌트 만들기입력 컴포넌트 나머지 만들기Label & Control Group, Text Field, Text Area, Select & Dropdown Menu 디스플레이 컴포넌트 만들기Avata, Accordion, Badge, Tooltips, Divider, Chips, Basic card, Table피드백 컴포넌트 만들기Alert, Toast, Skeleton Loader & Loading Spinner, Progress bar, Modal & Slot이번주에 다양한 컴포넌트 실습을 진행하면서 가장 크게 느낀 것은 이전 단계에 진행했었던 배리어블과 파운데이션이 잘 정리되어야 컴포넌트를 만들때도 문제없이 만들 수 있다는 것을 느꼈고, 새로운 컴포넌트를 제작할 때도 모든 부분을 하나하나 새로 만들기보다 만들어뒀던 기존의 컴포넌트를 또 활용해서 제작하는 것을 보고 이런 부분에서 디자인 시스템이 잘 만들어진다면 디자인 작업하는데 있어서 훨씬 많은 시간을 줄일 수 있고 효율적으로 일할 수 있을 것 같다는 생각이 들었다.특히 슬롯 컴포넌트를 활용해서 모달을 만드는 파트는 기존에 생각해보지 못한 방식으로 컴포넌트를 만들면서 놀라우면서도 실제로 활용하기 좋은 방법이라고 생각했다. 3) 온라인 특강 : chatGPT를 활용한 디자인 시스템 문서화이번주 주말에는 특강으로 디자인시스템 문서화에 대한 부분을 설명해주셨다. 디자인 시스템을 문서화해야 하는 이유부터 디자인 시스템 문서에 들어가야 하는 요소들(그 중에서도 꼭 필요하다고 생각하는 요소), gpt를 활용한 디자인 시스템 구축 방법을 배웠는데 내가 생각했던 부분보다 구체적인 내용으로 정리를 해줘서 아예 디자인 시스템 문서에 대한 개념이 부족할 때 길잡이로 많이 참고할 수 있을 것 같았다. 요즘에는 디자인 프로세스에 다양한 AI기술을 적용하는 방법들이 많던데 해당 부분에 대해서도 많은 공부가 필요해보인다! [이번주에 대한 회고]스스로 칭찬하고 싶은 점이번주에도 밀리지 않고 2주차 강의와 실습을 잘 끝냈다.아직은 강의를 듣고 실습 따라하기에 급하긴 했지만 지난주보다는 컴포넌트 제작 프로세스를 잘 따라가면서 만들었던 것 같다. 강의를 들으면서 최근에는 잘 사용하던 어플 화면을 볼 때도 '이 부분은 컴포넌트를 이렇게 나눠서 제작하지 않았을까?' '이 서비스의 디자인 시스템은 어떻게 작업되어 있지?'하고 화면을 분석하면서 보게 되는 게 예전보다 디자인 시스템에 대한 넓은 시야를 가질 수 있는 계기가 되는 것 같아 조금은 뿌듯했다. 아쉬웠던 점, 보완하고 싶은 점이번주에 알려주신 디자인 시스템 플러그인을 사용해서 기존에 만들었던 컴포넌트들도 문서화 해봐야겠다.실습 미션 중에 수정 보완 사항이 생겼었는데 다음주는 보다 꼼꼼하게 잘 따라서 미션을 진행해봐야겠다.현재 이직준비랑 피그마 스터디를 같이 진행하고 있어서 포트폴리오 준비랑 디자인 시스템 공부에 대한 시간을 효율적으로 잘 계획해서 진행해야 할 것 같다.

UX/UI･UXUI･프로덕트디자인･피그마･figma･이직준비

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 2주차

2주차 발자국 기록 워밍업 클럽을 두번째한다고 첫번째 보다 쉬울꺼라고 생각했던 스스로를 반성합니다..ㅎ회사 프로젝트 때문에 바빠져서 오히려 더 쉽지 않네요..이번주는 피그마 작업은 많이 못해서 토요일 진행했던 라이브를 복습&회고해 보겠습니다. - 이번 주 기록 ☑ 챗gpt를 활용해서 디자인시스템 문서화하는 법개인적으로는 ant design system이 잘 만들어졌다 평소에 생각하는데라이브 투표 결과, 많은 분들이 꼽은 좋은 디자인시스템은 KRDS와 G마켓이었다.두 개의 특징은 컴포넌트가 잘 만들어져있기도 하지만 문서화 역시 잘 되어있다는 것. - 문서화를 할 때 주로 정리하는 요소들 : Spec, States, Usage, Anatomy, Behaviour, Best Practice, Accessibility, Responsive Design, Research and Testing, Props 프롬프트를 사용하면 빠르고 편하게 문서화를 할 수 있는데- 프롬프트를 입력할 때 신경 쓸 것 : CIGO.- 마지막으로 진짜로 내용이 맞는지 점검해 보고 자연스럽게 만드는 작업이 꼭 필요. - 회고 1기 때와 비교했을 때 잘 만들었다고 생각하는 디자인시스템이 매우 뚜렸하게 나와 신기했습니다.작업은 이번 주 못한 부분까지 다음주는 2배로 열심히 하겠습니다…!

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 2주차 발자국

인프런 워밍업클럽 2기 2주차 2주차때 배운 것피그마 베리어블과 디자인 토큰 개념미션 #3) 입력 컴포넌트 만들어보기 1, 2 1/2 부분까지 진행-> 텍스트 상자부터 계속 고전하고 있어 텍스트 필드까지만 진행완료 ✅ 잘한 점- 강의 내용을 꼼꼼히 본 것디자인 시스템을 하나하나 만드는 과정을 놓치지 않기 위해 중간에 정지하면서 따라갔다.- 지난 번 피드백을 반영해 작업 수정한 것피그마 코멘트를 통한 피드백 내용을 수정해보고 복습의 기회로 삼았다. 아쉬웠던 점- 작업 중 발생되는 오류를 해결하지 못한 것앞에서 작성한대로 textarea 부분을 진행할 때 아이콘과 텍스트박스 부분을 frame안에 넣고 autolayout 처리도 했으며 아이콘 constraint과 absolute postion까지 시도했지만 박스를 늘리면 따로 분리된다...ㅠㅠ- 미션 제출을 하지 못한 것일요일까지 힘들더라도 과제 제출을 하려고 했는데 이번 주는 물건너갔다ㅠㅠ보완할 점- 미션 수행을 조금씩, 천천히 진행하기이번 주는 개인적으로 해결해야 할 일이 있어서 조금씩 진행하긴 했지만 중간에 따라하다가 막히는 부분을 작업하는 시간까지 포함하면 상당한 시간이 소요되었다. 좀 더 작은 단위로 나누어서 진행해야 겠다.

UX/UI･디자인시스템･figma･프로덕트디자인

0

[인프런 워밍업 클럽 Figma 2기] 프로덕트 디자인 2주차 발자국

인프런 워밍업 클럽 2기 2주차커리큘럼을 따라서 꾸준하게 강의 수강하기를 목표로 함.‘강의를 마냥 따라가는게 아니라 이해하면서 미션 수행해보자’라는 마음가짐을 가지고 시작 2주차 학습 내용입력 컴포넌트 만들기(Label&control group, text field&text area, select&dropdown)디스플레이 컴포넌트 만들기(avatar, accordion, badge, tooltips, divider, chips, basic cards, table)피드백 컴포넌트 만들기(alert, toast, skeleton loader, progress bar, slot&modal) 잘한점헷갈리거나 안되는 부분이 생겨도 포기하기 않고 될때까지 시도함 모르는 부분은 질문해서 선생님 피드백에 따라 수정해보면서 강의를 따라감. 이번주 커리큘럼에 따라 미션 제출까지 완료함. 아쉬운 점컴포넌트의 instance를 조립 과정에서 일부 오토레아웃의 Fill, Hug, Fix의 설정이 잘못되어 있어서 수정함.Absolute poison된 프레임의 Constraint부분에서 헷갈리는 등 부분 부분에서 예상대로 되지 않는 점에서 아쉬움을 느낌. 전체 회고 및 다음주 목표컴포넌트의 반복학습을 하다 보니 어느 정도 익숙해졌다고 생각했는데, 막상 하다보니 생각보다 시간이 오래걸렸다....잘못된 부분이 눈에 보이니 답답하기도 하고, 한편으론 온전히 내것으로 만들고 싶다는 욕심이 생겼다.다음 주는 '이번 주에 못했던 부분은 완전히 숙지하고 다음 진도 따라가기'를 목표로 !!!

UX/UI･figma･디자인시스템･boldUX･워밍업클럽･프로덕트디자인

0

[인프런 워밍업 클럽 Figma 2기] 프로덕트 디자인 1주차 발자국

인프런 워밍업 클럽 2기 1주차컨포넌트 사용에 있어서 미숙한 부분이 있어 러너로 참가하게 됨.스터디 커리큘럼에 따라 들으면서 최대한 페이스 조절하여 하루에 주어진 테스크 완수를 목표로 함. 처음은 열정적으로!! 열심히 하겠다는 마음가짐을 가지고 시작 1주차 학습 내용디자인 토큰과 베리어블의 개념배리어블 등록 : 색상, 간격, 타이포그래피, 그림자, 투명도, 그리드아이콘 컴포넌트화 : union, flatten selection, multiple component입력 컴포넌트 만들어보기 : 버튼, 체크박스, 라디오 버튼, 스위치 버튼잘한 점강의를 들으면서 미션수행하는 과정이 느린 진행 속도에도 불구하고 성실하게 강의를 따라감.대부분의 과제를 제시간에 충실히 따라 완료함.아쉬운 점아이콘 컴포넌트 과정에서 union, flatten selection 둘다 적용해야하는데 일부분만 적용해서다시 수정함.강의를 들으면서 그대로 따라서 미션을 수행하다 보니 주어진 테스크는 완료했지만, 개인적으로 완벽하게 숙지했는가에 대한 의문이 들어 복습의 필요성을 느낌. 다음주 목표커리큘럼을 따라서 꾸준하게 강의 수강하기강의를 마냥 따라가면서 미션 수행하는 것이 아니라 이해하면서 하기+복습하기

UX/UI･figma･디자인시스템･boldUX･워밍업클럽･프로덕트디자인

0

[인프런 워밍업 클럽 스터디 2기] 프로덕트 디자인 1주차 발자국

회사를 다니면서도 기본적인 내용만 대충 알고 '퇴근하면 피그마 공부해야지..' 했었는데 퇴사하고나서야 시간이 생겨 이렇게 피그마 공부를 제대로 시작하게 됐다. 혼자 공부하다보면 다른 일때문에 강의를 듣는 게 우선순위에서 밀리는 경우가 종종 있었는데 인프런 워밍업 클럽과 함께 정해진 시간표에 따라 미션을 수행하다보니 강제적인 요소가 있어서 아직 1주차지만 더 열심히 강의를 들으려고 했던 것 같다.그리고 재직중에도 스타일 가이드는 여러번 작성해봤던 적이 있었지만 실제로 디자인 시스템까지 구축해본 경험은 없어서 실무에서는 디자인 시스템을 어떻게 개발하고 어떻게 활용하는지 제대로 알고 싶어서 볼드님의 강의를 듣게 되었는데 기초적인 개념부터 꼼꼼하게 알려주셔서 이번 기회에 피그마 배리어블에 대해 깊게 이해하고 역량을 키워 프로덕트 디자이너로서 원하는 회사로 이직까지 할 수 있었으면 좋겠다. 1주차 강의 내용 요약디자인 토큰과 배리어블, 디자인 시스템에 대한 기본적인 개념 및 구조 알아보기배리어블은 디자인 토큰을 만들기 위한 요소이고, 디자인 토큰은 디자인 시스템의 기본 구성 요소일관성 있는 경험을 제공하기 위해 제작,관리하기도 훨씬 용이한 특징이 있음 디자인시스템 : 재사용 가능한 컴포넌트, 패턴, 가이드디자인시스템은 '큰 목표를 가지되, 작은 성공을 이뤄나가면서 공감대를 형성하며 만들어가야한다'색상, 간격, 타이포그래피, 아이콘, 그림자 효과 등 배리어블 및 스타일로 등록하기배리어블은 오직 하나의 변수만 저장(참조 가능), 스타일은 하나 또는 다수의 변수 저장배리어블은 Raw value - Primitive - Theme - Semantic - Component로 계층을 가지고 있음입력(Input) 컴포넌트 만들기 : 버튼, 체크박스, 라디오버튼, 스위치 버튼컴포넌트와 인스턴스, 프로퍼티에 대한 기본 개념 공부 스스로 칭찬하고 싶은 점스터디 진행 일정에 맞춰서 한주동안 온라인 강의를 열심히 듣고 미션을 수행했다.피그마 공부에 대해 하루 루틴을 만들 수 있었던 좋은 기회가 된 것 같다.모르는 개념을 이해하기 위해 여러번 강의를 들어보면서 조금은 감을 잡으려고 노력했던 것 같다.아쉬웠던 점, 보완하고 싶은 점(다음주 목표)조금 더 일찍 공부를 제대로 시작했으면 어땠을까 하는 아쉬움이 크게 남았지만 1달동안 열심히 해서 꼭 피그마 배리어블을 마스터 할 수 있었으면 좋겠다.이번주는 휴일이 중간에 있었어서 매일 매일 같은 시간대에 공부를 하지는 못했다. 다음주부터는 오전 시간을 활용해서 강의를 듣도록 노력해야겠다.피그마를 제대로 배우는 게 처음이다보니 아직 어려운 부분이 많아서 강의 내용에 따라가기 급급했는데 다음주부터는 왜 이렇게 만드는지에 대해 조금 더 고민해보는 시간을 가져봐야겠다.

UX/UI･UXUI･피그마･피그마배리어블･프로덕트디자인･figma･볼드UX

0

[인프런 워밍업 클럽 2기] 프로덕트 디자인 1주차

1주차 발자국 기록 지난 인프런 워밍업 클럽에 이어서 2번째로 참여하게 되었습니다.1기 때 양이 너무 많아서 힘들긴 했지만.. 그래도 워밍업 클럽 덕분에 완강과 실습을 모두 해낼 수 있었다고 생각합니다. 이번에는 복습 겸 BX를 담아 체계적으로 만들어보려고 합니다. 더 나아가서 개발자분들과도 협업하여 디자인 시스템을 만들 수 있으면 그 부분까지 확장시켜볼 계획입니다. - 이번 주 기록 ☑ 디자인 토큰이란?- 디자인 토큰은 전자에 해당- 디자인 시스템의 기본 구성 요소- 작고 반복 가능할 수 있는 디자인 결정들을 기본 디자인 에셋으로 저장해서 활용- 토큰은 디자인 시스템 관리와 수정에 용이하고 일관성 및 멀티 브랜드 관리에 도움 ☑ 디자인 시스템이란?재사용 가능한 컴포넌트, 패턴 그리고 가이드 🪄 추천 플러그인 : Styles to variable- 스타일을 배리어블로 만들어줌- collection 이름을 정할 수 있음https://www.figma.com/community/plugin/1253669344925342575 🪄 홈페이지 : batch styler- 스타일 일괄 수정할 수 있음https://www.figma.com/community/plugin/739825414752646970 - 회고 이번 주는 회사에 적응하느라 하루 이틀씩 밀렸습니다.주말까지 채워서 작업을 진행했는데 다음 주는 매일 조금씩 해 보도록 하겠습니다.

UX/UI･uxui･figma･피그마･프로덕트디자인･볼드･배리어블

0

[인프런 워밍업 스터디 1기 디자인] 4주차 - 모드를 활용해서 실전 페이지 만들기

길었던 4주가 지나고 인프런 워밍업 클럽 스터디 1기 수료의 시간이 다가왔습니다. 지난 한 주 동안 배운 것을 돌아보고 워밍업 클럽을 회고해봅니다. 지금까지 디자인 토큰들을 피그마 베리어블에 등록하고 베리어블을 사용해서 기본 컴포넌트부터 복합 컴포넌트까지 페이지를 만들기 위한 재료를 준비했습니다. 이제 본격적으로 요리를 시작해봅시다. 베리어블 모드베리어블 모드를 사용하면 모드에 따라 베리어블의 값을 변경할 수 있습니다. 예를 들어 어떤 페이지를 있습니다. 이 페이지는 미리 등록한 베리어블을 사용해서 만들었기 때문에 베리어블의 값을 수정하면 수정한 베리어블을 사용한 모든 부분이 수정됩니다. 그럼 베리어블을 라이트 모드일 때, 다크 모드일 때 값을 미리 정의해두고 어떤 페이지가 라이트 모드인지 다크 모드인지 알려주면 모든 값이 모드에 따라 값이 변하겠죠? 모드 적용하기위의 로그인 페이지는 어떻게 만들었을까요? Light 모드를 만든 다음에 복사해서 프레임의 Layer 창에서 모드를 Dark로 설정했습니다. (Light/Dark 모드 외에도 Mobile, TV 같은 다른 모드가 적용된것도 볼 수 있습니다.) 다크 모드전체 페이지에서 모드를 설정하는 것만으로 모든 컬러가 모드에 맞게 변경되는 것은 베리어블을 모드에 따라 미리 정의해두었기 때문입니다.Light, Dark 외 다른 theme 을 추가하고 싶다면 + 버튼을 눌러 추가할 수 있습니다. 반응형 모드위 예시에서 Dark 뿐만 아니라 Mobile, TV 모드도 적용된 것을 보셨습니다. 모드는 한 번에 여러 모드를 적용할 수도 있습니다. 이를 활용하면 여러 기기에 따른 반응형 디자인, 멀티 브랜드도 구현할 수 있습니다. 이것은 다양한 기기에 따라 최소/최대 크기와 헤더의 컴포넌트 구성을 다르게 할 수 있도록 모드로 구성한 베리어블입니다.어떤 페이지의 max-width 값과 min-width 값을 등록한 베리어블로 설정하고 모드만 변경하면 세부적인 값을 신경쓸 필요가 없습니다. 멀티 브랜드멀티 브랜드도 모드를 활용해 구현해볼 수 있습니다..theme 컬렉션에는 브랜드에 따라 4가지 모드를 만들었습니다. color/brand 베리어블은 모드가 변경되면 다른 브랜드 컬러를 갖게 됩니다..theme 컬렉션은 숨겨져 있어서 컴포넌트를 만들거나 페이지를 만들때 드러나지 않습니다.실제로 컴포넌트를 만들때는 semantic 이라는 컬렉션을 사용하는데 여기 bg/brand 베리어블은 라이트 모드일 때 color/brand/600 베리어블을 사용하도록 했습니다.지금은 bg/brand 의 값이 blue 계열이지만 어떤 페이지의 모드가 TV 가 된다면 teal 계열로 바뀝니다. 이것이 semantic 에는 멀티 브랜드 모드가 없어도 멀티 브랜드가 적용되는 원리입니다. 회고디자인 토큰, 컴포넌트, 모드 같은 개념들을 잘 사용할 수 없다면 복잡한 애플리케이션의 화면을 구성하는 것은 정말 힘든일입니다. 잘 정리된 방법론과 피그마라는 최신 툴을 사용해서 디자인 시스템을 갖추고 나면 좋은 서비스에 좀 더 집중할 수 있습니다. 4주간의 인프런 워밍업 클럽 스터디를 통해 피그마의 전반적인 사용방법과 디자인 시스템을 만들고 화면을 만드는 방법을 배울 수 있었습니다. 앞으로의 사이드 프로젝트가 기대됩니다. 스스로 완주를 축하하며 다른 러너분들에게도 축하의 말씀을 전합니다.우리 모두 스스로를 진심껏 축하하고 사랑해줍시다.행복하세요! 😃

UX/UI･figma･design_token･design_system･UX/UI

0

[인프런 워밍업 클럽 스터디 1기 디자인] 4주차 발자국

4주 차 - 학습했던 내용 요약피드백 컴포넌트와 네비게이션인 토스트, 스켈레통, 프로그레스바, 모달, 네비게이션, 페이지네이션, 헤더, 캐러셀 등의 컴포넌트를 만들었습니다.베리어블을 통해 다크 모드, 멀티 브랜드, 다언어 케이스에 적용할 수 있도록 설정하고 실습했습니다.Shop, Learn, OTT의 예시 페이지를 만들었습니다.라이브에서는 여러 브랜드의 디자인 시스템을 둘러보고 도큐먼트 요소들을 분석해 보고 chatGPT를 이용하여 디자인 시스템을 만들어보는 시간을 가졌습니다. 4주 차 - 회고4주간의 스터디를 통해 두 번째 완강을 빠른 시간에 할 수 있었습니다.개인 일정으로 1주 차에 학습을 많이 하지 못했습니다. 그래서 남은 3주 동안 미션을 한다고 마지막 날까지 부랴부랴 했는데 정말 시간이 정신없이 빠르게 지나간 것 같습니다.또 최근 AI를 활용한 프로덕트 디자인에 관한 콘텐츠가 많이 보였는데 디자인 시스템 설계에 chatGPT를 활용하여 실습을 해보니 색다른 경험이었습니다. 인프런 워밍업 클럽 스터디 - 후기볼드님께서 QnA도 열심히 해주시고 라이브 강의도 정말 하나라도 더 알려주시려고 꼼꼼히 준비하셔서 배우는 입장에서 너무 감사하고 자극도 많이 되었습니다!함께 스터디하는 수강생들도 열심히 해주어 저도 더 열심히 참여한 것 같아요 :)처음 볼드님 강의를 들었을 때는 처음 듣는 부분이 많아 50~60% 정도 이해가 되었는데, 이번 스터디를 통해 더 깊게 익히는 계기가 되었습니다.강의에서 볼드님도 수정에 대하여 여러 번 말씀하셨지만, 정말 디자인 시스템은 어떻게 더 효율적인 시스템이 될지 끝없이 고민하고 수정해 나가는 과정인 것 같습니다.스터디는 끝났지만 배웠던 것을 바탕으로 실무에서 베리어블 모드를 잘 사용하는 디자이너가 될 수 있도록 노력해 보겠습니다!

UX/UI･인프런워밍업클럽스터디･figma･uiux

0

[인프런 워밍업 클럽 스터디 1기 디자인] 3주차 발자국

3주 차 - 학습했던 내용 요약인풋 컴포넌트인 버튼, 체크박스, 라디오, 스위치, 라벨, 컨트롤 그룹, 텍스트 필드, 텍스트 상자, 셀렉트를 만들었습니다.디스플레이 컴포넌트인 아바타, 아코디언, 뱃지, 툴팁, 디바이더, 칩, 스테이터스 칩, 카드 폼, 테이블 요소들을 만들었습니다.제작한 컴포넌트의 대비를 체크하여 접근성에 부합하는지 체크해 주었습니다.라이브로 타이포그래피 베리어블에 대하여 공부했습니다. 3주 차 - 회고만들어진 컴포넌트를 볼 때는 금방 만들 수 있을 것 같았는데 실제로 하나씩 따라 만들어보니 시간이 생각보다 많이 걸립니다. 이번 주에 내비게이션 컴포넌트까지 만드는 게 목표였는데 디스플레이까지밖에 하지 못했습니다.테이블은 각 잡고 만들면 상당히 복잡해질 것 같네요.특히 만들어진 컴포넌트를 활용하여 또 다른 컴포넌트를 만들 때는 고려해야 할 점들도 많아지는데, 어떻게 더 효율적으로 프로퍼티를 구성하면 될지 고민을 거듭하면서 더 좋은 컴포넌트를 디자인할 수 있게 되는 것 같습니다.타이포그래피 베리어블도 많이 복잡하다고 느껴졌는데 볼드님 라이브를 듣고 쉽게 이해할 수 있었습니다. type face, font, font family도 잘 구분할 수 있게 되었습니다 :)타이포그래피 베리어블은 복잡하지만 잘 적용해 본다면 반응형 작업 시 타이포까지 대응할 수 있어 엄청 좋을 것 같습니다! 4주 차 - 다짐 및 계획다음 주에는 나머지 컴포넌트들을 만들고 예시 페이지들까지 완성하여 커리큘럼을 완주해 보도록 하겠습니다!!

UX/UI･인프런워밍업클럽스터디･figma･uiux

0

[인프런 워밍업 스터디 1기 디자인] 2주차 입력 컴포넌트, 디스플레이 컴포넌트

드디어 Figma의 꽃이라고 할 수 있는 컴포넌트 만들기를 시작했습니다. 익숙해지면 너무 쉽고 당연한 것들이지만 처음에 익숙해지기까지 정말 헷갈리고 복잡합니다. 그러나 컴포넌트를 하나 둘 따라 만들다 보니 점점 속도도 빨라지고 재미있었습니다. 컴포넌트 만드는 요령1. 현재 알고 있는 모든 프로퍼티를 가진 가장 복잡한 형태의 컴포넌트를 만든다.어떤 컴포넌트들은 아주 복잡해서 프로퍼티가 아주 많을 수 있습니다. 프로퍼티들을 모두 활성화 했을때의 가장 복잡한 형태의 컴포넌트를 만들어봅니다. 2. 모든 프로퍼티를 등록해준다. 3. 인스턴스를 만들어서 테스트하면서 기본 컴포넌트를 수정한다.다양한 Variants 를 만들기 전에 꼭 인스턴스를 만들어서 기본 컴포넌트를 테스트해보는것이 좋습니다. 여러 프로퍼티들을 껐다 켜보고 크기도 늘렸다 줄여보고 할 수 있는건 다 해봅니다. 테스트해보면 꼭 생각하지 못한 오류가 발견되는데 개발할 때랑 비슷해서 재밌었습니다. 컴포넌트가 작을 때 수정해야 여러 컴포넌트를 조합해서 복잡한 컴포넌트를 만들 때 고생하지 않습니다. (단위 테스트의 중요성!) 새롭게 알게된 것디자인 패널에 Absolute positioning 버튼을 누르면 position: absolute 로 만들 수 있습니다!Constraints 에서 Left and right 를 해주면 부모요소가 늘어남에 따라 자식요소도 함께 늘어납니다!Constraints 에서 Bottom 을 해주면 하단에 요소를 고정시킬 수 있습니다. 부모가 Auto Layout 이면 자식요소의 Contraints 적용이 불가능합니다.부모 요소의 width 를 Fixed 로 하고 자식 요소의 width 를 Fill 로 설정하면 부모 요소의 크기가 변할 때 마다 자식 요소가 늘어납니다.

UX/UI･figma･design_system･component

0

[인프런 워밍업 클럽 스터디 1기 디자인] 2주차 발자국

2주 차 - 학습했던 내용 요약 디자인 시스템과 피그마 배리어블, 디자인 토큰 등에 관한 이론을 공부했습니다.배리어블 계층과 이름을 어떻게 정하는지에 대하여 익혔습니다.color, spacing, radius 등 foundation 스타일과 배리어블 등록을 했습니다. ✔ 디자인 시스템이란재사용 가능한 컴포넌트, 패턴 그리고 가이드 ✔ 디자인 시스템의 6가지 구성1. 디자인 원칙 : 디자인 시스템이 왜 필요한가 (비전, 미션, 가치 설정)2. 스타일 가이드 : 브랜드를 나타내는 스타일 가이드EX) 로고, 칼라, 레이아웃/그리드, 간격, 아이콘, 모션, 일러스트레이션, 사진, 디자인 토큰, 타이포그래피, 톤 오브 보이스3. 컴포넌트 라이브러리 : 재사용이 가능한 UI 기본 요소 (코드 포함)EX) 버튼, 인풋 필드, 체크 박스, 라디오 등4. 패턴 라이브러리 : 자주 반복 사용되는 디자인 템플릿EX) 로그인 폼, 탐색 메뉴, 컨텐츠 카드 배치5. 문서화 : 가이드라인, 컴포넌트, 패턴, 스타일 가이드 등을 문서화 한 자료6. 시스템 관리/운영 : 디자인 시스템을 효과적으로 관리하고 유지하기 위한 프로세스와 규칙EX) 업데이트, 학습 자료, 등 (=가버넌스) ✔ 디자인 시스템이 있으면 좋은 점디자인 일관성 유지, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지 보수 용이, 높은 품질의 경험 ✔ 배리어블 계층Component (=component)Alias (=semantic)Global (=primitive)Raw value 2주 차 - 회고이론을 복습하고 Foundation 만드는데 시간이 많이 걸려 컴포넌트를 아직 만들어보지 못했어요 😭조금 더 부지런히 작업을 해보겠습니다..! 3주 차 - 다짐 및 계획파운데이션 설정과 문서화를 빨리 끝내고 다음주에는 컴포넌트들을 모두 만들겠습니다.

UX/UI･인프런워밍업클럽스터디･figma･uiux

0