블로그

최신순
인기순
좋아요순

[인프런 워밍업 스터디 1기 디자인] 오리엔테이션 준비하기

안녕하세요! 지식공유자 볼드입니다. 최근에 인프런 워밍업 스터디 클럽 1기에서 프로덕트 디자인 코치로 참여하게 되었어요.준비 과정이 꽤 새로웠고, 많은 것을 배우는 시간이었습니다. 오늘은 제가 어떻게 러너분들과 첫 만남을 위해 준비를 하였는지 알려드리고자 해요. 첫 만남을 미리 계획하다저는 4주 전부터는 0기 코치님들이 남겨둔 자료들을 보며 어떻게 하면 더 좋은 오리엔테이션을 만들 수 있을지 고민했어요. 구조부터 차근차근 짜고, 내용을 채워 넣어서 빠르게 프레젠테이션을 완성했습니다. 첫만남인 만큼 어떻게 하면 더 재미있고, 참여자들과 적극적으로 소통할 수 있을까 고민을 많이 했어요. 그래서 피그잼을 사용한 워크샵 형태로 진행하기로 결정하고, 세 가지 큰 원칙을 세웠습니다:많은 정보를 빠르게 명확하게 전달하기최대한 재미있고 인터랙티브하게 이야기가 살아있는 컨셉 유지하기 다행히 ‘러너’라는 주제가 이미 있어서 그걸로 컨셉을 잡았고, 다음과 같은 여정으로 구성해 보았어요.🚀 출발: 워밍업 클럽을 시작하게 된 이유🗺 코스: 워밍업 클럽의 미션들🎯 도착: 워밍업 클럽을 마치고 받게 되는 혜택들 OT 시작 전에는 새 직장에서 바쁠 것 같아서 미리 인프런 담당자 셰리님과 자료를 공유하고 점검하는 시간을 가졌어요.그리고 막상 OT 주간이 되니, 예상대로 정신 없었습니다. OT 당일에는 반차를 내고, 오전에 교회에서 성경공부를 마치고 집에 돌아와 커피 한 잔 마시며 마지막 준비를 했죠. 러너 분들과 드디어 만나다영국시간으로 12시에 시작했어요.(한국 시간으로는 오후 8시), 제가 먼저 짧게 발표를 먼저 진행하고 러너 분들은 질문에 따라 각자 글을 작성하셨어요. 작성 후에는 서로의 글을 보며 하트를 남기는 시간을 가졌는데, 이게 생각보다 더 재미있었던 것 같아요. 미리 준비한 탭으로 미션 정보를 빠르게 효과적으로 보여드리고, 원래 OT 전까지 블로그 글을 쓰지 못했는데 셰리님의 빠른 대처로 발자국 미션 시연을 성공적으로 마칠 수 있었어요. OT 끝나고 난후워크샵이 끝난 후, 참가자분들의 피드백을 부탁드렸어요. 피드백을 보고 나니 제가 준비한 만큼 결과도 좋았다는 생각이 들더군요.(아래는 제가 몇개 선정한 감사한 피드백!) 2기에도 제가 참여할지는 아직 모르겠지만 2기에도 오리엔테이션 준비 경험을 살리거나 또 다른 코치님들이 사용할 수 있도록 이 피그잼 보드를 템플릿화하면 좋을 것 같아요. 또한, 이 방식을 다른 온라인 강의에서도 활용할 수 있을 것 같아요. (필요하신 분들은 알려주세요. 무료 나눔해드릴게요!) 마지막으로 인프런 워밍업 클럽 이전에 제가 진행한 인증샷 스터디에서 수강생과 교류가 있으면 좋을 것 같다는 의견이 있었어요. 처음엔 이걸 어떻게 개선해야할지 막막했는데, 인프런 워밍업 클럽을 참여하면서 이 문제를 해결할 수 있었어요. 그리고 셰리님을 포함한 인프런 팀이 없었다면 이 모든 게 불가능했을 거예요. 정말 감사드립니다! 인프런팀 만세! 앞으로 남은 세 번의 특강, 워크샵을 어떻게 준비할지 계획 중인데, 라이브 튜토리얼과 프레젠테이션을 어떻게 잘 조합할지, 함께 만들어가는 워크샵 과정이 어떨지 기대되네요. 인프런 워밍업 클럽 1기에 참여하신 모든 러너분들 다같이 파이팅해요 🔥

UX/UI･워밍업클럽･디자인시스템･피그마

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다아틀라시안 디자인 시스템 디자인 원칙/철학 : 우리는 왜 디자인 시스템이 필요한가?: 높은 품질의 UI를 구축하는 핵심 역할로써 디자인, 개발, 배포를 쉽게 할 수 있도록 돕는 것 우리 회사에 디자인 시스템이 필요한가?: 질문에 대한 핵심 답변은 디자인 부채가 발생한다는 점이다. 이는 결국 디자이너의 업무 비효율로 이어지고 이러한 업무 비효율은 개발단의 리소스 낭비로 이어진다. 전체적으로 봤을 때 팀의 손해이고 회사의 손해로 이어진다. 디자인 시스템이 있으면 좋은 점디자인 일관성 유지브랜드 강화효율적인 개발시간 단축팀 간 협업 강화빠른 온보딩유지 보수 용이높은 품질의 경험→ 디자인 시스템은 지속해 발전한다.→ 작은 성공을 이루어가며 구성원들간의 공감대를 형성해가는 것이 중요하다. 베리어블과 스타일의 차이베리어블 : 하나의 변수만 저장, 참조가 가능 / 재사용 가능한 기본 디자인 요소 스타일 : 하나 또는 다수의 변수를 저장, 참조가 불가능 / 그라디언트 ,블랜드 모드 등 다수의 디자인 요소를 적용 베리어블의 구조토큰 개념 : 이름(Name) / 값(Value) / 설명(Description) / 유형(Type) 베리어블의 이름 짓기베리어블 이름의 구조각 계층에서의 다양한 이름토큰 이름 붙이는 공식토큰 이름 예시Namespace : SystemObject : ComponentBase : Category / PropertyModifier : Variant / State / Scale 토큰 개발 실무 팁단어 통일하기80%는 미리 계획하기2~3가지 레퍼런스에서 시작하기 “좋은 음식은 좋은 재료에서 시작한다”단축키 - 베리어블 복사 : ctrl + shift + enter 우리 수업에서 가져갈 라벨링 방식: ‘Theme’ 브랜드(Brand) 부분이 추가됌→ 보통 브랜드는 1개이기 때문에 여러개일 필요 없음(나중에 실무에서 제거해도 이상 무)→ 이해를 돕기 위해 새로운 계층 생성 정리: 추가적으로 참고할 사항→ 각 요소마다 color scoping을 할 수 있음→ 특정 베리어블을 퍼블리싱하고 싶지 않을 경우 ‘_’를 붙여주면 됌 or 각 요소에서 hide 퍼블리싱을 선택해주면 됌→ 웹, AOS, iOS 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있음 간격 스케일 구성: 플랫폼별 렌더링 때문에 4px, 8px unit을 사용함 홀수일 경우 렌더링 시 소수점 발생, 픽셀 퍼팩트하지 않은 상황이 벌어짐4px이 베이스 유닛이냐, 8px이 베이스 유닛이냐는 회사마다 다름 → 조금 더 섬세한 구성으로 하고 싶다 4px스페이싱에 대한 라벨링 또한 4px이 기준(ex. shopify-1)이냐 8px이 기준(atlassian-100)이냐 달라짐마찬가지로 티셔츠 사이즈 척도를 사용하는지 숫자 척도를 사용하는지 입맛에 맛게 선택하면 됌회사 사용 예시아틀라시안 - 100쇼피파이 - 1모질라 - s, m, l카본 - 01간격의 사용0~8px : 작은 UI 구성 요소 12~24px : 카드 UI 패딩, 간격 32~128px : 큰 규모의 UI, 레이아웃간격 유닛의 사용처 : 패딩 / 갭 / 보더 레디우스 / 윗스*하이트 / 보더 윗스에 사용 가능 정리Elevation 높낮이 단계단계마다 사용되는 컴포넌트 분리 → 디스크립션에 넣어서 사용 용도 노티다양한 표현법으로 Elevation 표현다양한 엘리베이션 라벨링 방법반응형 그리드 기본 용어 : 칼럼 / 거터 / 마진그리드는 ‘Fixed’와 ‘Fluid’, ‘Hybrid’가 있음단축키 - 베리어블 바로 적용 : 영역 위에 커서 올려놓고 Shift + 왼쪽 마우스 버튼 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #1 - 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다미션 #2 - 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다미션 #3 - 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기미션 #4 - 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기이번 주 미션은 총 4개로 미션 #4의 스타일 가이드 문서를 제작하기 위해 #1~#3과정을 진행하는 미션이었다.스타일 가이드는 만들어본 경험이 있기에 비교적 쉽게 만들 수 있었지만, 베리어블을 사용해서 디자인 시스템을 만들어본 적은 없었기에 미션 #1~#3과정이 꽤나 새로웠다.베리어블로 디자인 시스템을 만들면서 primitive 값을 '참조'한다는 개념이 생소해 과정이 쉽지 않았는데 볼드님의 세세하고 친절한 강의를 들으면서 따라갔기에 어느 정도 개념이 자리 잡은 것 같다(혼자 만들었으면 엄청나게 헤맸을 것 같다)미션 #4를 끝난 현재 아직도 참조 개념이 어렵지만, 다음 주 컴포넌트를 만들면서 조금 더 익숙해지면 좋겠다.베리어블을 자유롭게 사용할 수 있게 되는 그날까지 계속 달려나가 보자! 스스로 칭찬하고 싶은 점 : 생각했던(예상했던) 퀄리티로 스타일 가이드를 만든 점아쉬웠던 점 : 아이콘 백터 깨지는 친구들을 다듬는데 꽤나 많은 시간을 사용한 점보완하고 싶은 점 : 스트로크 아이콘 뿐만 아니라 필 아이콘들도 갖춰놓고 싶다다음주 목표 : 지금처럼 매일매일 빠지지 않고 미션 팔로업 잘 해서 우수 수강생이 되자!

UX/UI･디자인시스템･베리어블･피그마

[인프런 워밍업 스터디 클럽 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

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

드디어 스터디의 마지막 주다!! 이번주에는 배리어블을 다크모드, 브랜드, 반응형 디자인, 다중언어 등 모드를 설정해서 적용하는 법을 배우고 페이지에 적용해봤다. 📖 강의 요약8. 모드 설정해서 배리어블 제대로 활용하기모드는 컬렉션 내 배리어블 값의 목록을 나타낸다. 컬렉션 내 다양한 모드가 있는 경우 맥락에 따라 맞춰서 사용할 수 있다.피그마가 제안하는 "맥락을 전환하는 경우"라이트모드/다크모드다중언어 지원디바이스별 대응멀티브랜드 지원다크모드다크모드 제작시 고려사항서비스 특성에 따라 다르게 적용 → 컨텐츠가 돋보여야 하는가? 미디어에 집중해야 하는가?구글 M3, 애플 HIG 참고하면 좋다 → 해당 환경에서 다크모드를 많이 사용한다라이트모드의 색상 체계를 반전시키면 될까? → 아니다!브랜드 아이덴티티, 접근성을 고려하고끊임없는 테스트를 통해 수정하기계획하기라이트모드의 색상 체계를 반전한 뒤접근성, 타 색상과의 조화 고려하고인터랙션: 단계에 따라 밝아지게 할지, 어두워지게 할지 등등 생각적용하기시맨틱에 적용실제로 색상을 계획할 때 참고하면 좋을 것 같은 문서를 덧붙인다.Dark Mode: How Users Think About It and Issues to Avoid Dark Mode (Apple HIG) 브랜드브랜드 구조 유형House of BrandsEndorsed BrandsSub BrandsBranded House적용하기theme에 추가 반응형 디자인최대값과 최소값 적용 → 오토레이아웃이 적용돼야 함기준 width, height값 정해서 모드에 적용 / 불린 프로퍼티 등 다양하게 적용 가능!Page, Header, Content 등 프레임마다 적용 가능잘 정리해서 사용하면 정말 무궁무진하게 확장할 수 있을 것 같다! 다중언어왜 다중언어를 지원하는 것이 중요할까?시장 개척 및 점유율 확대사용자가 접근하기 쉬움넷플릭스, 스포티파이글로벌라이제이션/로컬라이제이션LTR/RTL이미지에도 적용되면 좋음. 라인 좋은 사례현재 피그마 배리어블을 사용한 다중언어는 한계가 있다. 9. 페이지를 만들기 전에 알아야 할 사항컴포넌트 문서 정리하기*10, 11, 12 챕터는 미션에서 서술한다.플러그인Google Sheets Sync 중간점검 : 특강 및 LIVE QnA : 디자인 시스템 문서화 (feat. chatGPT 이용)디자인 시스템 문서화를 하는 이유하나의 제품을 만들기 위해 일관성, 효율성 제공함성공지표: 디자인 시스템을 얼마나 채택하였는가?잘 만든 디자인 시스템 문서: 참고하기 좋고 제대로 사용가능해야 한다라인, 지마켓, GOV.UK디자인 시스템에 나오는 공통된 주제와 내용Spec, States, Usage, Usage: Decide components, Anatomy, Behaviour, Best Practice, Props, Content guidelines, Accessibility, Responsive Design, Research and testing잘 만든 디자인 시스템을 선정해보는 시간이 있었다. “잘 만든 디자인 시스템의 기준이 뭘까” “나는 지금까지 어떤 지표들을 기준으로 디자인 시스템을 참고해왔나?” 라는 의문이 들어서 답하기 힘들었다. 지금 생각해보면 디자이너 입장(내 입장)에서 참고하기 좋았던 디자인 시스템 두 가지를 말했다. 디자인 시스템은 디자이너 외의 직군도 참고하는 문서라는 점! 을 잊지 말아야 한다. 어떻게 디자인 시스템 문서를 효과적으로 만들까?ChatGPT빠르게 효과적으로 작업 → *정확성 문제 있음다른 관점에서 보기 → *신뢰성 문제 있음프롬프트 프레임워크Context 맥락Information 정보Goal 목적Output 결과물이 모든 내용이 필요한가? 검토 필요볼드님께서 제작해주신 템플릿을 ChatGPT 3.5에 적용하여 디자인 시스템 문서를 작성해봤다. 덧붙여 타 수강생분들의 결과물을 보고 피드백해보는 시간도 가졌다. 결과물이 나쁘지는 않지만 확실히 인간 디자이너가 보고 검토할 필요가 있어보였다. 너무 재밌었고 의미있었던 시간! (+피드백을 꼼꼼하게 해주셔서 감동받았다. 감사합니다 !!) 디자인 시스템 문서화 도구와 플러그인Plugin: Propstar, EightShapes Specs, Stark 🎯 미션이번 미션은 전반적으로 정말 재밌었다. 이 강의의 꽃이 아닌가 싶다 ㅎㅎB2B shop admin, B2C learn cource, Mobile OTT 세 서비스의 페이지를 디자인했다.여태껏 만든 컴포넌트들을 조합하고, 서비스 성격이나 레이아웃에 맞지 않거나 혹은 실수가 있었던 컴포넌트를 다시 디자인했다. 개인적으로 이 후자의 과정이 좋았던게, 처음부터 완벽한 컴포넌트는 당연히! 만들 수 없다. 그럴 때 컴포넌트를 수정하여 디자인하는 방법을 알려주시는데, 별거 아닌 것처럼 보일 수 있지만 사실은 배우기 힘든 실무에서 활용하기 좋은 꿀팁들이라 생각한다.레이아웃이나 주로 사용되는 컴포넌트는 서비스 성격에 따라 달라진다. B2B 제품을 많이 디자인하는 입장에서 다른 서비스들도 더 디자인할 수 있는 기회가 생겨 좋았다. 또 데스크탑 화면을 먼저 디자인하고 → 모바일 확장을 고려하는 것과 반대의 경우 디자인 과정이 꽤 달라지는데, 그 과정도 미션중 거치게 되어 좋았다.제일 재밌게 했던 미션.🌼 회고잘 한 점무사히 스터디를 완주했다!아쉬운 점/보완할 점없다! 이번주는 시간관리를 아주아주 잘했다~ 👋 스터디 완주 소감강의를 수강하거나 미션을 진행할 때는 참 길게 느껴졌고 이외의 시간은 너무도 빠르게 만들어줬던 마법같던 한 달이 지나갔습니다. 강의 페이지에 적혀있는 강의 시간은 13시간 29분인데 어째서인지 공부를 하고 미션을 진행하고 하다보면 일주일에 최소 6시간 이상은 투자해야 했습니다. (저만 그런건 아니겠죠)그럼에도 완주할 수 있었던 이유는 다른 러너분들이 열심히 달리시는 모습을 보며 자극을 느끼고, 매주 들었던 라이브 특강에서 학습의 기쁨을 느꼈고, 무엇보다 강의 자체가 잘 짜여졌기 때문이라고 생각합니다. 스터디 진행해주신 인프런 관계자분들, 정말 열정적으로 가르쳐주신 볼드님, 그리고 같이 달려주신 러너님들 전부 감사합니다! ☺이제부터는 지금까지 공부했던 것들을 복습하고, 실무와 사이드프로젝트에서 잘 적용할 수 있도록 응용해보겠습니다. 💨(+첫 라이브특강때 다짐했던 책 샀습니다. ㅎㅎ)

UX/UI･워밍업클럽･피그마

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다 브랜드 구조 유형 (Brand Architecture Type)하우스 오브 브랜드 (House of Brands)엔돌슨 브랜드 (Endorsed Brands)서브 브랜드 (Sub Brands)브랜디드 하우스(통합 브랜드) (Branded House) 반응형 디자인 / 적응형 디자인반응형 디자인 디바이스 너비에 따라 디자인이 자동으로 변경개발 효율이 큼(관리 포인트 관점)적응형 디자인 디바이스 너비에 따라 디자인이 수동으로 변경모든 브레이크 포인트마다 디자인 적용(애플이 대표적) 글로벌라이제이션 / 로컬라이제이션글로벌라이제이션국제 시장에 표준화하여 전세계 시장에 적용될 수 있도록 만드는 것 → 일관성, 표준화, 중앙집중화로컬라이제이션특정 지역 국가의 문화, 언어 습관에 맞게 조정하는 것을 의미 → 다양성, 분산화 발견한 설계 꿀팁베리어블 불린 프로퍼티의 경우 레이어 눈(view) 아이콘에서 우측 버튼 클릭해 적용해야함 베리어블 적용된 상태에서 타 베리어블로 중복 적용 가능 컴포넌트 인스턴스에도 베리어블 적용 가능 (스트링할 때 필요) 구글 시트 플러그인으로 더미 텍스트들 한번에 적용 가능1) 레이어 이름과 시트 이름이 동일해야함2) 변경하고자 하는 레이어 이름 앞에 ‘#’을 붙여줘야함 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #13 - 멀티 브랜드을 베리어블 모드를 활용하여 구현해보기미션 #14 - B2B 이커머스 어드민 페이지 만들기미션 #15 - B2C 이러닝 페이지 만들기미션 #16 - 모바일 OTT 서비스 페이지 만들기 모든 강의를 완주했으며 모든 미션을 끝냈다🥳🎉🎊이번 #13~16미션은 그동안의 미션 중 가장 재밌는 미션이었다ㅎㅎ베리어블의 임팩트를 가장 크게 느낄 수 있는 미션들이었고 충격의 연속이었다.특히나 멀티 브랜드일 경우 모드를 변경할 때마다 짜릿했다ㅎㅎ(패딩에 베리어블을 설정 가능한 것과, 베리어블의 불린 기능도 매우 유용하게 느껴졌다)너무 재밌게 진행한 마지막 주 미션이었다.이제 앞으로 배운 기능들을 잘 사용할 일만 남았다.섬세하게 잘 가르쳐주신 볼드님께 감사의 말씀을 전한다!감사합니다 볼드님~!🙏🏻🙇🏻‍♂️ 스스로 칭찬하고 싶은 점 : 강의 & 미션 모두 완주한 점! ㅎㅎ아쉬웠던 점 : 없.다. 후회 없!보완하고 싶은 점 : 혼자 배운 것들을 실무에 적용해보기...!다음주 목표 : 보너스 미션 도전해보기😎

UX/UI･디자인시스템･피그마･베리어블

1주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국😱

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 1주차(베리어블 등록하기) 이번주 나의 강의 ☑디자인 토큰과 베리어블 장점 비교디자인 시스템에 대해 알아보기 (디자인의 일관성, 브랜드 강화, 효율적인 개발, 시간 단축, 팀 간 협업 강화, 빠른 온보딩, 유지보수 용이, 높은 품질의 경험) 디자인 시스템은 혼자 만드는 것이 아니라 디자이너, 개발자는 물론 다양한 이해관계자들과 함께 만들어야 한다.) 베리어블의 구조(토큰계층) / 베리어블의 네이밍 구성요소 (개발자와 디자이너 사이의 공통된 이름 짓기, 미리 계획하에 만들기(엑셀시트))Primitive / Theme / Semantic으로 나누어서 사용에 맞게 베리어블 등록하기 (단계별로 어떤 베리어블을 참조 해야하는지 확실한 구분이 필요)등록한 베리어블을 공유할 수 있도록 문서화하기 (알아보기 쉽게 일관된 스타일로 문서화 하는 것이 중요(컬러의 경우 참조 베리어블 등록하는 것이 생각보다 시간이 오래 걸림 ㅠㅠ)) 강의를 들은 나의 회고 😭😭솔직히 처음에는 강의를 듣는 시간이 얼마 안걸릴거라고 생각했는데 실습을 직접하면서 배우는거라 생각보다 시간이 많이 걸렸다. 하지만 실습을 하면서 배우는게 몸으로 익히면서 배우는 거라 더 기억에 남는거 같아 좋았다. 그리고 강의의 퀄리티가 너무 좋아서❤ (실무에서 유용하게 사용할 수 있을 정도) 하루 하루 배울 수록 힘들었지만 기분이 좋아졌다. 게으른 나 다음주도 조금만 더 힘냈으면 좋겠다. 미션 컴플리트 중미션은 생각보다 어렵지 않았다. 강의를 들으면서 누구나 해결할 수 있을 정도의 수준이어서 처음엔 좋았는데 베리어블을 문서화 하는데 시간이 생각보다 많이 들었지만(아직도 하는 중😱) 나중에 회사에서 배운걸 적용하고 문서화를 할거를 미리 연습한다는 생각으로 하고 있다. (플러그인이 모든걸 해결해 주지는 않는다.😌) 볼드님이 1주차 온라인 강의를 해주셨는데 실무적으로 사용할 수 있는 것들을 자세하게 설명해 주셔서 너무 좋았습니다. 강의가 정말 필요하고 그동안 궁금했던 것들이 담겨있어 너무 좋았습니다. 다들 이 강의 꼭 들으세요.👍👍

UX/UI･베리어블･디자인시스템･피그마

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다 베리어블 모드를 사용하는 경우라이트 모드 / 다크 모드로 설정이 나눠져 있을 경우다중 언어 지원이 필요할 경우디바이스별 대응이 필요할 경우멀티브랜드 대응이 필요할 경우 라이트 모드 / 다크 모드→ 빛, 배터리, 인지 능력과 관련되어 있음라이트 모드평범한 사람들은 훨씬 퍼포먼스가 좋음긴시간 노출될 경우 근시 확률이 높아짐다크 모드빛이 덜 발산해서 배터리가 덜 듦저시력자의 경우 다크 모드를 선호함단, 서비스에 따라 다름상품 또는 콘텐츠가 돋보여야 하는 경우(ex. 이커머스, F&B 서비스)에는 라이트 모드 지향몰입형 미디어를 제공해야하는 경우(ex. OTT 서비스)에는 다크 모드 지향플랫폼 마다 다크 모드 디폴트 배경색이 다름 (→ 그림자 등 디자인 에셋에 영향을 끼침)AOS → 짙은 회색 (#121212)iOS → 완전한 검은색 (#000000) 다크 모드 설정 시 주의할 점브랜드 아이덴티티 고려접근성 고려특히나 명암 대비디자인 요소 - 3:1일반 텍스트 - 4.5:1작은 텍스트 - 7:1지속적인 테스트로 수정 가능성 고려 발견한 설계 꿀팁기존 컴포넌트 사용해서 새로운 컴포넌트 만들 시 오토 레이아웃이 아닌 그룹으로 만들어주면 불린을 적용할 때 영역을 차지하지 않음 사이즈 조절할 때 백터 에셋도 같이 조절하려면 백터 컨스트레인을 Scale로 변경해주면 됌 Command+R로 레이어 라벨링할 때 숫자의 경우 ’nn’ 앞에 ‘n’ 지워주면 1자리 수로 적용할 수 있음 네스트 인스턴스 적용할 때 스페이스바 사용해서 한번에 검색해 여러개를 동시에 적용할 수 있음 그룹을 먼저 적용하고 오토 레이아웃을 하면 자동으로 잡히는 영역없이 오토레이 아웃을 할 수 있음 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #9 - 피드백 컴포넌트 전체 만들어보고 색상 대비 점검을 하기미션 #10 - 네비게이션 카테고리에 해당하는 컴포넌트를 만들어 보기미션 #11 - 네비게이션 카테고리에 해당하는 나머지 컴포넌트를 만들어 보기미션 #12 - 베리어블 다크모드 개념을 익히고 활용해보기 이번 주 드디어 모든 컴포넌트 작업을 마치고 다크 모드 적용에 들어갔다!컴포넌트 만드는 과정을 돌이켜보면 프로그레스바 만드는 미션이 가장 재밌었다.1도 예상치 못한 기발한 방법으로 프로그레스바를 만들며 피그마가 얼마나 잘 되어있는 툴인지 새삼 깨달았다.다른 컴포넌트를 만들 때도 적용할 수 있을 것 같아 절대 까먹지 않고 기억해두려 한다.다크 모드 적용은 컬러 콘트라스트를 체크해 시멘틱 컬러 베리어블을 다듬는 과정이 꽤나 어려웠다.라이트 모드에서 하나의 모드가 더 생겼을 뿐인데 관리할 포인트가 무진장 많아진 느낌이다...나중에 고생하지 않으려면 시스템은 초반부터 잘 만들어야 함을 다시금 깨닫는 순간이었다...!다크 모드는 실제로 처음으로 적용해 보는데 계획하는 단계가 잘 이해가지 않는다.(나중에 혼자 할 수 있을까 걱정이다...ㅠ)다음 주면 막 주다!드디어 기다리고 기다렸던 실제 화면 만들기에 들어간다.지금껏 꽤나 오랜 시간 공들여 만들어온 컴포넌트를 신나게 사용할 때가 다가온 것이다...이 말이다...막주까지 잘 달려서 모든 미션 완수하자! 화이태ㅐ애애애앵~!! 스스로 칭찬하고 싶은 점 : 1) 아이콘 시스템 수정 필요한 부분들 수정한 점2) 타이포 그래피 시스템 행간 수정해서 스타일 가이드까지 적용해 놓은 점아쉬웠던 점 : 1) 컬러 콘트라스트를 체크해 최대한 모든 부분을 수용할 수 있도록 수정했지만, 어쩔 수 없이 대비가 미미한 부분이 존재하는 점2) 다크 모드에서 눈물을 머금고 넘어가야하는 디자인 에셋(ex. 스켈레톤 UI)이 존재하는 점보완하고 싶은 점 : 프리미티브 컬러를 수정해보고 싶다...!다음주 목표 : 지금 처럼 킵 고잉해서 모든 미션 완료하기~!~!!

UX/UI･피그마･디자인시스템･베리어블

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

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다프로퍼티의 종류들Text 프로퍼티 → 디폴트 텍스트 설정instance swap → 변경할 수 있는 에셋 설정이때 Value 에서 디폴트 에셋 설정 가능Preferred values에서 변경할 수 있는 에셋들 설정 가능프로퍼티의 위치를 바꿔주는 것도 중요Leading icon 의 Boolean 프로퍼티 아래 → Leading icon 의 instance swap 프로퍼티를 위치시켜 디자인 시스템 사용성을 증진시키는 구성을 만들어 줌에셋의 높이를 통일시켜주는 것도 중요모 컴포넌트에 min, max 하이트 값을 넣어주면 자 컴포넌트에도 적용 볼드님 질의 응답 답변Storke가 살이있는 아이콘은 Union을 먼저 한 다음 Outline Stroke로 깨야함 → Storke 값이 살아있으면 리사이징 시 값이 유지 됌 (리사이징 되지 않음) 발견한 설계 꿀팁인스턴스가 조합된 최종 상태의 컴포넌트는 한번 더 묶어주기디자인 시스템 사용성 챙기기이 때 기준이 되는 모 컴포넌트는 ‘part/’ 라벨링을 붙여 검색 시 노출 안되게 해주기 ex)컴포넌트 베리언트에서 절대 위치(앱솔루트 포지션) 적용할 수 있음 그리고 절대 위치 적용한 디자인 에셋에 컨스트레인 적용해서 반응형으로 설정 가능함ex)컴포넌트 베리언트 정의한 영역 안에서 일괄 적용되지 않게 하려면 각 개별 컴포넌트 안에서 에셋을 정의하면 됌Boolean으로 적용하면 안되는 부분, 적용하지 않으려는 목적으로 작용ex)작업 이후 디자인 에셋들 Contrast 체크해서 접근성 갖추기몰랐던 점들이미지 삽입 관련이미지도 스타일 등록이 가능하니 자주 쓰는 이미지는 등록해놓으면 좋을 것 같다 이미지 삽입할 때 ‘프레임 배경 컬러 선택 → 이미지 선택’해서 넣어주는게 좋을 것 같다( 1. 이미지 자유롭게 리사이징 가능 / 2. 이미지 다른 에셋으로 곧바로 변경 가능 )오토 레이아웃 설정 관련오토 레이아웃 설정에서 스트로크 같이 면으로 처리 안되는 친구들의 ‘Included / Excluded’를 설정할 수 있다오토 레이아웃 설정에서 에셋들의 스택 순서를 ‘Last on top / First on top’으로 변경할 수 있다 미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #5 - 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기미션 #6 - 입력 컴포넌트 나머지 만들고 마지막 점검하기미션 #7 - 디스플레이 컴포넌트 만들어보기미션 #8 - 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 이번 주 미션도 저번 주와 마찬가지로 총 4개의 미션이었다.미션 #5, #6, #7, #8 과정 모두 컴포넌트를 만드는 미션으로 UX 경험적으로 꼭 필요한 공통 에셋들을 만들어보는 과정이었다.실무에서 공통 에셋들을 만들어본 적은 있지만, 수업처럼 모든 에셋들을 만들어본 적은 없어서 본격적인 과정들이 쉽진 않았다. (생각보다 시간이 오래걸리는 점도 꽤나 힘들었다)그래도 미션 #5, #6, #7, #8 과정을 거치며 베리어블 사용하는 것에 어느정도 익숙해진 것 같다. (조금 속도가 붙었다)중간중간 적용을 까먹고 빼먹는 친구들이 종종 있는데 좀 더 꼼꼼히 살피면서 설계할 필요가 있는 것 같다.다음 주도 공통 컴포넌트 에셋을 만드는 작업을 이어서 진행한다.빨리 페이지에 만들어놓은 컴포넌트 에셋들을 적용시켜보고 싶다...!완주까지 기대가 되는 요즘이다. 굿! 스스로 칭찬하고 싶은 점 : 월요일, 화요일 매우 몰입해서 미션 #5, #6, #7, #8을 모두 완주한 점아쉬웠던 점 : 아이콘 시스템, 타이포 그래피 시스템을 다듬어야 하는데 다듬지 못한 점보완하고 싶은 점 : 타이포 그래피 시스템도 베리어블을 적용해보고 싶은 점다음주 목표 : 3주차 들어가기 전 아이콘 시스템, 타이포 그래피 시스템 다듬어야할 친구들 무조건 손보고 들어가기!

UX/UI･피그마･베리어블･디자인시스템

[인프런 워밍업 스터디 클럽 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･디자인

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

4L 회고Like (좋았던 점): 피그마를 독학할 때 유튜브에 짧게 널려 있는 영상을 보고 하나하나 적용하느라 힘든 부분이 꽤 많았는데 정말 작은 부분(컬러)부터 차근차근 배우니까 많이 도움이 된 것 같았다.Learned (배운 점): 배리어블 자체를 처음 써보았고 컬러 차트를 내가 만들 수 있는지도 처음 알았다. 그리고 이름 짓는 규칙(?)이나 간격 척도의 종류와, 아이콘 유니온도 처음... 😿 2챕터 후반부나 3챕터 초반은 나름 알던 것이라 괜찮았지만 앞 개념들을 따라가면서는 정말 많이 배웠다 (하나도 몰라서 ㅜ.ㅜ)Lacked (부족한 점): 일단 4학년이라 수업을 많이 듣는 것은 아니지만 졸작을 병행하느라 강의가 많이 밀렸다. 어느 정도 진행된 졸작에서 큰 이슈가 터져서 주제를 갈아 엎어야 했다. 그래서 강의 공부할 시간이 갑자기 증발했었고.. 또한 강의 내용을 나의 개인 노션에 적으면서 진행되었는데 이렇게 들으니까 시간이 다섯 배는 더 걸린 것 같았다. 볼드 강사님께서 따로 정리해 주신 노션을 적극 활용해서 실습과 발자국 작성에 시간을 쓰는 것이 맞는 것 같다.Longed for (바란 점): 첫 주차라 시간 분배를 1도 못하고 정말 엉망진창에 내가 이거 다 끝낼 수 있을까? 싶었지만 꼭 완주할 수 있도록 틈이 날 때마다 부담없이 공부해야겠다는 생각이 들었다 파이팅😂 앞으로는 꼭 주어진 일정대로 강의를 듣자... 🙉 강의 필기한 것 중에 중요한 / 여태 몰랐던 것들만 발췌했다! 배리어블디자인 토큰이나 프로토타이핑 툴의 기능을 함디자인 토큰이란?“모든 UI 요소의 기본 구성요소”로써 근원의 역할을 하는 작고 반복 가능한 디자인 결정전자 - 원자 (버튼, 라벨, 필드 등) - 분자 (앞의 것들을 결합한 것) - 유기체 - 템플릿 - 페이지 - UI디자인 토큰 : 전자에 해당색상, 폰트, 테두리, 그림자 효과 등 ⇒ 디자인 세팅 !! 배리어블 이름 구조← 의미, 논리, 모듈화, 일관성 (헷갈린닥,,ㅜㅜ)Namespace : 시스템 구분System 접두어, 모든 토큰 앞에 붙음Object(특정) Component : 컴포넌트 적용하고 싶을 때 중간Base : 디자인의 구성 요소 나타냄Category - Property(각 카테고리 내 세분화) : 기본적인 디자인 구성 요소Modifier : 그것의 변형 값을 보여줌Vraint(시각적 위계질서 primary-secondory-tertiary), State(인터랙션 상태), Scale(숫자나 사이즈, 강도 등) : 하나의 디자인 요소를 여러 상태에 따라 변형예시) 근데 카테고리 옆에 무조건 프로퍼티가 나오는 건 아닌.. styles to variable 플러그인styles to variable 플러그인styles에서 가져오는 방법primitive에는 배리어블에 무조건 기본 값이 들어가야 함 = row한 헥사 코드theme 컬러 : 브랜드semantic 컬러 안에 text / bg / icon / border별로 만들어 주기.. 그 안에 또.. 핵심 .. semantic 컬러 내부 분류 잘 하기 여러 상황 - 역할에 따라,,variable에서 scope 조절 설정 하면 해당 스코프에서만 색깔 보임컬러 스타일을 킵 하고 싶으면 상위 폴더를 만들고 앞에 .(점) 붙이기 ⇒ 나중에 퍼블리싱 할 때 안 빠져나감 (안 쓸 거면 그냥 지우기!!)나중에 아이콘 Union에 관해 더 자세히 배울 것⇒ 이렇게 컬러를 짜게 되면 수치와 컬러 이름 같은 raw 컬러를 보여주는 것이 아니라 시맨틱한, 의미있는 이름을 보여주기 때문에 컬러 속성을 넣을 때 쉽고 일관적임다시 automatic style guides 플러그인을 써서 새로운 페이지 만들기

UX/UI･피그마･인프런워밍업클럽

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

직장과 사이드 프로젝트를 병행하던 중 디자인 시스템에 대한 심화적인 공부의 필요성을 느꼈다. 사수 없는 디자이너라 스스로 배우고 성장해야만 했는데, 해외 아티클, 유튜브 등을 열심히 찾아봤지만 "어디서부터 어디까지 실무에서 적용시켜야 할지 모르겠다"는 문제 때문에 어려움을 겪었다. 그러던중 인프런 워밍업 클럽 - 스터디 1기의 존재를 알게됐고, 좋은 기회로 보여 신청했다. 📖 강의 요약0. OT첫 프로그램은 OT였다. 줌으로 화상회의를 진행하는 동시에 피그잼에서 강사님과 의사소통했다. 덕분에 집중이 잘됐다. 스터디는 다같이 으쌰으쌰하는 분위기가 중요한데, 참여자 모두가 쉽게 사용할 수 있고 귀여운 의사소통이 가능한 툴이라 그랬던 것 같다.평일 저녁에 짬을 내서 참여할 가치가 있었다. 기존에 존재하는 강의를 바탕으로 스터디로 진행하다 보니 안내사항이 많았는데, OT에서 설명을 잘해주셔서 따라가면서 잘 이해할 수 있었다. 특히 피그잼에서 "내가 왜 이 스터디에 참여했는지" "무엇을 얻고 싶은지" 등을 스스로 생각하고 써나가는 시간이 있었는데 이 시간이 정말 좋았다. 다른 사람들이 어떤 각오로 참여하게 됐는지를 보면서 동감하고 신기해하기도 하면서 "다같이 30일동안 열심히 공부할 사람들이 여기 있구나!"라는걸 새삼 느끼며 설레는 마음으로 스터디를 시작했다. 1. 디자인 시스템과 디자인 토큰강의는 베리어블이 먼저지만, 정리 과정에서 순서를 수정했습니다초반 강의에서는 디자인 시스템과 디자인 토큰 등 강의에서 다루는 개념들을 먼저 정리하는 시간을 가졌다. 아는 내용과 모르는 내용이 섞여있었는데, 전자는 내가 이미 아는 개념들을 강사님 입장에서 설명해주시는 것을 들으면서 "아, 저렇게 설명할 수도 있는 부분이구나!"고 생각하며 복습했고, 모르는 부분은 아는 부분보다 열심히 메모하고, 따로 표시해두었다. 1) 디자인 시스템디자인 시스템은 일관성과 확장성을 가진 재사용 가능한 컴포넌트와 패턴, 가이드를 말한다.디자인 시스템의 구성 요소는 다음과 같다.디자인 원칙/철학 Design Principle스타일 가이드 Style Guide컴포넌트 라이브러리 Component Library패턴 라이브러리 Pattern Library문서화 Documentation시스템 관리 운영 System Governance이 중에서 내가 주로 사용했던 것은 스타일 가이드, 컴포넌트 라이브러리뿐이었어서 다른 부분들을 어떻게 실무에 적용할 수 있을지 고민했다. 디자인 시스템의 장점은 다음과 같다.디자인 일관성 유지브랜드 강화효율적인 개발시간 단축팀 간 협업 강화빠른 온보딩유지 보수 용이높은 품질의 경험 디자인시스템을 시작할 때는 다음 사항들을 주의해야 한다.비즈니스, 디자인, 개발의 이해에서부터 시작디자이너 혼자서 만드는 게 아니라 회사의 여러 구성원이 함께 만드는 것작은 단계에서부터 성공해나가야 함디자인시스템은 보통 '효율'을 위해 만드는 시스템이지만 제대로 만들려면 시간과 비용이 많이 든다. 따라서 초반에 어디까지 만들지 제대로 설정하는 게 중요하다. 그리고 사이드프로젝트를 할 때도 느꼈지만 만들다보면 또 수정할 일이 생기고, 여기서 막히고 저기서 충돌하기 때문에.. 작은 성취들을 소중히 여기는 태도가 꼭 필요하다. 2) 디자인 토큰디자인 토큰은 모든 UI 요소의 기본 구성 요소로 작고 반복할 수 있는 디자인 결정이다. 브래드 프로스트의 아토믹 디자인 개념에서는 '전자'단계에 속한다.전자 -> 원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지 토큰과 관련된 브래드 프로스트의 새로운 아티클도 첨부한다. 다음에 시간될 때 차근차근 읽어보면 개념 이해에 더 도움이 될 듯 하다. 그렇다면 디자인 토큰은 왜 필요할까? 바로 확장이 쉽고 관리가 유연하다는 이유 때문이다.❓ 여기서 "json으로 내보내기 가능해서 여러가지 플랫폼으로 이동 가능하다"고 강사님이 말하셨는데 이유가 궁금해서 찾아봤다.json은 JavaScript Object Notation의 약어로, 데이터를 표현하는 데 사용되는 형식이다. 현재 데이터 교환의 범용 표준이며 프론트엔드와 서비스 측 개발, 시스템, 미들웨어, 데이터베이스를 포함해 프로그래밍의 모든 영역에 사용된다. (출처: 거의 모든 SW 개발의 필수⋯JSON 데이터 포맷의 이해 - ITWorld Korea)디자인 토큰 형식 모듈/4.파일 형식에 따르면 json이 채택된 이유는 다음과 같다.1. 많은 프로그래밍 언어의 표준 라이브러리에서 광범위하게 지원된다. 이것은 개발자의 진입 장벽을 낮출 것으로 예상된다. 2. 현재 인기있으며 광범위하게 사용되는 언어다. 많은 사람들이 익숙하기 때문에 학습 곡선을 낮출 것으로 예상된다.3. 이진법이 아닌 텍스트 기반이어서 기본 텍스트 편집기 이외 특수 소프트웨어 없이 디자인 토큰 파일을 편집할 수 있다. 3) 베리어블의 이름과 구조혼자 공부할 때 가장 어려웠던 부분인데 설명을 너무 잘해주셔서 열심히 들었다. 모든 스터디가 끝난 뒤 가장 먼저 복습하게 될 챕터가 아닐까 싶다. 베리어블의 구조는 다음과 같다.이름(Name), 값(Value), 유형(Type)설명(Description)그룹 베리어블의 계층은 다음과 같다. 기업마다 정의하는 용어가 다를 수 있지만 신경쓰지 말고, 계층마다 기업들이 어떤 목적을 가지고 역할을 분류했는지에 초점을 맞춰야 한다.Raw value: 본래의 값 #D6840BGlobal/primitive/core/base/foundation/root: 사용 맥락에 상관없이 디자인 언어의 기본 값 Orange-mediumAlias/semantic/applied/purpose: 특정 사용 맥락과 의도를 전달할 때 쓰이는 값 Brand-primaryComponent/overwrites/scoped: 컴포넌트와 관련된 모든 디자인 속성을 가진 값 Button-primary-background-color❓ raw value와 primitive는 뜻이 똑같은데 왜 다른 분류 용어로 사용하는지 궁금했다. 베리어블 이름의 구조는 Namespace + Object + Base + Modifier로 이루어져있다.Namespace>System은 다른 디자인 시스템과 구분하기 위한 접두어로, 주로 모든 베리어블/토큰 앞에 위치한다.Object>Component는 디자인 시스템 내에서 특정 컴포넌트의 스타일 및 레이아웃을 적용하고 싶을 때 사용된다.Base는 Category와 Property로 구성되는데, Category는 UI 기본 구성 요소를 공통된 유형으로 그룹화하며 Property는 각 카테고리 내에서 특성에 따라 세분화된 것들이다.Modifier는 하나의 디자인 요소를 여러 상황, 상태에 따라 변형할 수 있도록 한다. Variant와 State로 구성되는데, Variant는 시각적 위계질서와 기능을 표현한다. State는 인터랙션 상태와 크기를 표현한다. ❓ 토큰 앞에 $(달러) 기호를 붙이는 것도 json 기반이라 그런건지 궁금했다. 찾아본 결과는 다음과 같았다.디자인 토큰 형식 모듈에 따르면, 토큰 이름과의 충돌을 방지하기 위해 토큰 속성은 달러 기호($)로 접두사를 붙인다. 이 접두사를 사용하면 예약어 목록이 필요 없고 사양을 미래에 대비하는 데 도움이 된다.덧붙여 다른 변수명에서 잘 사용하지 않는 기호를 사용하여 다른 변수와의 충돌을 줄이기 위해 $를 사용한다는 내용은 이 블로그에 잘 설명되어 있다. 베리어블 구조, 이름을 지을 때 몇 가지 실무 팁도 알려주셨다.개발자와 디자이너 둘 사이의 공통된 이름 짓기미리 80% 정도는 계획을 하도록 한다 (엑셀 시트, 피그잼 추천)2~3개 정도의 레퍼런스에서부터 시작하기사이드프로젝트에서 파운데이션을 제작하던 중 어떻게 보면 벼락치기 개념으로 들은 강의였어서 조금만 더 빨리 들었다면 같이 엑셀로 계획하고 할 수 있었을텐데! 라고 후회했다 😇... 정말.. 정말 중요한 팁을 주셨다. 디자인시스템 관련한 레퍼런스는 사실 너무♾ 많고, 그중에서도 개발하려는 서비스의 특성/규모 등에 맞춰서 조절해야 하니 욕심부리지 말고 적당한 선에서 참고하며 시작해야 한다 ... 2. 스타일 파운데이션 설정색상 Color사이드프로젝트를 할 때 가장 많이 헤맸던 부분인데, 여러가지 레퍼런스를 참고해서 정리해주신 파일을 기반으로 만들어야 할 베리어블을 정리한 뒤 제작하니 시간도 절약하고 이후 개발자가 이해하기도 좋을 것 같았다. 고려사항은 다음과 같다.Color Scopingsematicbg: FrameIcon: Shapetext: Textborder: Stroke특정 베리어블을 publishing하고 싶지 않다면 베리어블 콜렉션/그룹 앞에 _ 작성개별 베리어블 edit color variable -> Hide from publishing 설정이런게 진짜 꿀팁이지 싶었던 부분. 이외에도 강사님이 제공해주시는 피그마 파일을 통해 컴포넌트 정리할 때의 팁을 알아볼 수 있는데, 공부에 많은 도움이 된다. 간격 Spacing, 둥근 모서리 Border Radius기본 단위(Base unit)은 1.5배수 랜더링 이슈로 주로 8pt 그리드를 사용하며, 일반적으로 더 작은 단위로 레이아웃을 정렬하고 싶은 경우 4pt 그리드를 사용한다. 간격 크기(Spacing Scale)도 마찬가지.간격의 사용(Spacing in UI)은 작은 UI 구성 요소 / 카드 UI 패딩, 간격 / 큰 규모의 UI, 레이아웃 등 간격이 사용되는 케이스에 따라 적용하는 간격의 범위를 말한다.❗ 아틀라시안 디자인 시스템에서는 small, medium, large로 나누어서 적용하고 있었다. (아래 사진)간격 베리어블은 다음과 같이 구성할 수 있다.ComponentSemantic : Padding Gap Border Radius Width/Height Border WidthPrimitive : UnitBase Grid Point : 4❗ 시맨틱을 적용한 사례가 궁금해서 찾아봤다. Polaris는 --p-space-card-padding, --p-space-table-cell-padding 같은 식으로 몇몇 컴포넌트의 Padding과 Width, Height까지 정의한다. 둥근 모서리 베리어블은 다음과 같이 구성할 수 있다.Primitive: UnitSemantic: Border Radius 타이포그래피 Typography타이포그래피는 강의 녹화 당시에 베리어블이 없었어서 스타일로 제작하셨으며(추후 추가 예정이시며, 나는 특강으로 들을 수 있다!), 스타일을 쉽게 제작할 수 있는 플러그인을 많이 알려주셔서 도움이 됐다. 아이콘 IconFeather Icons을 불러와서 등록하는 법을 배웠다. 기존에 있는 아이콘을 불러오는 과정에서 생길 수 있는 문제를 유용한 단축키를 소개하면서 해결해주셨다.fn shift enter : 바깥에 있는 프레임 선택 -> 크기 조절enter : child frame 선택ctrl shift g : frame 해제5월 4일에 진행한 특강에서 심화 수업을 들었는데, 이 부분은 정리가 더 필요해서 다음주 발자국으로 넘긴다. 높이 Elevation❗ Material Design 3에 의하면 높이는 z축에 있는 두 표면 사이의 거리다.높이와 그림자는 UI 요소간의 계층구조를 시각적으로 명확하게 하고, 요소들간의 상대적인 거리와 깊이를 나타내 현실감있는 경험을 제공하며, 상호작용을 시각적 피드백으로 표현해 사용자 경험을 향상시킨다. 높낮이의 표현방법은 3가지가 있다. (이미지 출처: Material Design 3)다른 톤으로 표현하기같은 톤인 경우 그림자 효과 주기스크림*을 사이로 구분하기*스크림: 모달 뒷배경에 주로 사용되는 그것을 말한다. Material Design 2에서는 다음과 같이 설명한다. 스크림은 표면의 콘텐츠를 덜 눈에 띄게 만들기 위해 머티리얼 표면에 적용할 수 있는 임시 처리이다. 이는 스크림을 받는 표면에서 벗어나 화면의 다른 부분으로 사용자의 주의를 유도하는 데 도움이 된다. 그리드 Grid, 기준점 Breakpoints그리드 시스템은 시각적 질서, 일관된 레이아웃, 유연함과 확장성, 디자인 효율성을 제공해준다. 반응형 그리드의 기본 용어는 다음과 같다.칼럼(Columns): 섹션거터(Gutters): 칼럼 간의 간격마진(Margins): 그리드 양상단의 여백 Fixed, Fluid, Hybrid 그리드 정의는 다음과 같다.고정형, 유동적 그리드 : 크기 확대됐을 때 고정/유동하이브리드: 다양한 그리드가 한 스크린 안에 있음 그리드는 개념적으로는 이해가 된 상태였는데 피그마에서 오토레이아웃을 적용할 때 헷갈리는 부분들이 있었다. 그런 점들을 잘 짚고 넘어갈 수 있었다. 테두리 간격 Border Width, 투명도 Opacity배리어블을 만든 후 넘버 스코핑에 신경쓰면 되는 부분들이다. 🎯 미션미션 1, 2, 3이번주의 미션은 다음과 같았다.미션1. 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다.미션2. 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다.미션3. 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기미션4. 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기그중 미션 1, 2, 3은 시간이 조금 걸리긴 했지만 강의를 따라가면 충분히 해결할 수 있는 과제들이었다. 미션 4미션4는 현재 사이드프로젝트나 회사 업무에 적용한다고 생각했을 때, 어떻게 해야 개발자들이 잘 이해할 수 있을까? 불필요한 커뮤니케이션을 줄일 수 있도록 문서화하고 싶다! 는 생각을 가지고 작업했다. 작업과정은 다음과 같다.참고할 디자인 시스템 정하기: 볼드님의 파운데이션, Wanted Design Library, Polaris Styles 를 참고했다.베리어블 -> 문서화 플러그인 찾기 잘 만들어진 플러그인들이 많았지만 1. 컴포넌트 형식이고 2. 컴포넌트 내부 요소들이 잘 구성되어 있고 3. 오류가 없거나 적은 것을 찾기가 힘들었다.플러그인을 찾은 것들은 컴포넌트를 정리해서 묶었다.플러그인을 찾지 못한 것들은 타 디자인시스템들을 참조해서 새로 제작하거나, 기존에 강의를 따라가면서 제작했던 문서를 가지고와서 정리했다.이후 문서를 통일하고 정리했다. 이 과정에서 볼드님의 파운데이션이 큰 도움이 됐다. 🌼 회고잘 한 점: 직장과 사이드 프로젝트를 병행하면서 1주차를 무사히 끝냈다!아쉬운 점: 미션에 집중하다보니 발자국 작성에 시간을 많이 쓰지 못한 점이 아쉽다.보완할 점실전에서 어떻게 활용할 수 있을지 생각하며 강의 듣기매일매일 강의 들은 뒤 강의 메모 이외 간단한 느낀점 꾸준히 작성하여 이후 발자국 모으기 쉽게 만들기다음주 계획: 이번주만큼만 하기! 💨

UX/UI･워밍업클럽･피그마

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

OT부터 1주 차 스터디, 그리고 첫 온라인 중간 점검까지 마치고 남기는 첫 발자국!역시 나는 강제성(?)같은 동기가 부여되어야 하는 사람임을 다시 느꼈다. 🙄>짜여진 커리큘럼과 그에 맞는 미션이 설계되어 있어서 따라가기 너무 좋았고,강사님께서 노션과 강의 요약본까지 정리해두셔서 더 편리하게 할 수 있었다. 쵝오...👍강의는 무작정 "자, 일단 따라 해봅시다!"가 아닌 기초 개념부터 쌓아 올려가는 방식이라 너무 좋았고, 설명에 맞는시각적 예시까지 곁들여주셔서 따라가기 너무 좋았다. 유용한 사이트와 플러그인 정보도 유익한 건 덤~(WOW)~아직 아날로그 인간이라 강의를 손으로 필기하는데, 그중 몇 개를 아래에 간단하게 적어 회고를 해보고자 한다!Chapter 1.피그마 배리어블과 디자인 토큰디자인 시스템을 만들어야 하는 이유 ✧ 커뮤니케이션(공감대 형성)스타일, 배리어블? ✧ 기본 디자인 토근 관리를 위해서는 배리어블 ✧ 다수의 디자인 요소의 결합은 스타일 Chapter 2.배리어블과 파운데이션 세팅하기✦ 색상 베리어블 세팅 ✧ border의 경우 너무 두꺼우면 텍스트와 잘 부딪히니 색을 빼주어 구분을 해주자. ✧ icon은 텍스트와 주로 같이 간다.✦ 그리드 ✧ 4-point grid는 작은 단위로 레이아웃 정렬에 용이하다. ✧ gutter/columns의 개념 헷갈리지 않기. ✧ fluid의 경우 margin 값을 필수로 넣어주어야 한다. ✧ fixed와 fluid의 constraits 각각의 차이 기억하기.✦ 기타 베리어블 ✧ ex)stroke 배리어블 버튼이 안보일때 우 클릭&apply variable or shift+왼쪽 클릭 ✧ opacity의 경우 fill이 아닌 layer에서 적용시키기. 미션✦ 놓치는 부분이 없는지, 적용이 잘 되었는지 더블의 더블 체크 해주기.✦ 생각보다 어려워서 난항을 겪었던 미션 4 ▸ 참고한 템플릿은 크게 두 가지 범정부UIUX_디자인스타일가이드n컴포넌트 / Wanted Design Library ▸ 컬러 부분이 상당히 오래 걸렸는데, 맘에 드는 플러그인을 찾기 어려웠고 요소가 많은데 그 안에서도 최대한 구분이 되어 보이기를 바라며 구성하였다. -Theme의 경우 각 변수의 수가 똑같기 때문에 가로 정렬 -Sementic의 경우 각 변수의 차이가 약간 있고 내용이 많아 세로 정렬로 진행해 주었다.마치며, 2주 차 다짐📍아직까지는 따라가기 바쁘다, 복습은 필수.📍커리큘럼대로만 잘 따라가자, 부지런해져라(제발🥺)

UX/UI･워밍업클럽･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･디자인시스템

4주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😘

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 베리어블을 활용한 디자인 시스템 구축하기]수강 4주차(베리어블을 활용한 컴포넌트 조합해서 페이지 만들기/반응형 만들기/모드 적용하기👍) 이번주 나의 강의 ☑모드를 활용한 반응형 디자인/ 다중언어 화면 만들기 / 다크모드✅ 로컬 베리어블에 멀티 브랜드 모드를 등록하기 ✅ 각 브랜드마다 브랜드 고유 색을 나타내기✅ 각 브랜드마다 브랜드 다크모드 만들기-> 브랜드의 구조에 대한 설명과 앞으로 만들어 나갈 브랜드들에 대한 설명을 듣고 실습을 하게 돼서 이해가 빠르게 된 것 같다. 그리고 멀티 브랜드용 다크모드를 간단한 조작으로 만들 수 있어서 너무 감동이었다. 모드를 활용한 반응형 적용이나 다중어 화면 만들기도 실제로 배울 수 있어서 좋았던 것 같다. 베리어블의 활용이 얼마나 중요한지 깨닫게 되는 한 주였다.😋😋😋힘들게 만든 컴포넌트 적극 활용✅ 컴포넌트를 활용하여 어드민 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 만들어 놨었던 컴포넌트들을 활용해서 어드민 페이지를 만들었는데 확실히 컴포넌트를 미리 만들어 두고 조합하는 단계라 시간이 많이 절약되는 것 같았다. 이래서 컴포넌트를 만들어 두는구나 ㅋㅋ🤩다 만들어진 페이지에 클릭 한번으로 다크모드 전환 멋졌다❤ 베리어블 등록할 때는 헷갈리기도 했는데 이렇게 한꺼번에 자동으로 적용하려고 그랬나 보다. 다크모드와 반응형 반복 실습✅ 컴포넌트를 활용하여 이러닝 페이지 만들기✅ 다크모드 버전 만들기✅ 반응형 모드 버전 만들기-> 다크 모드와 반응형 만들기를 반복해서 실습할 수 있었다. 한 번만으로는 부족한 것이 사실이라 나는 반복해서 나오는 게 도움이 되었다. 그리고 실무에서 사용할 수 있는 꿀팁!!으로 플러그인을 알려주셔서 너무 좋았던 거 같다. 노가다의 시간이 확실히 줄었다. 😁😁😁대망의 마지막 강의 모바일 OTT✅ 모바일 OTT 서비스 페이지 만들기✅ 다크모드 버전 만들기-> 그동안 반응형을 이용한 웹페이지만 만들었는데 마지막을 앱 화면을 구성하는 강의였다. 여기도 만들어둔 컴포넌트를 적극 활용하여 만들었는데 완성도가 꽤 괜찮은 거 같았다. 😀😀😀 여러 번 실습을 거쳐서인지 적응이 되어서 만드는데 힘든 것은 없었던 거 같다. 강의를 들은 나의 회고 🙄이번 주가 마지막이라서 기쁜 마음과 마지막이라고 늘어지려고 하는 나를 강제로 일으켜 강의를 들은 거 같다. 마지막이라고 하니까 뭔가 아쉬움이 많이 남는 거 같기도 하고... 이번 강의를 들어서 나는 한 단계 나아진 거 같은 느낌이 들었고 이 강의를 선택하기 잘했던 것 같다. 추천추천 👍👍👍앞으로 좋은 강의 기대할게요 볼드님!!!!

UX/UI･피그마･베리어블･디자인시스템

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

주중에 스케줄이 많이 잡혀서 따라잡기 쉽지 않았다. 때문에 다크모드 배리어블은 오늘 밤에 공부할 예정이라, 피드백과 네비게이션 컴포넌트, 그리고 특강에 대해서만 작성한다. 덧붙여 오늘부터는 강의요약을 좀 더 열심히 작성해봤다! 다른 분들의 발자국을 보고 약간 반성해서…ㅎㅎ 그럼 시작한다. 📖 강의 요약6. 피드백(Feedback) 컴포넌트 만들기피드백 컴포넌트는 사용자에게 행동의 결과를 전달하는 방법을 제공하는 컴포넌트를 말한다. (출처: https://www.geeksforgeeks.org/react-mui-feedback-components/) 강의에서는 Alert, Toast, Skeleton Loader, Loading Spinner, Progress Bar, Modal을 다룬다. AlertAlert는 화면 상단에 눈에 띄는 메시지를 표시하는 컴포넌트다. 새로운 기능을 홍보하거나 피드백 메시지를 제공하는 데 사용된다. ‘Alert’라는 이름으로 42%, ‘Banner’라는 이름으로 31% 사용되어 강의에서는 Alert라 부른다. (출처: UI Guideline/Alert)AnatomyAlertcontentleadingIcontextContainertitledescriptionProperties🔷 Status: brand, neutral, info, warning, success, error🔷 Style: outline, filled, transparent👁 Icon🔹 → Icon (info, warning, success, error 제외)🔠 Title👁 Description🔠 → Description👁 Close ToastToast는 일반적으로 페이지 오른쪽 상단에 떠 있는 상자로 표시되는 컴포넌트다. 토스트는 콘텐츠를 위한 제한된 공간을 제공하므로 콘텐츠가 짧고 간결해야 하며, 사용자 행동에 대한 응답으로 즉각적인 피드백을 제공하거나 앱이 수행했거나 할 프로세스를 사용자에게 알려야 한다. ‘Toast’으로 48%, ‘Notification’으로 22% 사용되므로 강의에서는 Toast를 사용한다. (출처: UI Guideline/Toast)AnatomytextContainertitledescriptionactionItemsiconbuttonbuttonProperties🔷 Type: textonly, text&action, text&longeraction🔷 Status: neutral, info, error, warning, success, inverse🔠 Title👁 Description🔠 → Description👁 Action👁 Close Skeleton LoaderSkeleton은 콘텐츠가 로딩 과정에 있다는 것을 시각적으로 전달하기 위해 UI의 low fidelity 표현을 제공한다. 이름은 ‘Skeleton’으로 38%, ‘Skeleton Loader’으로 31% 사용된다. (출처: UI Guideline/Skeleton)왜 Skeleton Loader로 쓰셨는지가 또 궁금해서 찾아봤다. ChatGPT 3.5가 말하길, 스켈레톤 로더는 스켈레톤과 유사하지만 애니메이션이 추가된 경우가 많아 로딩 중임을 사용자에게 더 명확하게 알려준다고 한다. 따라서 스켈레톤은 단순히 레이아웃의 자리 표시자임을 강조하고 스켈레톤 로더는 로딩 상태를 더 강조한다고 볼 수 있다. 실제로 ‘스켈레톤’ 용어를 사용하는 Polaris는 정적이고, ‘스켈레톤 로더’ 용어를 사용하는 Thumbprint는 동적이었다. 그리고 강의에서도 애니메이션을 제작한다 😎!Anatomy : 도형을 사용할 뿐이라 구조라고 할 것이 없었다. 다만 Linear 사용 값에 신경쓸 필요가 있어보인다!Properties🔷 Type: circle, rect, text🔷 Progress: 0, 33, 66 Loading Spinner스피너는 처리되고 있는 상태를 나타나는 애니메이션이 있는 원의 윤곽이다. (출처: UI Guideline/Spinner)spinnerLoaderProperties🔷 Size: sm-16px, md-24px, lg-32px, xl-48px🔷 Type: primary, secondaryspinnerAnimationProperties🔷 Progress: 0, 25, 50, 75 Progress Bar프로그레스 바는 진행중인 사용자의 과정에 대한 피드백을 제공하기 위한 선형 지표다. (출처: UI Guideline/Progress)AnatomyBarbarprogressbarIndicatorstartingPointendPointProperties🔷 Progress: 0, 25, 50, 75, 100 Modal & SlotModal은 Slot 컴포넌트를 만든 뒤 제작했다. 여기서 Slot 컴포넌트는 잘 몰라서 찾아봤다.Figma에서 컴포넌트를 구축할 때 일부 컴포넌트는 많은 유연성이 필요하다. 이러한 유연성과 자유를 슬롯을 통해 부여할 수 있다. 사용 방법은 다음과 같다. 컴포넌트 내부에 슬롯 컴포넌트를 배치하고, 이후 디자이너는 필요할 때마다 슬롯을 다른 컴포넌트로 교체한다. (2차 출처: [UI자료] Figma 슬롯 구성 요소: 사용 이유 및 사용 방법, 1차 출처: Figma Slot Components: why and how to use them)SlotAnatomytitleicontitle(option) descriptionProperties🔷 Size: default, small SlotGroupAnatomySlot1Slot2Slot3…Slot6Properties🔷 Direction: horizontal, vertical🔷 Size: default, small🔷 Reverse: true, false🔹 Nested Instances ModalAnatomycontenttopContenticon/placeholdertextContainertitledescriptionslotGroupslotGroupcloseIconProperties👁 Leading Icon🔹 → Leading Icon🔠 Title👁 Description🔠 → Description🔹 Nested InstancesModals : 용도에 따라 Modal의 슬롯, 아이콘 등을 조정하여 만들어둔 컴포넌트셋Modals 제작시 참고 → 18 Modals & Popups 7. 네비게이션(Navigation) 컴포넌트 만들어보기내비게이션은 작업을 완료하기 위해 앱의 화면 사이를 이동하는 행위이다. 전용 내비게이션 구성 요소, 콘텐츠에 내비게이션 동작 포함, 플랫폼 어포던스 등 여러 수단을 통해 활성화된다. (출처: M2) Link, Breadcrumbs, Tabs, Bottom Navigation, Pagination, Side Navigation, Header, Carousel을 포함한다.Link링크는 탐색 요소로 사용된다. (출처: UI Guideline/Link)AnatomyiconLabeliconProperties🔷 Type🔷 Style🔷 State🔠 Label👁 Leading Icon🔹 → Leading Icon👁 Trailing Icon🔹 → Trailing Icon Breadcrumbs브레드크럼프는 사용자가 레벨 간의 계층 구조를 이해하고 다시 탐색하는 데 도움이 되는 보조 탐색 패턴이다. (출처: UI Guideline/Breadcrumbs)AnatomyLink-1iconLabeliconLink-2Link-3Link-4current pageProperties🔷 Max Level👁 Level4👁 Level3👁 Level2👁 Level1🔠 Current Page Tabs탭은 사용자가 동일한 컨텍스트 내에서 쉽게 탐색할 수 있도록 돕는 컴포넌트다. (출처: UI Guideline/Tabs)TabsAnatomypart-1part-2part-3…part-8Properties🔷 Items: 8, 7, 6, 5, 4, 3, 2, 1🔹 Nested InstancesTabPartAnatomyIconLabelProperties🔷 Selected: false, true🔷 State: default, hover, press, focus, disabled👁 Leading Icon🔹 → Leading Icon🔠 Label Bottom Navigation바텀 네비게이션은 화면 하단에 3~5개의 목적지를 표시하고, 각 목적지는 아이콘과 선택적 텍스트 라벨로 표시된다. (출처: M2)navbarAnatomynavbarItem-1navbarItem-2…navbarItem-5Properties🔷 Type: icons&label, icononly🔷 Items: 5, 4, 3🔹 Nested InstancesnavbarItemAnatomyIconIconbadgeLabelProperties🔷 Type: icononly, icon&label🔷 Selected: false, true🔷 State: default, hover, focus, press🔹 Icon : 네비게이션에 필요한 아이콘만 선택🔠 Label👁 Badge🔹 Nested Instances Pagination페이지네이션은 다음 또는 이전 페이지로 이동하기 위한 제어와 함께 콘텐츠나 데이터를 여러 페이지로 분할하는 데 사용된다. (출처: UI Guideline/pagination)paginationAnatomyprevpart/paginationControlpart/paginationControlpagepart/paginationPage…nextpart/paginationControlpart/paginationControlProperties🔹 Nested Instancespart/paginationPageProperties🔷 State: default, hover, selected, morepart/paginationControlProperties🔷 State: default, hover, active, disabled🔹 Icon Side Navigation사이드 네비게이션은 사용자가 제품이나 섹션의 콘텐츠 등 페이지 내 탐색을 도와주는 측면 패널이다. (출처: UI Guideline/sidebar)Side NavigationAnatomyTopsidenavMenuGroupsidenavMenuGroupBottomsidenavMenuGroupProperties🔷 Type: full, icononly, icon&labelpart/menuItemAnatomyicontextContainerTitleDescriptionbadgeProperties🔷 Type: full, icononly, icon&label🔷 Selected: false, true🔷 State: default, hover, press, focus🔷 Disabled: false, true🔠 Title:👁 Leading Icon🔹 → Leading Icon👁 Description🔹 → Description👁 Badge🔹 Nested Instancespart/headingAnatomyheadingTextheadingdividerProperties🔠 headingText👁 DividersidenavMenuGroupAnatomypart/headingmenuItem-1menuItem-2menuItem-3…menuItem-8Properties🔷 Type: full, icononly, icon&label👁 Heading🔹 Nested Instances Header헤더는 모든 페이지 상단에 나타나는 요소로 일반적으로 사이트 이름과 기본 탐색을 포함한다. (출처: the component gallery)HeaderAnatomyleadingItemlogonavigationnavItem …functionnavItem …Properties🔹 Nested InstancesnavItem/headerMenuGroupAnatomypart/headerMenuItem …Properties🔹 Nested Instances headerMenuItemAnatomyicontextContainertitledescriptionProperties🔷 Selected: false, true🔷 State: default, hover, press, focus🔷 Disabled: false, true🔠 Title👁 Leading Icon🔹 → Leading Icon👁 Description🔹 → Description👁 Badge👁 HorizontalExpandnavItemAnatomycontainerlabeliconlabeliconProperties🔷 State: default, hover, focus, selected🔷 Type: navigation, setting, user, search, more, help, alert🔷 Sub Menu: false, true👁 Label🔠 → Label👁 Nav Icon🔹 → Nav Icon👁 Badge🔹 Nested Instances Carousel캐러셀은 관련 콘텐츠 항목 세트를 연속으로 표시하기 위한 컴포넌트다. (출처: UI Guideline/carousel)carouselAnatomyparts/imagePlaceholdercarouselArrowcarouselArrowcontainersubtitlecontentscarousel Main Titlecarousel ContentcarouselIndicatorProperties🔹 Nested InstancescarouselArrowProperties🔷 Direction: left, right🔷 State: default, hover, selected, disabled🔷 Size: md, lgcarouselIndicatorAnatomycarouselDot1carouselDot2Properties🔷 Items: 5, 4, 3, 2🔹 Nested InstancescarouselDotProperties🔷 State: default, hover, selected 플러그인Find/Focus : 특정 텍스트가 있는 레이어만 선택할 수 있다.중간점검 : 특강 및 LIVE QnA : 타이포그래피이번 특강은 타이포그래피 배리어블 관련 내용이었다.primitive, sematic 두 가지 모두 사용해야 한다.primitive: font family, font size, font style, font weight, line height, letter spacingsemantic: heading, bodytypeface, font, font family 등 용어의 정의를 정확히 알고 사용할 것(헷갈릴 수 있다)시스템별로 폰트를 지정할 수도 있으나 헤비해질 수 있으므로 고민/논의가 필요하다다른 배리어블과 마찬가지로 스프레드시트에 작성, 정리 후 작업에 들어가야 한다배리어블 적용시 고려사항이 많으므로 잘 정리해야 할 것 같다. 🎯 미션미션 9: 피드백 컴포넌트 전체 만들어보고 점검하기미션 10: 네비게이션 컴포넌트 만들어보기미션 11: 네비게이션 컴포넌트 나머지 만들고 마지막 점검하기미션 12는 시간관계상 진행하지 못했다.슬롯 컴포넌트를 알게 된게 이번주 작업 중 제일 재밌었던 부분이다. 이 컴포넌트를 다른 컴포넌트에서는 어떻게 활용하는지 더 알아보고 싶다.캐러셀 컴포넌트는 바탕 이미지에 따라 제작법이 많이 달라질 것 같아서 이 부분도 더 알고싶다. 네비게이션 컴포넌트를 만드는게 가장 힘들었다. 만드는 과정이 힘들진 않았는데 고려해야 할 요소가 많아서 조금 질렸다.🌼 회고잘 한 점어떻게든 미션을 따라가려고 노력했다!아쉬운 점시간관리를 잘 못해서 공부한 내용을 잘 정리하지 못했다. 그래도 발자국을 작성하면서 정리된 부분들이 많다.보완할 점필기를 열심히 하기..다음주 계획미션 잘 따라가기

UX/UI･워밍업클럽･피그마

2주차 [피그마 배리어블을 활용한 디자인 시스템 구축하기] 발자국 😎

일주일 동안의 나의 게으름 타파 작전!!bold님의 강의 [피그마 배리어블을 활용한 디자인 시스템 구축하기]수강 2주차(베리어블을 활용한 UI Component 만들기) 이번주 나의 강의 ☑컴포넌트를 만들기 위해 구조 이해하기 프로퍼티 종류 이해하기 컴포넌트 만들기 인풋 컴넌트☑버튼(button) 컴포넌트☑컨트롤 컴포넌트(체크박스(check), 라디오(radio), 스위치(switch)) ☑라벨(label)을 만들고 컨트롤 그룹 컴포넌트 만들기☑ 텍스트 필드(text_field) 컴포넌트 ☑ 텍스트 박스(textarea) 컴포넌트☑ 셀렉트(select) 컴포넌트☑ 접근성 포트를 생성하고 접근성이 위배된 것을 수정-> 프로퍼티와 값을 정하는 게 나에게는 매우 어렵게 느껴졌다. 영어를 못해서 그런 건지😭 모르겠지만 처음엔 많이 어려웠는데 컴포넌트를 하나씩 만들어 가면서 어느정도의 룰이 있다는걸 알게 되면서는 조금씩 나아지는것 같았다. 디스플레이 컴포넌트✅ 아바타(avatar) 컴포넌트✅ 아코디언(accordion) 컴포넌트✅ 뱃지(badge) 컴포넌트✅ 툴팁(Tooltips) 컴포넌트✅ 구분선(divider) 컴포넌트✅ 인터랙티브 칩(chips) & 상태칩(chips) 컴포넌트✅ 기본 카드(Basic Cards)✅ 테이블(table) 컴포넌트✅ 접근성 레포트를 생성하고 접근성이 위배된 것을 찾아 수정하기-> 인풋 컴넌트를 만들고 나서인지 프로퍼티를 사용하는데 익숙해진 느낌이었다. 여러 가지 케이스를 만들면서 디자인 시스템의 위대함🤣을 조금 알게 된것 같기도 하다. 강의를 들은 나의 회고 😭😭한 컴넌트를 만들 때도 여러 케이스를 많이 만들어 볼 수 있어서 약간 힘들긴 했지만 확실히 도움이 된다는 생각이 들었다. 그리고 힘들게 등록했던 베리어블을 적용하면서 만들었기 때문에 쓰임새를 잘 알 수 있었던 한주였다. 프로퍼티와 값을 이해하는데 시간이 걸리기는 했지만 그걸 자세하게 배울 수 있어서 더 좋았던 거 같다🔥🔥🔥다음 주도 기대가 많이 된다. 미션 컴플리트내가 고생해서 만든 컴포넌트들을 조합해 보는 미션이 주를 이루었다. 컴넌트가 어떻게 쓰이는지를 생각하고 만들어 볼 수 있어서 도움이 되었다. 어떤 디자인에서 어떤 컴퍼넌트를 적절하게 사용하느냐도 근무 시간을 줄이는 것 중 하나이기 때문에 중요하게 생각하고 미션을 클리어했다.

UX/UI･피그마･베리어블･디자인시스템

[인프런 워밍업 스터디 클럽 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기 디자인] 2주차 발자국 및 회고

학습 내용 요약.이전 시간에는 베리어블들을 만들었다면, 이번 주부터는 베리어블을 이용해 컴포넌트를 제작했다.Day8. 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기Day9. 입력 컴포넌트 나머지 만들고 마지막 점검하기Day10. 디스플레이 컴포넌트 만들어보기Day11. 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기 2주차 회고 잘 한 점:직장과 병행하면서 차질없이 2주차 입력 컴포넌트와 디스플레이 컴포넌트 모두 만들었다.!1회독 때는 만드느라 급급했는데 다시 스터디를 통해 2회독 째 진행하니 확실히 개념들이 이해되는 듯하다 🙂 아쉬운 점:제일 처음 입력 컴포넌트 제작 시 label에 check와 radio 등 모두 묶어 제작했더니 인스턴스에서 약간 문제가 생겼었었고다시 제작하느라 약간의 뒤처짐?이 있었다ㅠ.ㅠ! 또 마지막 contrast 체크를 못 했는데 다음 주에 같이 진행해야 한다..! 3주차 이전 다짐:다음 주에 석가탄신일인 휴일날에 강의를 들으면서 3주차 미션도 얼른 끝내야겠다 !

UX/UI･워밍업스터디･디자인시스템･피그마

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

2주차는 확실히 쉽지 않았다. 휴일이 많다고 여유롭게 생각했었는데 휴일이 많다는 말은 약속이 생긴다는 말이다. 때문에 오히려 시간에 쫓겼다. 저번주의 보완할 점 중 "강의 메모 이외에 느낀 점 그때 그때 작성하기"가 있었는데, 강의 메모도 제대로 못했던 것 같아 많이 아쉽다. 그래도 어떻게든 스케줄에 맞춰 이번주 공부를 마무리해서 그 과정을 작성한다. 📖 강의 요약Day 7 중간점검 : 특강 및 LIVE QnA5월 4일에는 중간 점검 특강이 있었다. 네이밍 컨벤션, 아이콘, 멀티 에딧과 관련된 내용이었다. Naming Convention먼저 네이밍 컨벤션시 팁을 알려주셨다. 항상 신경쓰려고 하는데 놓치는 부분이다. 네이밍 컨벤션은 코드에서 사용되는 명명 규칙이다. snake_case, camelCase, PascalCase, kebab-case 등이 있다. 개발자의 이름 짓는 법, 네이밍 컨벤션 이라는 글에 자세히 설명되어 있다. 그중 camelCase 를 일반적으로 선호한다고 하셨는데, 이유가 궁금해서 더 조사해봤다.❓ camelCase가 디자인 시스템에서 일관된 네이밍 컨벤션을 적용할 때 유용한 방법인 이유가독성: camelCase는 여러 단어를 하나의 식별자로 결합할 때 각 단어의 시작 부분을 대문자로 표시하여 가독성을 높인다.일관성: camelCase를 사용하면 모든 변수, 함수, 클래스 등에 동일한 네이밍 규칙을 적용할 수 있다.자동완성 및 검색: 대부분의 통합 개발 환경(IDE)은 camelCase를 사용하여 자동 완성 및 검색 기능을 제공한다. 따라서 camelCase를 사용하면 개발자가 코드를 더 쉽게 작성하고 탐색할 수 있다.통합성: camelCase는 다양한 프로그래밍 언어 및 기술 스택에서 일반적으로 사용되는 네이밍 컨벤션이다. 이는 프로젝트를 다른 팀원과 공유하거나 외부 라이브러리 및 프레임워크와 통합할 때 유용하다.(ChatGPT 3.5 의 답변을 인용함) Icons그 다음으로는 아이콘을 선이 아니라 면으로 작업해야 하는 이유, 그리고 면 작업시 팁들을 들었다. 이게 특강 중 핵심 내용이었는데, 정말 꿀팁이었다. 특강자료는 수강생들만 받을 수 있었던 것 같아 해당 내용은 생략한다. Multi Edit강의 녹화될 당시 없었던 기능이라 추가 설명해주셨다. 알고있던 기능이지만 알고있다고 생각하는 것들이 원래 가장 무섭기 때문에... 공식 문서를 한 번 살펴보고 체크해봐야 할 것 같다.❗공식 플레이그라운드는 이쪽이다. → Multi-edit playground 3. 컴포넌트 만들기 위한 준비본 강의로 돌아가, 섹션 3에서는 컴포넌트를 만들기 전 컴포넌트에 대한 기본 설명과 준비 방법을 배웠다. 컴포넌트의 용어에는 컴포넌트 세트, 베리언트, 프로퍼티, 값이 있다. 컴포넌트 세트(Component Set)는 컴포넌트 안에 여러 컴포넌트를 가지고 있는 것을 말한다. 베리언트(Variant)는 컴포넌트 세트 안에 있는 하위 컴포넌트 각각을 뜻한다. 프로퍼티(Property)는 카테고리처럼 컴포넌트 내부의 요소들을 구분한다. 값(Value)은 프로퍼티 안의 내용물이다. ㅤ그 중 프로퍼티는 불린 프로퍼티, 텍스트 프로퍼티, 인스턴스 스왑, 베리언츠 프로퍼티가 있다. 불린 프로퍼티(Boolean Property)는 true, false 값으로 on, off를 조정한다. 텍스트 프로퍼티(Text Property)는 텍스트의 값을 수정한다. 인스턴스 스왑 프로퍼티(Instance Swap Property)는 다른 인스턴스로 교체할 수 있는 프로퍼티다. 마지막으로 베리언츠 프로퍼티는 (Variant Property) 다양한 상태, 스타일을 적용할 수 있는 프로퍼티다. 컴포넌트를 만드는 순서는 다음과 같다.기본 싱글 컴포넌트 만들기 : 배리언트 프로퍼티를 제외한 모든 프로퍼티 등록인스턴스 복사 후 테스트 : 리사이징, 프로퍼티 등배리언츠 프로퍼티 만들기 : 상태, 형태 등 베리언츠 프로퍼티 등록하기테스트 : 베리언츠 이름, 순서 체크내부 인스턴스의 프로퍼티를 가져오기 입력, 디스플레이 컴포넌트를 만든 뒤 이걸 보니 감회가 다른데, 모든 단계가 정말 중요하다. 4. 입력(Input) 컴포넌트 만들기이제부터는 본격적으로 컴포넌트 만들기 공장에 들어간다. 컴포넌트 만들기는 입력, 디스플레이, 피드백, 네비게이션의 4가지 섹션으로 구분되어있다. 역할/목적에 따라서 분류하신듯 하다. 해당 섹션들끼리 만드는 방식, 필요한 요소들이 비슷해서 따라 만들기 쉬웠다. HTML의 input은 MDN에서 다음과 같이 정의한다(편의상 HTML의 정의를 가져왔으며 디자인 시스템에서의 의미는 다를 수 있다). 사용자로부터 데이터를 수신하기 위해 대화형 제어를 생성하는 데 사용되며, 버튼, 체크박스, 날짜, 이메일 등 포함된다.강의에서 제작하는 인풋 컴포넌트는 버튼, 체크박스, 라디오 버튼, 스위치 버튼, 텍스트 필드, 텍스트 상자, 셀렉트다. 그중 제작할 때 궁금한 사항이 있었거나 덧붙일 말이 있는 컴포넌트만 따로 글을 쓴다. 버튼버튼은 많이 보고 제작해서 잘 알고 있다고 생각했는데 아니었다. 더 공부해야겠다.❓ 버튼을 제작하던 중 destructive의 역할이 궁금해져 찾아봤다. Apple Developer에 따르면, destructive button은 사용자 데이터를 삭제하거나 되돌릴 수 없는 작업을 수행하는 버튼이다. destructive button은 모양을 통해 사용자가 버튼을 탭할지 클릭할지 신중하게 고려해야 함을 나타낸다. 예를 들어 SwiftUI는 빨간색 배경을 사용하여 수정자와 함께 추가하는 destructive button을 제공한다. 버튼은 경우의 수가 많아 더 세부적으로 분류하는 것을 추천한다고 하셨다. 아래는 Polaris Components 의 버튼 컴포넌트다. 컨트롤 그룹(체크박스, 라디오버튼, 스위치)컨트롤 그룹도 버튼과 마찬가지로 안다고 생각하고 쉽게 만들지 말고 더 주의를 기울여서 제작해야 한다.❓ 컨트롤 그룹(Control Group)이라는 단어는 어디서 온건지 궁금해져서 찾아봤다.M2는 Selection controls라고 Checkboxes, Radio buttons, Switches 를 묶어서 말하고 용도는 다음과 같이 정의한다. "선택 컨트롤을 통해 사용자는 선택사항 선택, 설정 켜기 또는 끄기 등의 선택사항을 포함하는 작업을 완료할 수 있습니다. 선택 컨트롤은 사용자에게 의사 결정을 요청하거나 설정 또는 대화 상자와 같은 기본 설정을 선언하는 화면에서 찾을 수 있습니다."jQuery 에서는 form controls를 Controlgroup라 말한다.chatGPT3.5가 말하기로는, 비슷한 목적을 가지고 사용되는 요소들이라서 같이 묶이는 것이라 한다. 5. 디스플레이(Display) 컴포넌트 만들기디스플레이 컴포넌트는 데이터를 표시하는 컴포넌트를 말한다. 강의에서는 아바타, 아코디언, 뱃지, 툴팁, 구분선, 칩, 카드, 테이블을 다룬다. 그 중에서 툴팁, 구분선, 테이블만 따로 이야기한다. 툴팁툴팁의 포지셔닝이 재밌어서 더 찾아봤다. 아틀라시안에서는 다음과 같이 사용한다. 구분선구분선을 만드는 방법은 두 가지가 있다. frame, stroke. 각자 장단점 있으나 강의에서는 strokes 로 제작한다. 여기서 Auto Layout -> Storkes -> Excluded를 Included 로 변경하면 strokes 제작시의 단점이 많이 줄어든다! 테이블회사 특성상 테이블 만드는 일이 많은편인데 기본적인 가이드를 잘 제시해줘서 큰 도움이 되었다. 이 부분은 미션에서 후술한다.❗ Carbon Design System v11 의 테이블을 찾아봤는데, 헤더의 소팅을 세부적으로 분류하여 참고하기 좋았다. 또 강의에서는 column을 제작하는 방식으로 테이블을 구성했는데, 카본에서는 row로 제작하여 header + toolbar + row + pagination으로 조합하고 있었다. 이런 사례들을 더 찾아보는 것도 공부에 큰 도움이 될 것 같다! 🌟 컴포넌트 제작시 Tip강의에서 그때그때 이야기해주신 방법들인데 정리해두면 나중에 참고하기 좋을 것 같아 모아봤다.instance swap property 설정하기:이름짓기: 타 property와 겹칠 경우 → 를 앞에 추가하기이 부분은 디자이너마다 방법이 다를 듯하다. 이 방법은 이해하기 쉽고 간편해서 좋았다. 다른 디자인시스템에서 이런 부분까지 찾아본 적은 없었는데, 앞으로 눈여겨볼 것 같다. 👀어떤 값을 먼저 보여줄지 결정하기: Preferred values → 상황에 따라 다르게 설정여러가지 아이콘을 보여줄 경우 → 모든 아이콘 체크특정 아이콘만 보여줄 경우 → 해당 아이콘만 체크 ex. 바텀 네비게이션우선순위가 있는 경우 → 순서에 주의해서 체크 focus-ring 제작하기컴포넌트 제작하여 필요할 때마다 붙여넣고 Absolute positioning 하기❓ focus-ring 이란? 포커스 표시기(focus indicator, '포커스 링focus ring'으로 표시되는 경우가 많음)는 페이지에서 현재 포커스가 설정된 요소를 식별한다. 마우스를 사용할 수 없는 사용자의 경우 이 표시기가 마우스 포인터의 독립형 역할을 하므로 매우 중요하다. (출처: web.dev/스타일 포커스) 접근 가능한 WCAG 규격 초점 표시기 설계 가이드 : 포커스링을 찾아보다가 알게 된 아티클인데 잘 정리되어있는 것 같아 첨부한다! 다음에 이 글을 다시 볼 때 다시 읽을 수 있도록~ 여태껏 stroke로 작업해왔는데..🫠....... 내가 이해하고있는 포커스의 개념과 달랐어서 거기서부터 놀랐다. 아직 배울 것이 많다! Absolute positioning 크기 상위 레이어와 같이 조정되도록 설정하기: constraints → Left and right, Top and bottom내부 인스턴스 가져오기 : properties → nested instancesicon placeholder 제작하기 : 임의의 '아이콘 플레이스홀더'를 넣어서 플렉서블하게 사용할 수 있도록 함. 크기를 자유롭게 조정할 수 있음.profile에 이미지 넣기 : Unsplash → portrait → style 지정 🎯 미션미션 5~8 의 결과물은 다음과 같다. 최대한 문서화하려 노력했다.미션 5 피그마 컴포넌트 기초 배우고 입력 컴포넌트 만들어보기미션 6 입력 컴포넌트 나머지 만들고 마지막 점검하기미션 7 디스플레이 컴포넌트 만들어보기미션 8 디스플레이 컴포넌트 나머지 만들고 마지막 점검하기1주차와 마찬가지로 항상 볼드님이 제작하시는 디자인 시스템을 최대한 따라서 만드려고 노력했다. 강의를 제작하시는 입장에서 최대한 표준적인 디자인 시스템을 만드셨을테고, 나는 그걸 배우는 입장이기 때문이다. 기초가 튼튼해야 나중에 회사에서도, 사이드 프로젝트에서도 응용할 수 있다! 예외가 하나 있었는데, 테이블이다. SI, 솔루션 기업에서 일해왔고 일하고있어서 테이블을 제작하는 일이 꽤 많다. 그래서인지 나도 모르게 관성적으로 디자인해왔는지 테이블 강의를 들으면서 굉장히 놀랐다. 효율적이고, 배리에이션을 만들기도 간편했다. 덕분에 신나서 몇 개 더 만들었다. 다만 소팅 헤더나 아이콘 버튼 등은 프로퍼티 활용 방법을 더 고민해봐야할 것 같다. 🌼 회고잘 한 점미션 따라가기에 급급했지만 그와중에도 나름대로 문서화를 했다.아쉬운 점월~수에 바빠서 미션 일정을 제대로 따라가지 못했다.보완할 점평소 플러그인 추천 글을 더 살펴봐야 겠다.컴포넌트를 공부할 때 실전에 필요한 것들만 급급하게 공부하는 단계를 넘어서야 한다. 시트에 적으면서 다른 디자인시스템들과 비교하는 등 그 이상의 공부가 필요하다. 또 컴포넌트 문서화 방법도 공부할 필요가 있다.다음주 계획미션 잘 따라가기강의 메모 잘 하기 flexible한 작업물을 만들려면.. inflexible하게 작업해야하나보다.😇 지금은 볼드님의 방법을 그대로 따라하는 중이지만, 실전에서는 네이밍 규칙 정하고, 문서화하고, 스타일이나 배리언트 점검도 스스로 해야 하니 "제대로" 디자인 시스템을 구축할 때 드는 공수가 정말 어마어마할거다. 처음 수강 신청할 때까지만해도 베리어블을 써서 컴포넌트 만드는 것! 만 생각했는데, 컴포넌트 만들 때 주의사항, 잘 만들기 위한 고려사항들까지 생각하게 됐다. 점점 발전하는 내가 보여서 기분이 좋다. 다음주에 배울 내용들이 기대된다.

UX/UI･워밍업클럽･피그마

[인프런 워밍업 스터디 1기 디자인] 1주차(스타일 가이드 만들기) 발자국

월요일부터 본격적으로 시작한 인프런 워밍업 스터디!나는 피그마 베리어블을 활용한 디자인 시스템 구축하는 강의를 선택했다! 이 강의를 선택한 이유현재 다니고 있는 회사에는 디자인 시스템이 없다. 없는 상태에서 일을 하다 보니 페이지마다 디자인들이 일관성 없이 만들어진 것을 보고 얼른 디자인 시스템을 도입해야겠다는 생각이 들었다…하지만 나는 디자인 시스템을 처음부터 구축해본 적은 없어서 강의를 알아보던 중에 인프런에서 워밍업 스터디를 한다는 것을 보았다. 때 마침 베리어블을 활용하여 디자인 시스템 구축 방법을 볼드 강사님의 피드백을 받으면서 배울 수 있는 강의가 있어 당장 신청했다! 1주차 강의 후기1주차 강의는 스타일 가이드 만들기이다.월요일은 피그마 베리어블과 디자인 토큰 / 디자인 시스템 개념 이해하기라는 이론 강의였다. 디자인 토큰과 시스템의 개념을 알고 스타일 가이드를 만드니까 더 이해하기 쉬웠다.화요일부터 실습 강의가 들어가는데 동영상만 봤을 때는 음 이 정도면 쉬워서 미션도 금방 끝나겠네! 하면서 목요일부터 두 개씩 해야지! (멈춰 이 좌식아..!) 하고 집에서 쉬었는데 그런 생각은 하지 말았어야 했다..목요일 퇴근 후 직접 피그마를 켜서 따라해보니까 생각보다 오래 걸리고 결국 미션을 하나 밖에 못 했다..😭그래서 미션이 밀려서 금요일부터 토요일 새벽까지 미션3까지 하고 잤다ㅎ.. 😮‍💨근데 여러 인터넷 강의들을 들어봤지만 이번 인프런 워밍업 스터디는 확실히 다른 분들과 같이 공부하다 보니까 학원 다니는 느낌이 들어서 너무 좋았고 무엇보다 볼드 강사님이 내 미션을 보고 코멘트도 해주셔서 너무 좋았다!! 인프런에서 만나기 전에 인스타에 좋은 디자인 정보들을 올려주셔서 팔로우하면서 일 할 때 참고 많이 했었는데 이렇게 실시간으로 피드백을 받으니 너무너무 좋았다!! 2주차 강의 목표2주차 강의 때는 자만하지 말고 매일매일 미션을 해야겠다는 생각이 들었다. 그래서 2주차 강의 목표를 새워본다면매일 미션 완수하기출근하면서 강의듣기일단 이렇게 2개를 목표로 완주까지 달려볼 것이다!!

UX/UI･워밍업클럽･디자인시스템･볼드･피그마･워밍업스터디

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국 및 회고

피그마 베리어블을 활용한 디자인시스템 구축 1주차 회고1주차 회고를 시작하려고 합니다.스타트업에서 1인 디자이너로 일하며 디자인시스템의 필요성을 절실히 느껴 처음으로 접근해보았던 디자인시스템,현재 약 3년차 프로덕트디자이너로 실무를 경험하며 '현재 내가 가장 모르겠고 자신없는 분야는 디자인시스템이다' 라는 나만의 약점을 이젠 강점으로 상쇄하고자 신청한 스터디였습니다.업무와 병행하다보니 초반참여가 어려웠는데, 하나하나 강의 수강을 완료하고디스코드,노션,PDF 등 다양한 자료와 동기부여,피드백을 적극적으로 해주시는 볼드 멘토님과 열정적인 멘티분들을 보며할 수 있는 만큼 최대한 임하자! 하며 진행했던 것 같습니다.한 주가 지나고 느낀바가 너무 커 이 부분 개선해 2주차에 접근하고자 합니다..1주차 느낀점오전시간 활용퇴근 후 수강은 피로도가 높아 집중하기 어려웠습니다. 출근 전 오전시간을 활용해 수강하고, 퇴근 후의 시간은 추가/보완 하는 시간을 가지면 좋을 것 같아요.미루기 금지! 대비할 것예측가능한 선에서 업무와 약속을 정리하고, 강의출석을 성실하게 하고싶다는 생각이 절실했습니다. 2주차 시작에 있어 다짐스타일가이드를 재수강 후 정리하며, 내가 좋아하는 구성의 파운데이션 구성하기멘토님이 정의하신 스타일 외에 나만의 스타일도 생각하며 만들기최대한 계획적으로 임하고 싶은데 변수가 없길 바래봅니다!스타일가이드 정리하다 뭔가 이상하다 싶어 수정할게 많아졌는데 그것보다 발자국 먼저 남기러 왔습니다ㅠ!볼드님도 멘티님들도 스터디 하는 모든 분들도 한 주 고생하셨고,다음주도 화이팅입니다!

UX/UI･인프런･디자인시스템･피그마･워밍업스터디

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

일주일간의 학습에 대한 회고커리큘럼을 따라 매일 아침 강의를 듣고 첫 주를 보냈습니다. 1주 차의 솔직한 후기는 '복습할 시간이 부족해 완벽하게 하지 못하는 내가 밉다.' 였습니다😭. 그럼에도 불구하고 이번 주 강의를 수강하고 모든 미션을 완수할 수 있었던 것은 디스코드에서 열정적으로 지도해 주신 볼드 멘토님과 끝까지 미션을 수행하는 멘티들 덕분이었습니다. 늘어나는 스레드를 보며.. 매일 피그마를 열 수 있었습니다💪💪. 앞으로 더 분발해서 끝까지 완수할 수 있도록 노력하겠습니다!일주일 동안 잘한 것아침마다 디자인 공부한 것: 오전마다 디자인을 공부하는 습관을 기를 수 있어서 좋았습니다. 회사를 가기 전에도, 간 후에도 강의를 들은 나. 매우 칭찬해.포기하지 않은 것: 하마터면.. 1주 차에 하차할뻔 했다..아쉬웠던 점기존의 스타일 가이드라인에 의존하는 것: 이번 수강을 통해 새로운 디자인 시스템을 구축할 수 있도록 하는 것이 제 목표인데, 어렵다고 느끼는 부분은 어느새 멘토님의 가이드라인을 그저 따라 하려 하더라고요. 혼자서 고민해 보고 디자인 시스템을 만들어 나가는 시간을 가져야겠습니다.복습시간이 적었던 점보완하고 싶은 점커뮤니티를 적극적으로 이용하기: 친절왕 멘토님의 활동을 보며, 다음 주부터는 멘토님에게 많이 질문도 하고, 워밍업 스터디를 적극적으로 활용해야겠다는 생각을 했습니다.복습을 저녁으로 미루지 않는 삶 액션 플랜rem에 대해 좀 더 이해하기회사 네이밍 엑셀 시트 구성(잊어먹었다..)가이드라인-컬러 부분 가독성 높이기: 읽기 쉽고 이해가 쉽도록 수정해야겠습니다.다음 주에는실습을 많이 해보는 방향으로 고쳐나가기1주 차 복습 잊지 말기: 컴포넌트가 잘 구성되려면 파운데이션이 잘 갖추어져 있어야 한다!!다음주 업무량이 많은데…잘할 수 있겠죠?😱 힘내라 다음주의 나!

UX/UI･워밍업클럽･디자인시스템･피그마

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

피그마 베리어블을 활용한 디자인 시스템 구축하기피그마 베리어블을 제대로 이해하고 ,사용하고 싶어서 이 강의를 듣게 되었다.하지만 몇달이 지나도록 진도율 5%.... 😭그러던 중 인프런 워밍업 스터디 1기를 모집한다는 공지를 보게되었다.강제성..그래 지금 나에게 필요한거야!소박하게.. 완주를 목표로....시작하게 되었다. [1주차 스터디 내용]베리어블로 디자인 시스템을 만들기 위해 색상/타이포/아이콘 등을 베리어블에 등록하는 내용이었다.색상 베리어블 계층 구조(primitive/semantic/theme)를 이해할 수 있어서 좋았다.아직은 초기 단계라 수업만 잘 들으면 미션을 하는데에 큰 어려움은 없었지만 다음주부터는 살짝 걱정이...😂그리고 미션하다가 막힐 때? 강의 요약본이 유용했다! [회고]커리큘럼대로 스터디하니..벌써 진도율 27% 달성!진도율 100%가 되는 그날까지...나 자신 화이팅! 🔥

UX/UI･워밍업클럽･피그마･디자인시스템

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

4주간의 프로덕트 디자이너 스터디를 마무리하며, 매주 새로운 도전과 배움의 기회를 마주했던 값진 시간이었습니다. 🥳여러 서비스 디자인을 직접 만들어보면서 실제 프로젝트에 적용할 수 있는 실용적인 팁들을 알 수 있었고, 페이지들을 구현하는 과정에서 컴포넌트를 활용해 효율적으로 서비스를 관리하는 방법에 대해서도 이해할 수 있었습니다. 아직 부족한 점이 많지만 이번 경험을 토대로 계속해서 성장해나가고 싶습니다.특히 마지막 주차까지 완주하면서, 처음에는 낯설게만 느껴졌던 개념들이 조금씩 제 것이 되어가는 과정을 경험할 수 있었습니다.💪📌배움배리어블 다크모드와 멀티 브랜드 모드 등록 후 활용법 B2C 이러닝 페이지 / 모바일 OTT 서비스 프로세스각 페이지 다크모드 버전 / 반응형 모드 제작 프로세스 타이포그래피 베리어블 등록하는 법배리어블을 활용한 프로토타입 만들기 📌미션다양한 서비스 화면들을 직접 구현해보면서 컴포넌트의 실질적인 활용법을 익힐 수 있었습니다. 특히 각 서비스의 핵심 기능에 맞는 UI 설계와 베리어블을 활용해 다크모드와 브랜드모드 전환, 반응형 모드를 구축해보면서 디자인 시스템의 확장성과 일관성을 유지하는 방법을 배울 수 있었습니다. 아직은 베리어블 활용이 완벽하지 않아 더 많은 연습이 필요하지만, 이번 미션을 통해 실무에서 활용할 수 있는 귀중한 경험들을 쌓을 수 있었습니다.❗이건 꼭 알아두자! ꙳꒰ ੭⑅•͈ ·̮ •͈꒱੭컴포넌트를 활용한 효율적인 서비스 구축 및 관리다크모드 및 브랜드모드 적용 및 활용법반응형 모드 적용하는 방법타이포그래피 배리어블 등록하기베리어블을 활용한 프로토타이핑 방법📌회고스스로 칭찬하고 싶은 점미션을 미리 완료하고 특강 전에 실무에서 적용할 부분들을 직접 적용해보았습니다.완전히 이해가 안된 부분은 반복해서 다시 시청하고 회사 디자인시스템 구축 시 놓친 부분들을 다시 수정 적용해보았습니다.사이드프로젝트에도 배리어블을 적극 활용해보기 위해 계속 연습해보았습니다.아쉬웠던 점특강 때 내용을 통해 배리어블을 활용한 프로토타이핑은 한 번에 이해가 되지 않아 미션4부터 어려움이 있어 아쉬움이 있었습니다.강의를 완강하고 디자이너가 왜 꼼꼼해야하는지 체감이 되었고 실무에서 그만큼 놓친 부분이 많았던 것 같아 아쉬움이 남았습니다.보완하고 싶은 점프로토타이핑은 평소에도 재밌어하던 주제였는데 배리어블을 활용한 프로토타이핑은 많이 어려움이 있었다보니 반복 학습을 통해 완전히 내것으로 만들어가고 있습니다. 강의와 미션을 하면서 깨달은 점 중 하나는 반복을 하면 결국 이해가 되고 내 것이 될 수 있구나 였기 때문에 다시 반복해보는 중이고 꼭 실무에 적용하려고 합니다🔥저번 특강 때도 알려주신 여러 디자인시스템을 분석해봐야할 필요성도 많이 느꼈습니다.앞으로의 계획완주를 해서 다음주 계획의 주제를 앞으로의 계획으로 변경 후 작성해보았습니다. 이번 강의들을 통해 배운 디자인 시스템을 기반으로 실무에서 활용할 수 있는 체계적인 컴포넌트 설계와 배리어블 구축 및 문서화 작업을 이어나가려 합니다. 특히 Figma의 다양한 기능들을 더 깊이 학습하여 효율적인 디자인 워크플로우를 구축하고자 합니다. 또한 프로덕트 디자이너로서 개발자와의 원활한 협업과 더 나은 사용자 경험 구현을 위해 HTML, CSS, JavaScript 등 프론트엔드 기술에 대한 학습을 시작하려 합니다. 이를 통해 기술적 제약사항을 이해하고 실현 가능한 디자인을 제안할 수 있는 디자이너로 성장하고 싶습니다.볼드님의 강의를 통해 디자인 시스템의 중요성과 실무에서 활용할 수 있는 다양한 인사이트를 얻을 수 있었습니다. 특히 베리어블 활용법과 같은 실질적인 스킬을 꼼꼼하게 알려주신 덕분에, 한 단계 성장할 수 있는 값진 시간이었습니다.🐾 진심으로 감사드립니다.😊

UX/UI･UXUI･피그마･프로덕트･디자인･볼드UX