블로그

수진

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

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

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

상은/Liane

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

 워밍업 스터디에 참여하게된 이유작년 여름, 배리어블 업데이트 이후 많은 사람들이 해당 기능을 필수로 알아야한다고 했지만토큰에 대한 개념이 부족하기도하였고, 기존에 사용하던 스타일을 통해서도 충분히 작업이 가능했기 때문에 쉽사리 사용하지 못했다.시간이 생긴 지금, 개념을 정확히 알고 배리어블을 사용해보고싶었다.인스타 팔로우하던 볼드님이 강의를 진행한다고 하셔서 바로 신청하게되었고 신청하길 정말 잘한 것 같다.강의를 보며 공부하면.. uiux 직군으로 이직하길 마음먹고 독학으로 피그마를 공부하던 시절과 함께 회사에 사수가 없어 혼자서 고군분투하며 작업하던 나날들이 떠오른다 .. ㅠㅠ 더 열심히 공부해야하는 이유가 늘 떠오른다.이직할때는 개념을 완벽히 이해하고 다양한 기능을 사용하여 더 빠르게 작업 할 수 있는, 스킬업이 되어있는 상태였으면 좋겠다.   기억하고 싶은 부분들색상 배리어블의 구조Primitive : 색의 원시값을 저장해 놓은 디자인 언어의 기본 값Theme : 시멘틱 칼라로 브랜드 모드를 적용하기 위한 목적Semantic : 시맨틱 칼라로 라이트/다크 모드를 적용하기 위한 목적색상 배리어블 등록시border의 색상은 text와 색상이 겹치기 때문에 색상이 살짝 빠진 색상으로 선택해준다. 스타일은 지우기 색상 배리어블 등록 후 적용하려보면, 스타일 목록과 함께 노출되기 때문에 원하는 색상을 찾을때 너무 복잡하기때문에 등록된 스타일은 지우는 것이 좋다.플러그인apply variables혹여나 배리어블을 적용하지 못했다면, 하나하나 눌러서 확인하지 말고 해당 플러그인을 사용하여 자동으로 적용시킬 수 있음styler한번에 text styles 등록 가능frameall선택한 layer들에 fram이 씌워짐색상이 있는 아이콘을 다른 아이콘으로 변경하는 경우, 전체 색상이 변하지 않는 이유A는 1개의 vector가 색상 1개만 먹히기 때문에 B의 2개의 vector중 1개만 색상이 변함[해결 방법]B의 vector를 union을 사용하여 하나로 만들어주면됨 ** 대신 이름은 동일한 이름으로 변경해줘야함합치기 전에는 stroke에 색상이 채워졌었는데, 합친 후에는 fill로 색상이 채워짐

UX/UI인프런워밍업스터디

yuri

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

 [인프런 워밍업 스터디 1기 디자인] 1주차 발자국실무에서 피그마를 사용하지만, 손에 잘 익지 않았었고 피그마 툴의 기능이 계속해서 업데이트되어부분적으로 공부를 해보아도 사용하지 않으면 잊어버리게 되어서개인 스터디 차원에서 피그마 툴도 공부하고 디자인 가이드를 더 체계적으로 알아가고자스터디에 신청하게 되었습니다.업무와 병행하다 보니 스터디에 대한 이해가 부족해서 과제 제출하며 실수를 여러번 하였는데,디스코드를 통해서 실시간으로 피드백 주셔서 틀린 부분을 인지하고 공부할 수 있었습니다.1주차 강의 수강을 통해 배운 것베리어블 기능을 활용해서 피그마에서 디자인 가이드를 관리하는 법다양한 플러그인을 활용해 디자인 가이드를 구축하는 법베리어블의 구조 네이밍 하는 방식과 규칙 등2주차에서 보완하고 싶은 점강의를 들었지만, 놓치는 부분이 있어서 강의를 다시 재수강 할 필요를 느꼈습니다.미션을 미리미리 해두어야 차후에 페이지 제작이 수월할 것 같습니다.강의를 따라하는 것에 그치지 않고 다시 활용하는 방식으로 실습해야 할 것 같습니다.강의가 초반 기초부터 응용까지 알차게 짜여있어서 수강하는 데 어려움이 없던 것 같고일일 과제와 회차가 정해져 있어서 동기부여도 되는 것 같습니다.스터디 하시는 분들 모두 한 주 고생 많으셨고 앞으로도 화이팅입니다! ✊✊

UX/UI워밍업스터디UIUX디자인디자인시스템

cynh K

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

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

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

조혜림

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

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

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

조혜림

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

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

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

조혜림

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

yuri

[인프런 워밍업 스터디 1기 디자인] 수료 후기

참여 계기혼자 프로그램을 공부하면서 항상 기한이 명확하지 않으면공부 텀이 늘어지는 단점이 있었기에 이런 점을 보완하고 싶어데드라인과 커리큘럼이 명확한 인프런 워밍업 스터디에 신청하여 피그마 툴에 대해 익숙해지고 베리어블 기능을 제대로 배우고자 참여하게 되었습니다. 참여 후기최소한의 룰 안에서 자발적으로 스케쥴을 지키며 강의 수강 및 미션을 진행하는 스터디 방식이었습니다.한 주의 마지막 주말에는 볼드쌤이 학생들의 질문사항의 답변이 되는 관련된 팁이나디자인 기초에 대한 전반적인 특강을 진행해주셔서 정말 유익 했었습니다.그리고 혼자 하는 것이 아닌 다른 수강생 분들과 함께하여 의욕도 생기고미션을 진행하는 작업 방식이 작업자 마다 차이가 있어서 그 부분에 보고 배울 수 있던 점도 많았던 것 같습니다. 퇴근 후나 주말에 몰아서 미션을 진행하여 겨우 완주 규칙은 달성했지만,스터디 기한동안 완강은 하지 못한 아쉬움이 있어 다음에 또 이렇게 온라인 스터디를 진행하게 된다면좀 개인 스케쥴에 여유가 있을 때 참여하여 아쉬움을 남기지 않고 싶다고 생각이 들었습니다. 한달이라는 긴 시간동안 가르쳐주신 볼드쌤과 강의와 미션 함께 달린 수강생분들 모두 고생 많으셨습니다! 🙌    

UX/UI디자인시스템워밍업스터디UI/UX디자인

yuri

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

[인프런 워밍업 스터디 1기 디자인] 4주차 발자국이번 주는 미션 마감 기한을 지키려고 잠을 줄여가며 노력했지만,진도가 더디게 나갔고 금주에 보완하고자 했던 목표에도 도달하지 못했습니다.결국 유예기간 동안 나머지 미션을 진행하게 될 것 같고 정해진 일정을 지키지 못했지만,천천히 미션을 하면서 배우는 것이 있었고 완주에 의미가 있다는 생각이 듭니다.4주차 강의 수강하며 좋았던 것 / 배운 것피드백 컴포넌트 파트에서 toast 팝업, 알럿 메세지, 프로그레스 바, 스켈레톤 로더 컴포넌트 제작하였고특히, 로딩 스피너와 스켈레톤파트는 애니메이션도 같이 제작하여 작업 과정과 완성본을 프리뷰하는 것이 재밌었습니다.스켈레톤 로더 컴포넌트는 그라데이션의 미세한 차이로 애니메이션 결과물이 다 다르게 나와서이와 비슷한 컴포넌트를 제작할 때는 컬러 조정이 중요하단 걸 배우게 되었습니다.네비게이션 컴포넌트 파트에서는 메인 헤더, 캐러셀 인디게이터, 바텀 네비게이션 등을 제작하였습니다.사이드 네비게이션을 실습할 때에는 작은요소들을 조합하여 평소에 자주 사용하던 SNS 컴포넌트를 비슷하게제작해 볼 수 있어서 재밌었습니다.특강에서 챗 GPT를 활용하여 컴포넌트 요소 제작 시, 고려할 것들에 대한 정보를 서치하는 방법을 배웠습니다.디자인 가이드를 읽는 작업자에 따라 중점적으로 다루어야 할 가이드의 내용도 바뀐다는 걸 알게 되었습니다.GOV UK 가이드의 상황별 컴포넌트 선택 가이드라인을 통해서 디테일한 부분까지 다룬 디자인 가이드를 확인 할 수 있었습니다. 피그마 활용법과 디자인 가이드를 같이 공부할 수 있는 강의 어서짧은 시간 동안 많은 것을 배울 수 있었고, 부족한 부분은 강의를 다시 보며 보충할 수 있을 것 같습니다.그리고 특강을 통해서 실무에 도움 되는 많은 지식 공유해주셔서 감사했고 유익하였습니다.디자인 시스템 강의를 바탕으로 사이드 프로젝트를 진행할 때도 도움이 많이 될 것 같습니다. ✊✊✊ 

UX/UI디자인시스템워밍업스터디UI/UX디자인

상은/Liane

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

  마지막 주의 수업은 시간가는지 모르고 작업했던 것 같다.지금까지 만들었던 컴포넌트들을 활용하여 서비스 화면을 제작하는 수업이었는데그동안 컴포넌트들을 만들면서 이부분은 왜 이런식으로 제작하는걸까? 라는 의문점이 있던 것들이 실제 화면에 적용하면서보니 아, 이래서 여기에 아이콘 영역이 들어갔던 거구나, 그래서 이 기능을 사용했던 거구나하면서 이해가 되었다.실 적용까지 해본 상태에서 다시 강의를 처음부터보면 설명하는 내용이 더 이해가되고 받아들여지는 부분이 훨씬 많을 것 같다. 강의를 처음부터 끝까지 한번 더 복습해야할 것 같다.  강의를 마무리하며강사님인 볼드님 덕분에 완강할 수 있었던것 같다. 공개된 강의도 너무 알차지만 피그마 업데이트 내용도 강의로 제작하여 꾸준히 업데이트 해주시고 특히 토요일에 진행해주신 스페셜 강의때도 열정이 어마어마하셨다.참여자들에게 좋은 정보를 알려주시기위해 많이 준비도 많이 해와주신 열정이 너무 감사했다.그 열정에 보답하기위해 나도 열심히 미션하고 강의를 보았다.워밍업 스터디를 참여하지않았더라면 2-3일에 한번씩 강의를 보았을터인데 참여하게되어서 꾸준히 볼 수 있었다.인프런 워밍업 스터디를 신청하기전까진 걱정이 많았는데 그런게 무색할정도로 참여하길 정말정말 잘한 선택이였다. 

UX/UI인프런디자인워밍업스터디

이삭토스트

[인프런 워밍업 클럽 스터디1기] BE 3주차 회고록

강의 수강10일차 - 객체지향과 JPA연관관계JPA를 사용하는 이유를 배우는 단계, 무려 연관관계와 지연로딩에 관한 내용이다.자바와 같이 JPA를 객체지향적으로 설계하기 위해 연관관계 매핑을 사용한다.처음에 N:1 과, 1:1, N:M,의 경우에 대해 배우게 된다. 더불어 참조 관계를 단방향, 양방향으로 보게되고 연관관계의 주인이라는 개념을 이해하기엔 복잡한 부분도 있었다.N:M은 문제가 N+1이라는 toString의 순환참조로 인해 재귀함수가 되는데 이 경우에는 N:M을 N:1, 1:1, 1:M으로 테이블 하나를 중간다리 처럼 생성하여 나누는 것이 좋은 것으로 알고 있다.그리고 트랜잭션을 사용하고 있을 때, 한 쪽만 연결 해두면 반대 쪽은 알 수 없기에 각각의 setter를 연결해주는 방법을 이용하여 서로 알 수 있게 해주는 방법에 대해서 알게 되었다.또한 Fetch 옵션이 최적화에 밀접한 영향이 있고, 항상 연관관계를 사용하는 것이 좋은 것만은 아니기에 장단점을 잘 따져보고 사용하는 것이 좋겠다!11일차 - 기본적인 배포를 위한 준비Github와 AWS를 이용하여 우리가 만든 라이브러리 앱을 직접 외부에서 사용해볼 수 있게 하는 단계이다.프로파일을 적용시켜둬서 우리가 개발단계와 배포단계에서 사용하는 설정들을 미리 해둘 수 있다.AWS은 우리가 흔하게 접하게될 사이트다 유료 사이트이지만, 프리티어 내에서는 1년동안 자유롭게 사용가능하고 특별하게 사고를 치지 않는 이상은 별도의 요금은 발생하지 않을 것이다.12일차 - AWS와 EC2 배포본격적으로 AWS와 EC2를 사용해보는 시간이다.EC2는 리눅스를 사용하는데 개발자 분들이 알아야하는 것 중 리눅스 명령어들을 직접 사용해보는 시간이었다. 근데 뭔가 사용하는 명령어들이 ls, cd, pwd, cd, rmdir... 맥에 있는 터미널과 비슷하다는 느낌을 받는다...? 이 부분은 나중에 리눅스 운영체제 사용해보면서 경험해봐야겠다.Github에 올려둔 코드들을 어떻게 EC2에 올리는지 궁금했었는데 git clone을 이용하여 저장소 주소에 있는 파일들을 받아오는 방법이었다. 리눅스 swap 하는 방법을 통해서 메모리가 부족할 때 디스크 자체에서 대신하는 방법들을 배웠다 우리에게는 메모리 스왑 방식이 좀 더 익숙하긴 한데 비슷한 방식인 것 같다.빌드를 하고 방화벽 설정을 하고 그리고 실행중인 서버를 중단하고, EC2 콘솔을 닫아도 백그라운드에서 작동하는 방법네이버나 구글처럼, 아이피를 치고 들어가는 것이 아닌 도메인을 이용하여 DNS을 적용하는 방법 13일차 - Spring Boot 설정, 버전업 이해하기우리가 사용하는 스프링과 스프링부트에 관하여 좀 더 알아보는 시간 스프링이 어떻게 현재까지 이어져왔고 스프링부트로 인해 스프링을 좀 더 쉽게 쓰게 되었다.추가로 Lombok의 사용법도 배우면서 보일로 플레이트 코드를 줄이고 좀 더 깔끔하게 쓰는 방법에 대해서 배우게 되었다.미션 - 미니프로젝트 1차 모든 것이 처음부터 시작하는 상황으로 돌아가는 상황이다.먼저 테이블과 객체 설계부터 들어갔다.롬복을 사용해서 좀 더 깔끔하게 코드를 만들 수 있었다. public class Team { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long teamId; private String teamName; @OneToMany(mappedBy = "team") private List<Member> members = new ArrayList<>();public class Member { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long memberId; private String memberName; private boolean isManager; private LocalDate hireDate; private LocalDate brithDay; @ManyToOne @JoinColumn(name = "team_id") private Team team; 팀 등록기능과 직원 등록기능은 꽤 간단한 편이지만팀 전체적으로 조회 기능과, 직원 전체 기능을 조회하는 것이 꽤 난이도가 있었다.서로 하나만 쓰는 것도 아니고 동시에 같이 쓰기에 이것을 어떻게 처리할 것인가가 관건이었고둘 다 Response를 리스트로 보내기 위해서 객체들을 가져와서 새로 객체들을 만들어 리스트로 묶어줬다.다행인건 과제에서도 비슷한 과제가 존재하였기에 그나마 만들 수 있었던 것 같았다.@Transactional public List<GetAllMembersResponse> getAllMembers() { List<Member> members = memberRepository.findAll(); return members.stream() .map(this::mapToGetAllMembersResponse) .collect(Collectors.toList()); } private GetAllMembersResponse mapToGetAllMembersResponse(Member member) { GetAllMembersResponse response = new GetAllMembersResponse(); response.setName(member.getMemberName()); response.setTeamName(member.getTeam().getTeamName()); response.setRole(member.isManager() ? "MANAGER" : "MEMBER"); response.setBirthDay(member.getBirthDay()); response.setWorkStartDate(member.getHireDate()); return response; }순식간에 많은 내용을 배우면서 이 내용을 어떻게 써야할지 갈피를 못 잡는 것 보다단계적으로 상위 과제를 주면서 미니프로젝트를 완성해가는 것이 뭔가 뿌듯하다.아직 4단계 까지 남아있으니까 2단계 3단계 점차 나아가면서 마지막 배포 단계까지 열심히 작성해봐야겠다!

백엔드백엔드워밍업스터디BE1기회고록

채널톡 아이콘