블로그 모아보기 - 인프런

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

0

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

인프런 워밍업 클럽을 참여하게 된 계기현재 작업 중인 프로젝트에 디자인 시스템을 적용해야 해서 관련 강의, 정보를 찾고 있는 상황이었는데,마침 메일로 인프런 워밍업 클럽 스터디 광고가 왔었고 나에게 딱 맞는 강의와 프로그램이라고 생각이 들어서바로 수강 신청하게 되었다.워밍업 클럽에 참가하는 데에 따로 참가 비용은 없고 연계된 강의를 구매하면 참가신청을 할 수 있었다!게다가 워밍업 클럽 참가 시 강의 할인 쿠폰도 적용 가능해서 합리적인 가격에 강의를 구매할 수 있었습니다 😄 강의를 들으면서..평소에 작업을 XD로 작업하다가 최근에 피그마로 갈아타게 됐는데 기능은 비슷하지만 단축키라던가 상세한 기능, UI는 다르다 보니 피그마로 작업하는 게 조금 감을 잡기 힘들었다. 특히 컴포넌트를 어떻게 활용해야할지 몰라서 항상 작업할 때마다 동일한 레이아웃과 컬러를 사용하는 요소여도 하나하나 만들다 보니 매번 시간도 많이 들고 번거로웠었는데 이번 강의를 수강하면서 컴포넌트 활용법에 대해서도 마스터하게 되었고, 새로운 UI와 배리어블이라는 기능에 대해서도 완벽 적응할 수 있었다. 워밍업 클럽 후기4주간 빡빡한 커리큘럼과 미션을 따라가느라 매일매일 예상했던 시간보다 많은 시간을 쏟아부어야 해서 조금 벅찬 감이 없지 않아 있었지만..😅그래도 혼자서 인터넷 강의를 들으면 자꾸 학습을 미루게 되고 강의에 포함된 실습도 안 하게 되는 경향이 있었는데인프런 워밍업 클럽을 통해 이를 극복할 수 있었다.실시간으로 강사님과 피드백을 주고받고 다른 수강생분들이 미션을 빠르게 제출하는 것을 보면서'나도 미션을 어서 끝내고 제출해야겠다!'는 동기부여가 강하게 돼서 4주라는 기간 동안 포기하지 않고 무사히 완주하였다.만약 다음에도 워밍업 클럽이 진행하게 된다면 꼭 3기도 참여하고 싶다!!강의와 스터디 모두 좋은 경험이었기 때문에 주변 사람들에게도 이런 고민이 있으면 한번 참여해보라고 추천하고 있다4주간 원활한 진행을 위해 고생하신 워밍업 클럽 운영진분들과 코치님께 너무 감사하다는 말씀드리고 싶습니다.감사합니다!! 🙇‍♂🙇‍♂

UX/UI･인프런･인프런워밍업클럽･스터디2기･프로덕트디자인･후기

0

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

지난 주 금요일 수료식으로 약 한 달 간의 인프런 워밍업 스터디가 막을 내렸습니다.우여곡절 끝에 그래도 끝까지 완주했다는 생각에 뿌듯하면서도 한편으로는 그렇게 치열하게 아등바등하며 달려온 하나의 목표가 마침내 끝을 맞이했다는 생각에 아쉬운 마음도 들었습니다.지금의 이런 벅찬 감정을 나중에도 되돌아볼 수 있도록 그리고 다음 스터디의 참석을 고민하시는 분들께 조금이나마 도움이 되었으면 하는 마음으로 이번 '인프런 워밍업 클럽 스터디 2기'를 되돌아보고자 합니다. 🙋‍♀️ 스터디에 참여하기까지 저는 현재 스타트업 기업에서 근무하고 있는 9년차 웹디자이너 겸 UI/UX 디자이너입니다. 웹 에이전시에서 4년 가량 근무하다가 현 직장에 웹디자이너로 이직했으나 점점 UI/UX 업무의 비중이 늘어나기 시작하더니 현재는 UI/UX 업무의 비중이 웹디자인 업무보다 훨씬 더 많아지게 되었습니다.웹디자인을 할 때에는 이전에도 그랬지만 지금도 여전히 포토샵이나 일러스트레이터와 같은 그래픽 툴이 불편하다는 생각을 해본 적이 거의 없었습니다. 그러나 UI/UX 업무의 비중이 늘어나면서부터 점점 포토샵에서 UI/UX 디자인 작업을 진행하는 일이 잦아졌고 작업량이 늘어나면 늘어날수록 체감하게 되는 불편함은 점점 더 커져갔습니다. 컴포넌트의 갯수가 늘어나면서 배치해야하는 레이어나 오브젝트의 갯수가 매우 많이 늘어났고 그 과정에서 형태가 동일함에도 레이어 하나, 오브젝트 하나 배치할 때마다 동일하고 반복적인 값을 매번 측정하고 배치해줘야 하는 불편함이 매우 컸습니다. 거기다 수정하다가 실수로 레이어가 움직인 파일을 미처 눈치 채지 못하고 복사해서 여러 페이지를 만들고 나중에서야 실수를 알아차리면 지금까지 작업한 페이지들을 전부 열어 하나하나 레이어를 수정해줘야 했습니다. 이런 불편함은 점점 가중되어 작업의 속도를 더디게 만들었고 이제는 작업 환경의 개선이 필요하겠다는 생각이 들어 스터디에 참여하게 되었습니다. 🤔 초보자가 생각하는 스터디의 난이도 스터디 이전에는 피그마를 배워보거나 경험해본 적이 없었고 이번 인프런 워밍업 클럽 스터디에 참여하면서 처음으로 피그마를 설치하고 배우게 되었습니다. 몇 년 전 피그마와 스케치, XD가 새로 출시되어 서로 경쟁하던 시절에 '포토샵을 다룰 줄 알면 이 세 가지 툴은 금방 익힐 수 있다'는 주변에 먼저 익힌 직장 동료들의 조언을 기억하고 야심차게 참여하였으나...출시 초창기의 피그마는 한 두시간이면 쉽게 익힐 수 있는 툴이었을지도 모르겠지만 몇 년 간 업데이트가 쌓이고 특히 배리어블의 등장 이후로는 제가 경험해본 바로는 단 몇 시간으로 금방 배울 수 있는 툴은 아니었습니다.그리고 본 스터디의 목적은 이렇게 저처럼 스터디에서 난생 처음 피그마를 다루는 사람에게 맞춰져 있지 않기 때문에 스터디에서 수강 하는 강의의 내용이 기능의 정의나 툴의 역할 하나하나를 설명하는데에 초점이 맞춰져 있지 않습니다. 따라서 처음 피그마를 경험하시는 분들에게는 스터디와 강의가 다소 어려울 수 있을 것 같습니다. 특히 올해 GUI3로 대규모 업데이트가 진행되면서 인터페이스의 변화가 매우 크게 발생하여 궁금한 점을 검색하더라도 이전 버전의 인터페이스로 설명해주는 정보가 많아 더더욱 프로그램에 적응하기 어려울 수 있습니다. 실제로 저 역시 상술한 이유로 1주차~2주차의 2주간 매우 많이 헤맸고 2주간 공휴일이 며칠 씩 있었음에도 공휴일과 주말 모두를 반납해서 겨우겨우 강의를 다 듣고 과제를 마무리할 수 있었습니다. 그래서 피그마를 한 번도 실행해본 적이 없는 분이라면 스터디에 참여하기 전에 피그마를 설치해보고 기본적인 툴의 기능이나 인터페이스와 메뉴를 꼭 익히고 스터디를 참여하시길 추천드립니다.제 생각에 피그마를 익히는데에 도움이 되는 관련 지식으로는 포토샵과 퍼블리싱에 대한 이해가 아닐까 싶습니다. 포토샵이나 일러스트레이터를 다룰 줄 아는 분이라면 툴 내의 기능이나 단축키가 유사한 점이 많아 툴에 대한 적응을 보다 수월하게 할 수 있을 것 같습니다. 또한 피그마에서 구조를 설계하는 방식이 퍼블리싱을 할 때 그리드를 설계하고 다양한 css 값으로 각 엘리멘트를 조절하는 방식과 유사하여 퍼블리싱에 대한 지식이 있으신 분들에게는 피그마 내에서 구조를 설계하고 레이아웃을 구현하는데에 보다 쉽게 적응하실 수 있지 않을까 싶습니다. ✨4주간 진행된 스터디에 대한 후기 ⭐⭐⭐⭐⭐비록 이번 스터디를 통해 피그마를 처음으로 접해보았지만 그럼에도 감히 후기를 남긴다면 '피그마로 구현할 수 있는 A부터 Z까지 모든 것을 다 경험해볼 수 있는 강의이자 스터디였다.'라고 남기고 싶습니다. 스타일과 배리어블의 개념 이해와 배리어블 등록, 다양한 기본 컴포넌트 제작, 제작한 컴포넌트와 베리어블을 활용한 레이아웃 구현과 서비스 페이지 제작까지. 강의와 스터디의 커리큘럼을 따라가다 보면 피그마를 통한 UI/UX 디자인의 가장 작은 단위부터 가장 큰 결과물까지 모든 과정을 경험해 볼 수 있었습니다. 개념 설명과 구현 방법은 강의에서 매우 자세하게 다뤄주시기 때문에 피그마가 아직 서툴고 익숙하지 않은 분들도 강의를 따라가다 보면 어렵지 않게 이해하고 구현할 수 있습니다. 또한 배리어블의 개념과 등록 역시 아주 상세하게 알려주시기 때문에 아직 배리어블을 접하지 않으셨거나 혹은 배리어블에 적응하지 못하신 분들에게도 본 강의와 스터디가 큰 도움이 될거라고 생각합니다.강의와 스터디의 커리큘럼 구성이 상술한 바와 같이 개념-컴포넌트-레이아웃-서비스 페이지 구현으로 이루어져 있고 이는 작은 단위에서부터 큰 결과물까지 점점 그 단위가 커지는 양상을 띄고 있어 수강생 입장에서는 점점 지식이 쌓이고 성장하는 것을 체감할 수 있었고 아울러 종래에는 서비스 페이지 구현을 통해 스스로의 성장을 시각적으로 확인할 수 있어서 매우 뜻깊었습니다.그리고 해당 스터디는 특강의 내용이 다른 데에서 쉽게 찾아보기 어려운, 정말 유용한 정보로 가득하여 특강만으로도 스터디에 참여할 이유가 충분하다는 생각이 들 정도였습니다. 실무에 당장 적용할 수 있는 정보 뿐만 아니라 디자이너로써의 역량을 향상 시킬 수 있는 기술을 배울 수 있는 특강이라 정말 의미 있는 시간이었습니다. 특히 프로토타입 특강의 경우 쉽게 찾아보기 어려운 수준의 구현까지 특강에서 배워볼 수 있어 보다 더 연습하여 체득하고 싶은 의지도 불태울 수 있는 시간이었습니다. 4주간의 스터디 시간이 이렇게 막을 내리게 되었는데 스터디는 끝이 났지만 이제 또 다른 시작점이라고 생각합니다. 아직은 부족한 점이 많기에 스스로 더 찾아보고 공부하면서 피그마를 다루는 능력도 키우고 포트폴리오도 피그마로 제작해볼 계획입니다. 무엇보다 이번 스터디로 가장 크게 배운 건 '안주하지 않고 새로운 것에 도전할 수 있는 힘'이었습니다. 지금까지 배운 지식들을 토대로 현재에 안주하지 않고 보다 멋진 디자이너, 보다 유능하게 다른 팀과 커뮤니케이션 할 수 있는 디자이너가 되기 위해 노력해야겠습니다. 4주 동안 스터디를 진행하시면서 많은 가르침을 주시느라 고생 많이 하신 볼드 선생님께 감사의 말씀을 올리며 마치겠습니다. 읽어주셔서 대단히 감사합니다😁

UX/UI･UI/UX･Figma･프로덕트디자인･디자인시스템･인프런･인프런워밍업클럽･스터디2기

0

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

열심히 따라가다 보니 어느 새 스터디 마지막 주가 다가왔다. 이번 주에는 B2C 이러닝 페이지와 모바일 OTT 서비스 페이지를 구현해보는 과제를 수행하였고 토요일 특강 시간에는 프로토타입을 활용하여 다양한 인터렉션을 구현하는 방법을 배우는 시간을 가졌다. 금주에 배운 강의 내용은 다음과 같다. B2C 이러닝 페이지 제작지금까지 제작한 다양한 컴포넌트를 활용하여 이러닝 페이지 제작모드를 활용하여 브랜드 및 다크모드 적용배리어블을 활용하여 반응형 버전 제작엑셀 시트 연동 플러그인을 활용하여 데이터 연결지금까지 강의를 통해 제작한 다양한 요소를 조합하여 페이지를 제작하였다. 제작된 컴포넌트를 조합하면 쉽고 빠르게 페이지 디자인을 구현할 수 있고 여기에 설정해둔 모드를 적용하기만 하면 단숨에 지정된 색상 톤에 맞는 색상으로 변경이 가능하다. 모드를 통해 일일히 디자인 요소 하나하나를 수정할 필요 없이 클릭 몇 번만으로 자동으로 다른 스타일의 디자인을 구현할 수 있는 매우 높은 생산성을 경험할 수 있었다. 다만 페이지를 제작하다보면 자동으로 지정되는 #000이나 #FFF 값들을 확인하지 않고 다크 모드로 넘어가서 일부 컴포넌트를 일일히 수정하기도 했는데 이런 시행착오를 교훈 삼아 앞으로 실무에서 적용하거나 혼자 토이 프로젝트를 진행할 때에는 다크 모드로 변환하기 전에 확인하는 과정을 거쳐야겠다. 모바일 OTT 서비스 페이지 제작지금까지 제작한 다양한 컴포넌트를 활용하여 모바일 OTT 메인페이지와 컨텐츠 페이지 제작엑셀 시트 연동 플러그인을 활용하여 데이터 연결Movies & TV Shows 플러그인을 활용하여 이미지 데이터를 제작하고 컴포넌트로 활용모바일 OTT 서비스는 주로 다크모드만 제작되기 때문에 해당 페이지를 제작할 때에는 브랜드 모드만 활용하였다. 또한 모바일이 메인 디바이스인 만큼 반응형도 모바일과 태블릿만 제작하는 시간을 가졌다. 실제로 페이지를 구현하면서 컴포넌트 구조를 유연하지 않게 제작하여 수정을 거치거나 혹은 컴포넌트 자체를 새로 만드는 경우도 있었는데 이러한 시행착오를 겪으면서 페이지에 배치할 때 보다 유연하게 작동할 수 있는 컴포넌트 구조에 대해 고민할 수 있었다. 온라인 특강 : 배리어블 프로토타이핑 강의이 특강은 진짜 거짓말이 아니라 '이걸 내가 무료로 청강 해도 되는건가?' 라는 생각이 진지하게 들 정도로 너무나도 유용하고 어디서도 찾아보거나 듣기 어려운 강의였다. 선생님께서 사전에 구현해보고 싶은 프로토타이핑 인터렉션을 모집하셨고 그 중 3가지 예제를 구현해보는 시간을 가졌다. 다양한 인터렉션을 실제로 구현하는 방법을 배울 수 있는 점에서 굉장히 유익하고 도움이 많이 되는 시간이었다. 3가지 예제 중 앞의 1번째와 2번째는 기존 강의를 토대로 추가적인 프로토타이핑을 적용하는 과정이었다면 마지막 3번째 예제는 if와 else를 활용하여 보다 복합적이고 다양한 경우를 반영한 인터렉션을 구현하는 방법을 배울 수 있었다. 실무에서 다른 팀 뿐만 아니라 고객과 커뮤니케이션 할 때에도 보다 구체적인 구현 방향을 시각적으로 보여줄 수 있다는 점에서 많이 연습해서 내 능력으로 체득하고 싶은 욕심이 생기는 그런 기능이었다. 4주간의 스터디를 돌아보며그간 피그마를 배워야지 생각하면서도 차일피일 미뤄왔던 건 물론 개인적인 여러 일이 있었기 때문이기도 하지만 가장 큰 건 이미 경력자로써 현실에 안주했기 때문이 아니었나 하는 생각이 든다. 이제 피그마가 현업에서 표준화 되고 있는 지금에서야 배움을 시작하였지만 그럼에도 안주하지 않기 위해 노력했고 처음 다루는 툴에 버벅거리기 일쑤였지만 포기하지 않고 끝까지 완주했다는 점에서 정말 뿌듯하고 기쁜 순간이다. 그리고 금주부터는 근무 중인 회사에서도 내부 회의를 거쳐 피그마를 우선 적용해보기로 하여 업무에서도 피그마를 활용할 수 있게 되면서 디자이너로써 하나의 스킬을 익히고 활용해볼 수 있는 계기가 된 것 같아 매우 좋았다. 또한 선생님의 강의를 보면서 따뜻한 경력 속에 파묻혀 안주해왔던 나 자신을 많이 돌아보게 되었다. 선생님도 실무에서 많이 바쁘실텐데 과제 하나하나 꼼꼼하게 확인해주시고 거의 매주 특강까지 준비해주시는 열정을 보면서 나 역시 업무에서든 인생에서든 쉽게 안주하지 않고 발전하는 길을 찾아나가는 힘을 가진 사람이 되어야겠다는 생각을 많이 하게 되었다. 스터디는 이제 마무되지만 공부와 실습은 이제부터 본격적으로 시작이라고 생각한다. 아직 익숙해질 기능이 많이 남아 있고 모르는 기능도 많이 있어 어려웠던 부분은 강의도 다시 듣고 복습해보면서 더욱 발전해나가야겠다. 그리고 실무에서 피그마를 활용함과 동시에 퇴근 후 남는 시간이나 주말에는 토이 프로젝트도 진행해보면서 많은 경험을 해보고 거기서 실력을 늘려갈 수 있도록 노력해야겠다.

UX/UI･UX/UI･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

이번 주에는 네비게이션 제작과 다크모드 및 브랜드, 반응형 베리어블 모드의 개념을 이해하고 해당 데이터를 베리어블로 등록을 진행하였다. 또한 3주간 배운 내용을 토대로 쇼핑몰 관리자 페이지와 로그인 페이지를 제작하였다. 금주에 배운 강의 내용은 다음과 같다. 네비게이션 컴포넌트 제작링크, 브레드크럼 제작네비게이션 탭과 모바일 하단 네비게이션 제작페이지 네이션 제작헤더 제작사이드 네비게이션 제작이미지캐러셀 제작홈페이지에서 필수적으로 배치되는 다양한 네비게이션을 제작하고 이 네비게이션을 반응형에 맞추어 수정을 진행하였다. 네비게이션의 경우 디바이스 레이아웃에 영향을 많이 끼치는 컴포넌트이기 때문에 반응형에 대한 이해와 레이아웃 구조를 본격적으로 많이 고민하게 되었다. 처음에 반응형을 크게 고려하지 않고 제작했다가 다음 수업에서 가장 많이 수정 작업을 진행한 컴포넌트였다. 실무에서 활용할 때에는 네비게이션 제작할 때에부터 본격적으로 반응형 사이즈와 배치를 고려하여 네비게이션 레이아웃을 제작하여야겠다. 베리어블 개념 이해 및 실습다크모드 베리어블 개념 이해 및 활용브랜드 베리어블 개념 이해 및 실습반응형 베리어블 개념 이해 및 실습다중언어 지원 화면 구성1주차에 배웠던 베리어블에서 보다 심화하여 저장된 색상 베리어블을 다크모드와 브랜드로 구분하여 다양한 조합을 구성하는 방법을 배울 수 있는 시간이었다. 또한 반응형 베리어블을 구성함으로써 각각의 디바이스 별로 반응형 제작 시 필요한 다양한 수치를 변수화하여 디바이스에 맞는 데이터를 활용할 수 있는 방법을 배우고 실습하였다. 금주 수업 중 가장 많이 놀란 수업으로 베리어블을 구분하여 저장함으로써 클릭 몇 번으로 작업물의 다양한 테마를 변경하고 라이트/다크 모드로 변경할 수 있는 점이 정말 흥미로웠다. 다시금 피그마의 압도적인 생산성에 놀라고 실무에서 어떻게 활용하면 좋을 지 고민해보는 시간이 되었다. 조만간 타이포 베리어블도 업데이트 된다는 소식을 수업에서 들었는데 해당 업데이트로 얼마나 더 효율적일지 매우 기대가 된다. B2B 이커머스 어드민 페이지 만들기이커머스 어드민 페이지 제작다크모드 제작로그인 페이지 제작해당 수업부터는 지금까지 제작한 다양한 베리어블과 컴포넌트를 토대로 실제 페이지를 구성하고 제작하였다. 그간 제작한 베리어블이나 컴포넌트가 재료가 되어 필요한 지점에 유연하게 활용할 수 있어 매우 흥미로운 시간이었다. 또한 피그마를 활용하면 현재 내가 작업하는 환경에서 소모되는 시간보다 훨씬 적은 시간으로 다양한 페이지를 구성하고 쉽고 빠르게 수정할 수 있었다. 금주에는 공휴일이 아예 없어서 다소 걱정했는데...안타깝게도 다른 일정까지 바빠지는 바람에 시간이 매우 촉박하였다. 거기다 이제 젊은 나이가 아니다보니 욕심에 비해 체력도 잘 안따라줘서 진행이 쉽지 않음을 다시금 느끼게 되는 한주였다. 3주차를 돌아보며 개선할 점과 보완할 점을 회고하고자 한다. 3주차 잘한 점그래도 어떻게든 과제를 이번 주 내에는 완료하였다.금주부터는 본격적으로 반응형 작업이 많아져 여러 차례 꼼꼼하게 테스트를 진행하기 위해 노력하였다.배운 내용을 활용하여 다른 스타일의 관리자 페이지 제작을 진행해보았다.금주에는 평일 오전에 이틀은 강의를 수강할 수 있었다.3주차 개선할 점새삼 나이가 느껴지는 한주였는데 3주차에 접어들며 시간도 촉박해지고 회사 업무도 많아지면서 체력적인 한계가 많이 느껴졌다. 공부하려면 체력부터 미리 길러둬야겠다는 생각을 했다...이번 주도 과제를 정해진 요일에 제출하지 못했다. 이제 마지막 한 주가 남았는데 최선을 다해보아야겠다...!

UX/UI･UX/UX･Figma･프로덕트디자인･디자인시스템･워밍업스터디

0

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

일주일 동안 학습한 내용이번 주에는 그동안 만들어 본 배리어블과 컴포넌트를 활용하여 B2B 이러닝 페이지와 모바일OTT페이지를 만들어보았다.토요일에는 중간점검 겸 특강이 진행되었는데 특강에서 배리어블을 활용하여 프로토타이핑하는 법을 배웠다.약간 코딩의 개념도 들어가서 조금 어렵긴 했지만 배리어블로 이렇게 다양하게 활용을 할 수 있단 점이 너무 신기하고이런 내용은 볼드님의 프로덕트 디자인 강의가 아니고서는 어디서도 배울 수 없는 거라고 생각했다.잘한 점중간에 포기하지 않고 끝까지 달리려고 노력한 것과 특강에 빠짐없이 참여해서 새로운 내용을 학습한 것 아쉬웠던 점이번주는 일정이 있어서 미션과 강의 학습이 조금 미뤄졌다..🥺 회고혼자서 강의를 수강했다면 끝까지 미루고 미루다가 결국 제대로 공부하지도 못했을 텐데이렇게 워밍업 클럽을 통해 미션을 제출하고 피드백을 주고받으면서 꾸준히 학습해나갈 수 있었고4주라는 기간 동안 알차게 강의 하나를 완강해서 너무 좋았다!

UX/UI･워밍업클럽･프로덕트디자인

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

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

일주일 동안 학습한 내용이번 주에는 네비게이션 컴포넌트를 만들어보고 모드를 활용해서 다크모드, 반응형 디자인, 다중 언어 화면을 만드는 방법을 배웠고 그동안 배운 내용을 토대로 이커머스 어드민 페이지를 만들어보았다. 잘한 점미션을 포기하지 않고 끝까지 수행하려고 노력한 것 아쉬웠던 점이번 주에는 일정이 있어서 미션이 조금 밀려가지고 제출을 늦게 했다..🥺 다음 주에는미션을 커리큘럼 일정에 맞게 제출하기!!완강까지 포기하지 말고 끝까지 달리기🏃‍♂🏃‍♂

UX/UI･프로덕트디자인･워밍업클럽

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기] 프로덕트 디자인 3주차 발자국

[3주차 강의 내용 요약]이번주는 마지막 컴포넌트인 네비게이션 컴포넌트를 만들고, 배리어블 모드를 활용하여 기존에 만들었던 컴포넌트에 다크모드를 적용하는 방법과 멀티 브랜드 구현 방법, 반응형 디자인 적용 방법, 다국어 지원 방법에 대해 배워보았다. 또한, 만들어진 컴포넌트와 배리어블 모드를 활용하여 B2B 이커머스 어드민 페이지까지 제작해보는 시간을 가졌다. 1) 네비게이션 컴포넌트(Navigation Component) 만들기텍스트링크(Link), 브레드크럼프(Breadcrumbs), 네비게이션 탭(Tabs), 모바일 하단 네비게이션(Bottom Navigation), 페이지네이션(Pagenation), 사이드 네비게이션(Side Navigation), 헤더(Header), 캐러셀(Carousel) 2) 배리어블 모드 활용 방법[1] 다크모드 전환, 원리 배우기다크모드 : 빛을 덜 발산해서 배터리 절약, 저시력자의 경우 다크모드 선호몰입형 미디어 보기를 지원하는 UI의 경우, 영구적 다크모드 사용(회사에서 다루는 콘텐츠, 상품에 따라 선택!)단순히 라이트 모드 색상 체계를 반전하는 것 XX -> 브랜드 아이덴티티와 접근성을 항상 고려해야 함!!'계획 - 실행 - 테스트 및 무한 수정'의 방식으로 고쳐가는 것이 중요 [2] 브랜드 구조와 모드를 활용한 멀티 브랜드 구현다양한 브랜드 구조가 있고, 유형별로 다른 브랜드 전략을 사용통합 브랜드 형식의 멀티 브랜드 구현을 위한 배리어블 모드 제작동일한 파운데이션으로 브랜드 색상(Theme 색상)만 다르게 제작해보기 [3] 디바이스별 반응형 디자인 구현데스크탑, 태블릿, 모바일 화면에 따라 배리어블 모드 제작Break point, padding, margin 등 다양한 요소 적용 가능헤더나 사이드 네비게이션 등 디바이스에 따라 컴포넌트 타입도 다양하게 변경할 수 있음 ! [4] 다중언어 지원 화면 구현(영어, 한국어, 아랍어 등등)시장 개척 및 점유율 확대, 사용자 적용성 등 글로벌 시장이 목표라면 중요한 부분글로벌라이제이션(웹 접근성 등), 로컬라이제이션(지역, 문화에 따른 다양성) 적용언어별 읽는 방향, 쓰는 방향 변경 가능 우선 배리어블 모드를 활용해서 다크모드, 반응형 디자인 등 웹/앱 디자인에서 중요한 부분을 생각보다 쉽게 해결할 수 있다는 게 놀라웠다. 기존에는 이런 부분을 다 따로 따로 적용할 생각을 했었던 나의 무지함에 지금이라도 이렇게 배워가서 다행이라는 생각도 들었다..😅 그리고 분명 잘 만들었다고 생각했던 컴포넌트들이 모드가 먹히지 않는 부분들이 있어서 로컬 컴포넌트를 찾아가보니 내가 색상을 잘못 설정하는 등등의 실수가 있어서 역시 디자인 시스템을 만들 때는 테스트와 무한 수정의 과정이 꼭! 필요한 부분이구나를 다시 깨닫는 순간이였다..ㅎㅎ 파운데이션부터 시작해서 이제는 내가 만든 컴포넌트로 실제 페이지까지 디자인해보니 신기하면서도 재밌었지만 벌써 강의가 거의 끝나감에 아쉬운 마음이 들기도 했다. 요즘 볼드님의 강의를 들으면서 디자인 시스템에 대한 필요성과 효율성에 대해 크게 느끼고 있어서 계속 공부하고 싶어서 우선은 내가 기존에 작업했던 디자인 작업물을 토대로 디자인 시스템을 제작해보면서 익숙해져봐야겠다! [이번주 회고]스스로 칭찬하고 싶은 점이번주도 계획에 맞게 강의를 듣고 미션을 수행하였다.기존에 디자인했던 작업물들을 피그마로 수정해보면서 강의에서 배웠던 내용도 함께 적용해보고 있다.auto layout에 대해서 기존엔 헷갈리는 부분이 많았는데 작업을 하면서 많이 익숙해진 것 같다! 아쉬웠던 점, 보완하고 싶은 점이제는 강의를 듣고 미션을 따라해보는 것에서 그치지 않고 내 작업물로 디자인 시스템을 구축해보면서 계속해서 경험을 쌓아야겠다고 생각했다.다크모드에 색상 적용하는 부분에서 생각보다 많은 시간을 보냈던 것 같다. 특히 다크모드 반영시에 접근성의 중요하다는 것을 뼈져리게 느꼈다 ㅠㅠ

UX/UI･UX/UI･프로덕트디자인･디자인시스템･피그마･Figma

0

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

일주일 동안 학습한 내용1주 차에서는 디자인 시스템과 배리어블의 기본개념에 대해서 배웠다면 이번 주차에서는 입력, 디스플레이, 피드백 컴포넌트를 만들어보았고 중간 점검 특강을 통해 ChatGPT를 활용한 디자인 시스템 문서화에 대해서 배울 수 있었다. 잘한 점미션을 제시간에 수행한 것하루 목표량을 미루지않고 공부한 것 아쉬웠던 점중간중간 모르는 부분이 있어서 헤맸는데 스스로 해결점을 찾을 수 있었다면 좋지 않았을까 다음 주에는미션 수행과 강의 수강을 미루지 않고 목표량까지 학습하기

UX/UI･프로덕트디자인･워밍업클럽

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주차 발자국

이번 주부터는 본격적으로 피그마를 활용하여 다양한 컴포넌트를 제작하였다. '컴포넌트' 의 정의가 '재사용이 가능한 독립된 모듈' 이라는 점에서 컨텐츠 내에서 실제 사용 시 확장성과 범용성을 고려해야 했으며 컴포넌트끼리 활용할 때에도 결합 또는 조합이 가능한 구성에 대해서 배울 수 있는 시간이었다. 금주에 배운 강의 내용은 다음과 같다. 입력 컴포넌트버튼, 체크박스라디오버튼, 스위치버튼라벨과 컨트롤 그룹텍스트 필드와 텍스트 상자셀렉트입력 폼과 같이 데이터 입력이 필요한 페이지 또는 컨텐츠에서 매우 자주 활용되는 입력 컴포넌트를 제작하였다. 입력 컴포넌트는 이후 디스플레이나 피드백에도 자주 활용되기 때문에 디자인 일관성을 고려하여 범용적인 디자인으로 설계할 필요성이 있었다. 또한 컴포넌트 제작 시 테스트의 중요성을 깨닫게 된 시간으로 텍스트 내용을 길게 쓰거나 컨텐츠의 가로, 세로 영역값을 넓히거나 줄이는 등의 테스트를 진행해보면 틀어지거나 깨지는 등의 문제 상황을 자주 확인할 수 있었다. 다른 컴포넌트와 결합하여 사용하는 빈도가 많은 컴포넌트인 만큼 테스트를 꼼꼼하게 진행하여야 추후 다른 컴포넌트 제작 진행 시 시행착오를 줄일 수 있겠다. 디스플레이 컴포넌트아바타, 아코디언, 뱃지, 툴팁, 구분선칩카드, 테이블테이블이나 카드 게시판 내에서 시각적인 정보를 전달하는 컴포넌트를 제작하였다. 디스플레이 컴포넌트에서 제작한 컴포넌트를 조합하여 카드나 테이블과 같은 테이블을 쉽고 빠르게 제작 또는 수정할 수 있어서 다시 한 번 피그마 기능의 우수함을 느끼게 된 시간이기도 했다. 디스플레이 컴포넌트를 조합하면서 부터 본격적으로 다양한 컴포넌트를 조합할 필요성이 커졌는데, 이는 컴포넌트 조합 시 상위 프레임 또는 그룹의 오토 레이아웃에 대한 이해를 요구하였다. 오토 레이아웃 설정 시 선택할 수 있는 옵션은 다음의 세 가지가 있다. fixed가로 또는 세로에, 혹은 가로와 세로 모두에 고정적인 값을 부여. 부모 영역의 값을 확장하더라도 자식 영역의 값이 fixed라면 값이 변하지 않음.hug해당 요소가 보유한 컨텐츠 값에 해당하는 가로 또는 세로 값을 인식하여 값을 부여.hug로 설정된 경우 텍스트 내용을 처음 설정보다 더 길게 쓰더라도 유연하게 내용에 맞게 가로 값이 변화함. fill부모 영역의 값을 인식하여 해당 크기에 맞게 자식 영역의 값을 맞추어 늘리거나 줄임.자식 개체가 여러 개인 경우 부모 영역의 값을 기준으로 1/n 만큼의 값을 각각 가져감. 피드백 컴포넌트알림(경고) 메시지토스트스켈레톤 로더와 로딩 스피너프로그레스 바슬롯 컴포넌트와 모달사용자에게 알림, 로딩 등과 같은 다양한 상호작용을 하는 컴포넌트를 제작하였다. 사용자가 예상지 못한 상호작용이 발생할 수 있는 컴포넌트인 만큼 해당 컴포넌트를 제작할 때에는 사용자의 편의성과 경험을 고려해야 할 필요성이 높아졌다. 또한 컴포넌트 내에 스켈레톤 또는 스피너 애니메이션을 제작함으로써 개발자와 해당 컴포넌트에 대해 공통된 이미지와 기능을 구체화하고 공유할 수 있게 됨과 동시에 예기치 못한 상황에 대기를 해야하는 유쾌하지 않은 상황에 사용자의 불쾌감을 낮추고 보다 긍정적인 경험을 제공하는 방법을 배우는 시간이 되었다. 온라인 특강 : 챗GPT를 활용한 디자인 가이드 제작다양한 기업에서 활용하는 디자인 가이드를 확인해보고 여러 디자인 가이드 중 공통된 내용을 분석하며 이를 기반으로 챗GPT를 활용하여 쉽고 빠르게 디자인 가이드를 제작하였다. 디자인 가이드의 내용이 방대한 만큼 일일히 하나하나 작성하기에는 작업량이 방대한데 챗GPT를 활용하여 제작하게 되면 직접 제작하는 방식보다 훨씬 수월하고 효율적으로 디자인 가이드를 제작할 수 있었다. 금주에는 수요일에 공휴일이 있었음에도 불구하고 강의를 듣고 과제를 수행하는 데에 예상보다 시간이 훨씬 많이 소요되어 과제를 제 시간에 한 번도 제출하지 못하였다...🙄 쉽지 않았지만 본격적으로 컴포넌트를 제작하고 조합하면서 제작할 수 있는 범위가 확장되었던 2주차를 돌아보며 개선할 점과 보완할 점을 회고하고자 한다. 2주차 잘한 점예상한 시간보다 훨씬 많은 시간이 소요되어 심리적으로 초조해졌지만 처음 배우는 초심자에게는 빠르게 가는 것보다 (어차피 빠르게 갈 수도 없지만) 느리더라도 꼼꼼하게 배우는 게 맞다고 판단하여 강의를 수강하면서 중간중간 강의를 멈추면서 선생님께서 작업하신 내용을 따라하고 강의를 다 듣고 난 이후에도 시간을 할애하여 배운 내용을 다시 복습해보았다.테스트의 중요성을 인지한 이후부터 텍스트를 길게 써보거나 컨텐츠 영역 값을 줄이고 키우고 하는 등 테스트를 여러 번 진행해보았다. 테스트를 진행하다 보니 문제 상황에 자주 부딪혔고 이를 해결하는 과정에서 오토 레이아웃에 대해 이전보다 많이 이해할 수 있게 되었다. 제시간에는 한 번도 제출하지 못했지만...그래도 이번 주에 어떻게든 미션을 다 완수하였다.2주차 개선할 점미라클모닝...을 하루도 못했다. 돌아오는 주에는 일찍 자고 일찍 일어나서 오전에 강의를 꼭 수강해야겠다.과제를 제시간에 한 번도 제출하지 못했다. (진짜 이렇게 될 줄은 상상도 못했다...) 여러 가지 이유가 있었겠지만 이제 피그마에 많이 익숙해졌으니 3주차에는 시간 계획을 더 철저하게 하여 과제를 미리 진행할 수 있도록 해야겠다.

UX/UI･UI/UX･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

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

인프런 워밍업클럽 2기 1주차나는 이 강의를 사놓고 디자인시스템에 대해 정복하리라 마음을 먹었지만,계속되는 건강 문제로 미루게 되어 속상하던 찰나에 워밍업클럽 2기 모집을 알고 다시 신청하게 되었다. 1주차때 배운 것피그마 베리어블과 디자인 토큰 개념미션 #1) 색상 베리어블, 간격, 타이포그래피, 아이콘 등록미션 #2) 그림자 효과, 반응형 기준점, 기타 베리어블 등록아쉬웠던 점강의를 너무 몰아서 본 것사실 나는 이론 부분은 기본적인 내용이고 이미 한번 확인한 내용이라 가볍게 생각했다.하지만 생각보다 꼼꼼하게 작업을 해야 되서 시간 지체가 있었다.단계적인 학습을 못한 것내가 주마다 해야 할 미션들이 있지만 매일 완수한다고 하면 주 3~4회 정도 되는 것 같다.나의 상황에 맞게 조금 더 작은 단위로 나누어서 미션을 꼼꼼히 수행해도 될 것 같다.그림자 효과 부분의 이해가 미흡한 점나는 그림자에 대한 강의 진행에 따라 그림자 베리어블을 제작했는데 완벽히 이해하고 완성한 것은 아니었다.물론 그림자 수치를 입력해 베리어블을 만드는 것은 수월했으나 그림자의 이론 부분을 더 숙지해야 한다.다음에 시도할 점과제를 할 수 있는 시간대 확보요즘 해야 할 일, 공부해야 하는 것들이 한꺼번에 겹친 시점이라 건강 유의 + 스케줄 정리가 필요하다.작은 단위로 나누어 미션 수행공유해주신 커리큘럼 스케줄을 보면서 개인적으로 원하는 대로 커스텀을 한 상태이다.보통 주 3~4회동안 미션 수행하는 것을 더 잘게 나누어서 몰아서 작업하는 것을 지양하고 싶다.

UX/UI･디자인시스템･UXUI･프로덕트디자인･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주차 발자국

현업에서 기획자나 퍼블리셔, 개발자, 영업자와 협업하다 보면 원활한 커뮤니케이션을 위해 디자인 작업 계획을 구체화하여 논의할 일이 종종 발생한다.고객사에서 구체적인 방향 제시를 원하는 경우나 일관된 디자인을 구현하기 위해 퍼블리셔나 개발자에게 세부적인 디자인 정보를 전달하기 위한 경우 등 다양한 이유에서 시각적인 디자인 정보를 구체적인 데이터 값으로 정리해야 하는 순간이 얼마든지 발생할 수 있다.지금까지는 피그마를 활용할 수 없었기 때문에 (사실 피그마에 이런 기능이 있는지 조차 알지 못했다.) 이러한 데이터 값을 엑셀이나 문서로 자료화하거나 포토샵으로 이미지로 정리하여 다른 팀과 협업을 하곤 했다.그러나 실제 프로젝트가 진행되는 과정 중에 디자인 요소의 값이 변경되는 경우는 매우 자주 발생하는데 그 때마다 문서나 이미지 자료를 수정하는 건 상당히 번거로운 일이다. 더욱이 수정이 필요할 때마다 수정한 자료를 다른 팀에 공유하고 확인을 요청하고 각 팀에서 그 때마다 자료를 확인해야 하는 건 더더욱 번거로운 일이다. 그래서 결국은 자료를 만들어 놓고도 수정과 배포는 미뤄두고 퍼블리셔나 개발자에게 디자인 수정 사항을 별도로 세세하게 적어서 보내는 방식으로 협업을 진행할 수밖에 없었다.프로젝트를 진행할 때마다 이와 같은 일이 반복되면서 보다 편한 방법을 찾기 위해 노력하고 자료도 더 보기 편하게 정리하는 등 고민과 노력을 기울여왔지만 이는 처음 자료를 만들 때에는 보다 나아진 방향으로 발전했으나 수정이 필요한 단계에서 발생하는 비효율성을 줄여줄 수는 없었다.그런데 피그마는 상술한 모든 번거로움과 비효율적인 작업들을 단번에 개선해줄 수 있는 '배리어블' 이라는 강력한 기능을 가지고 있었다는 것을 이번 주 강의를 통해 처음으로 알게 되었다. 이번 주에 강의를 통해 배우게 된 배리어블의 특장점은 다음과 같다. 피그마 배리어블 디자인 시스템의 특징UI/UX 디자인 작업에 필요한 다양한 디자인 요소를 데이터화 하고 각 요소 별로 구체적인 값을 저장할 수 있다.요소별로 저장한 값만 검색되도록 모아서 볼 수 있고 쉽고 빠르게 값을 수정할 수 있다.수치로 환산이 가능한 값이라면 얼마든지 배리어블로 등록이 가능하다. (간격, 마진 등)구분하여 정리한 디자인 값을 피그마에서 직접 확인할 수도 있고 PDF 자료로 변환하여 배포할 수도 있다.다양한 플러그인을 활용할 수 있어 쉽고 빠르게 디자인 시스템을 제작할 수 있다. 피그마 배리어블 디자인 시스템이 협업에 미치는 영향시각적으로 존재하는 디자인 요소를 수치화하여 팀 간 협업에 활용함으로써 표준이 되는 가이드라인 제공이 가능하다. 프로젝트 진행 중 빈번하게 발생하는 디자인 요소 수정 사항을 빠르고 유연하게 대응할 수 있다.디자인 요소를 계층별로 정리하여 디자이너 뿐만 아니라 협업의 대상이 되는 다른 팀에서도 쉽게 계층 구조를 이해할 수 있다.각 요소별로 기능을 부여하여 퍼블리셔나 개발자가 디자인의 의도 및 의미를 이해하기 수월하다. 최근 UI/UX 구인구직 게시글을 보면 피그마는 더 이상 우대사항이 아닌 필수사항이 되었다. 수업 시작한 지 한 주 밖에 지나지 않았음에도 피그마에서 제공하는 막강한 기능을 보면 왜 피그마가 필수인지 알 수 있었다. 필요성에 대해 절감한 지금, 이제 남은 건 강의를 열심히 수강하고 강의 내용을 반복하면서 숙달하는 일이 제일 중요하겠다. 이를 위해 지난 한 주를 돌아보며 배운 내용을 확인하고 개선점과 보완할 점을 회고하고자 한다. 1주차 강의 내용디자인 토큰과 디자인 시스템, 배리어블의 기본 개념색상, 간격, 타이포, 아이콘 등 배리어블 구성 및 등록컴포넌트 제작 세팅 및 버튼 컴포넌트 제작1주차 미션색상, 간격, 타이포, 배리어블 등록아이콘 배리어블 등록 및 그림자, 그리드 시스템, 반응형 기준점 설정1주차 잘한 점피그마를 난생 처음 다뤄보면서 엄청나게 헤맸지만 포기하지 않고 어떻게든 미션을 다 완수하였다.강의를 들으면서 중간중간 끊으면서 선생님이 강의에서 작업하신 내용을 따라하고 미션은 강의 수강 후 별도로 시간을 내어 다시 제작해보면서 처음보다는 툴에 많이 익숙해졌다.미라클모닝...을 그래도 반은 실천했다. 4일 정도는 오전에 평소보다 한 시간 일찍 일어나서 강의를 먼저 들었다.1주차 개선할 점스터디에 참여하면서 공부를 습관으로 만들고 싶었는데 한 주의 절반만 실행한 점이 아쉬웠다. 한 주간 실행하려고 노력해보니 일과 공부를 병행하는 게 쉽지 않았고 이를 위해서는 시간 관리가 상당히 중요했다. 2주차부터는 보다 효율적인 방향으로 시간을 관리하여 오전에 공부하는 시간을 늘려보아야겠다.강의를 수강하면서 배운 점을 별도로 정리해두면 반복적으로 복습할 때도 유용하고 블로그를 작성할 때도 도움이 많이 되겠다는 생각이 들었다.피그마를 처음 다루기도 하고 최근 피그마에 대규모 업데이트가 진행되면서 UI 가 매우 크게 변화하는 바람에 강의 내용을 따라가는데 시간이 훨씬 많이 소요되었고 과제 제출 시간이 늦어졌다. (선생님께서 공지사항에 강의 수강은 이전 버전으로 수강하기를 권장하셨으나 공지사항을 미처 확인하지 못했다. 다음에는 공지사항을 미리 잘 확인해야겠다.) 그래도 시간은 많이 들었지만 다행히 처음에 비하면 툴에 많이 익숙해졌으니 2주차에는 과제를 당일에 제출할 수 있도록 노력해야겠다.

UX/UI･UI/UX･Figma･프로덕트디자인･디자인시스템･워밍업스터디

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