[인프런 워밍업 클럽 스터디 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주 동안 스터디를 진행하시면서 많은 가르침을 주시느라 고생 많이 하신 볼드 선생님께 감사의 말씀을 올리며 마치겠습니다. 읽어주셔서 대단히 감사합니다😁

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

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

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

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

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

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

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

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