블로그

조혜림

[인프런 워밍업 클럽 스터디 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/UIUI/UXFigma프로덕트디자인디자인시스템인프런인프런워밍업클럽스터디2기

조혜림

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

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

UX/UIUI/UXFigma프로덕트디자인디자인시스템워밍업스터디

조혜림

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

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

UX/UIUI/UXFigma프로덕트디자인디자인시스템워밍업스터디

채널톡 아이콘