블로그

수진

[인프런 워밍업 스터디 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주차 발자국] Readable Code 적용기

인프런 ‘Readable Code: 읽기 좋은 코드를 작성하는 사고법’을 수강한 후, 작성한 내용입니다.📌 2주차 강의 (Readable Code)코드 다듬기주석의 양면성주석이 많다 ⇒ 비즈니스 요구사항을 코드에 잘 녹이지 못했나 의심해보자.추상화로 설명이 덜 된 것은 아닐까?주석에 의존하면 적절하지 않은 추상화 레벨을 가지게 된다.좋은 주석우리가 가진 모든 표현 방법을 총동원해 코드에 의도를 녹여내고, 그럼에도 불구하고 전달해야 할 정보가 남았을 때 사용하는 주석의사 결정의 히스토리를 도저히 코드로 표현할 수 없을 때, 주석으로 상세하게 설명!번수와 메서드의 나열 순서변수는 사용하는 순서대로 나열하자.인지적 경제성메서드의 순서는 객체의 입장에서 생각해보자.객체는 외부 세계와 어떻게 소통할 것인지가 중요공개 메서드의 스펙을 통해 외부 세계와 소통객체는 협력을 위한 존재외부 세계에 내가 어떤 기능을 제공할 수 있는지를 드러낸다.공개 메서드끼리도 기준을 가져보자.상태 변경 > 판별 > 조회 메서드중요한 것은, 나열 순서로도 의도와 정보를 전달할 수 있다는 것!패키지 나누기패키지는 문맥으로서의 정보를 제공할 수 있다.패키지를 쪼개지 않으면 관리가 어렵다.너무 잘게 쪼개도 안됨대규모 패키지 변경은 팀원과의 합의를 이룬 시점에!기능 유지보수하기객체 지향적으로 책임이 잘 분리되어 있다면,문제가 되는 위치를 발견하여 수정하기 쉽다!알고리즘 교체와 같은 작업이 수월하다!IDE 도움 받기코드 포맷팅sonarlinteditconfig리팩토링 연습스스로 리팩토링을 진행해보고 비교해보는 시간이유를 가지고 리팩토링을 진행하자.변경 포인트는 그 이유를 명확하게 설명할 수 있어야 한다!!감으로 하는 리팩토링은 설득할 수 없는 코드가 될 확률이 높다.객체에 메시지를 보내자.객체의 책임과 응집도를 고려하자.기억하면 좋은 조언들능동적 읽기눈으로 복잡하게 보고 이해하려 애쓰는 것보다 직접 경험해보며 읽자.복잡하거나 엉망인 코드를 읽고 이해하려 할 때, 리팩토링하면서 읽기공백으로 구분메서드와 객체 추상화주석으로 이해한 내용 표기하며 읽기핵심 목표는 도메인 지식을 늘리는 것.그리고 이전 작성자의 의도를 파악하는 것.오버 엔지니어링필요한 적정 수준보다 더 높은 수준의 엔지니어링구현체가 하나인 인터페이스아키텍처 이해에 도움을 주거나, 근시일 내에 구현체가 추가될 가능성이 높다면 괜찮음구현체 수정 시, 인터페이스도 수정코드 탐색에 영향을 준다.너무 이른 추상화정보가 숨겨지기 때문에 복잡도가 높아짐은탄환은 없다만능 해결사 같은 기술은 없다.객체 지향적인 체스 프로그램but, 체스는 500년 동안 변하지 않았다.실무 : 2가지 사이의 줄다리기지속 가능한 소프트웨어의 품질 VS 기술 부채를 안고 가는 빠른 결과물모든 기술과 방법론은 적정 기술의 범위 내에서 사용되어야 한다.도구라는 것은, 한계까지 사용할 줄 아는 사람이 그것을 사용하지 말아야 할 때도 아는 법이다.📌 2주차 강의 (Practical Testing)Intro강의 소개무엇을 학습하는가?테스트 코드가 필요한 이유좋은 테스트 코드란 무엇일까?실무에서 진행하는 방식 그대로 테스트를 작성해가면서 API를 설계하고 개발하는 방법구체적인 이유에 근거한 상세한 테스트 작성 팁어떻게 학습하면 좋을까?무엇을 모르는지 아는 것 = 찾아볼 수 있게 된다는 것선택과 집중을 통해 아는 영역을 넓혀가고, 익숙하지 않은 것들을 익숙하게 하고, 들어보지 못했던 것을 들으면서 나에게 노출시키자.인덱스를 통해 영역을 넓혀가자.테스트는 왜 필요할까?테스트 코드를 작성하지 않는다면,변화가 생기는 순간마다 발생할 수 있는 모든 Case 고려해야 한다.변화가 생기는 순간마다 모든 팀원이 동일한 고민을 해야 한다.빠르게 변화하는 소프트웨어의 안정성 보장 X테스트 코드가 병목이 된다면,프로덕션 코드의 안정성 보장 X테스트 코드 자체가 유지보수하기 어려운 짐잘못된 검증이 이루어질 가능성 O테스트를 통해 얻고자 하는 것 ⇒ 빠른 피드백, 자동화, 안정감따라서, 올바른 테스트 코드는자동화 테스트로 빠른 시간에 버그를 발견하고 비용을 절약한다.소프트웨어의 빠른 변화를 지원한다.팀원들의 집단 지성을 팀 차원의 이익으로 승격시킨다.단위 테스트수동 테스트 vs 자동화된 테스트콘솔에 찍힌 내용을 보고 판단하는 테스트최종 단계에서 사람이 개입해야 함다른 사람이 봤을 때, 무엇을 검증하고 어떤 것이 맞는 상황인지 알 수 없다.과연 이것이 자동화된 테스트일까?JUnit5로 테스트하기단위 테스트작은 코드 단위를 독립적으로 검증하는 테스트작은 코드 = 클래스, 메서드독립적 = 외부 상황에 의존적이지 않아야 한다.검증 속도가 빠르고, 안정적이다.JUnit 5단위 테스트를 위한 테스트 프레임워크AssertJ테스트 코드 작성을 원활하게 돕는 테스트 라이브러리풍부한 API, 메서드 체이닝 지원리스트 사이즈 검증할 때 다음을 이용하자..hasSize().isEmpty()테스트 케이스 세분화하기해피 케이스예외 케이스assertThatThrownBy()경계값 테스트범위, 구간, 날짜 등테스트하기 어려운 영역 분리하기생성 시간 검증에 대한 테스트에서 생성 시간을 메서드 내부에서 측정한다면?테스트하는 시간에 따라 테스트 결과가 달라진다.외부로 분리하자!외부로 분리할수록 테스트 가능한 코드는 많아진다.테스트하기 어려운 영역관측할 때마다 다른 값에 의존하는 코드현재 시간에 의존하는 코드외부 세계에 영향을 주는 코드테스트 하기 좋은 영역 (순수함수)같은 입력에는 항상 같은 결과외부 세상과 단절된 형태TDD : Test Driven Development프로덕션 코드보다 테스트 코드를 먼저 작성하여 테스트가 구현 과정을 주도하도록 하는 방법론RED → GREEN → REFACTORRED : 프로덕션 코드 없이 테스트를 먼저 작성GREEN : 테스트가 통과할 수 있는 최소한의 코딩REFACTOR : 테스트 통과를 유지하면서 구현 코드 개선기능 구현 후, 테스트를 작성하면,테스트 자체의 누락 가능성특정 테스트 케이스만 검증할 가능성잘못된 구현을 다소 늦게 발견할 가능성테스트를 먼저 작성하면,복잡도가 낮은, 테스트 가능한 코드로 구현쉽게 발견하기 어려운 엣지 케이스를 놓치지 않게 해준다.구현에 대한 빠른 피드백과감한 리팩토링테스트를 구현부 검증을 위한 보조 수단이 아니라, 테스트와 상호 작용하며 발전하는 프로덕션 코드을 만든다고 바라본다.즉, 객체 사용자 관점에서의 피드백을 준다!추가 인덱스애자일 방법론일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더하고 수정해나가는 방법익스트림 프로그래밍빠른 개발 속도를 유지하며 고객이 원하는 요구들을 지속적으로 피드백하는 방법의사소통, 단순성, 용기, 피드백, 존중하나의 방법론 : TDD스크럼, 칸반스크럼 : 스프린트라는 일정기간 안에 완료할 수 있는 작업으로 업무를 분할한다.칸반 : 동시에 개발이 진행될 수 있는 아이템의 수를 제한하여, 업무의 병목 현상과 리소스 낭비를 처리할 수 있도록 한다.테스트는 [ ]다.테스트는 [문서]다.프로덕션 기능을 설명하는 테스트 코드 문서다양한 테스트 케이스를 통해 프로덕션 코드를 이해하는 시각과 관점 보완과거에 경험했던 고민의 결과물을 팀 차원으로 승격시켜, 모두의 자산으로 공유DisplayName을 섬세하게비교음료 1개 추가 테스트음료 1개 추가하면 주문 목록에 담긴다.명사의 나열보다 문장으로테스트 행위에 대한 결과까지 기술하기비교특정 시간 이전에 주문을 생성하면 실패한다.영업 시작 시간 이전에는 주문을 생성할 수 없다.도메인 용어를 사용하여 한층 추상화된 내용을 담기메서드 자체의 관점보다 도메인 정책 관점으로!테스트의 현상을 중점으로 기술하지 말 것BDD 스타일로 작성하기함수 단위의 테스트에 집중하기보다, 시나리오에 기반한 테스트케이스(TC) 자체에 집중하여 테스트개발자가 아닌 사람이 봐도 이해할 수 있을 정도의 추상화 레벨 권장Given / When / ThenGiven : 시나리오 진행에 필요한 모든 준비 과정When : 시나리오 행동 진행Then : 시나리오 진행에 대한 결과 명시, 검증명확하게 표현하지 못한 테스트는 나중에 우리의 사고를 제한하는 허들이 될 수 있다!추가 인덱스JUnit전통적인 Java 기반의 테스트 프레임워크어노테이션 사용SpockGroovy 기반의 BDD(Behavior-Driven Development) 프레임워크BDD 스타일 테스트로 가독성이 더 좋다.Groovy 언어로 작성해야하므로 작성이 어려울 것 같다.📌 Day 7 미션 & 중간 점검 라이브Day 7 미션 : 변경 포인트는 그 이유를 명확하게 설명할 수 있어야 한다!Day 7 미션은 ‘스스로 스터디 카페 이용권 선택 시스템 리팩토링해보기’였다.미션 수행 전 강의를 들으며 내용들에 대해 거부감 없이 받아들여졌고, 빨리 코드를 짜보고 싶다는 생각이 들도록 하였다. 하지만 실제로 코드를 작성하면서 고민되는 지점들도 꽤 많았고, 근거를 가지고 리팩토링을 하는 과정이 쉽지는 않았다. ‘이게 더 나은거 같은데…?’하며 감으로 진행한 부분도 꽤 있었던 것 같다. 미션을 진행하고 강의를 수강하면서 ‘변경 포인트는 그 이유를 명확하게 설명할 수 있어야 한다.’라는 말이 내가 유의해야 할 말로 느껴졌다.중간 점검 라이브중간 점검 라이브는 Day 4 미션 공통 피드백, Q&A, 코드 리뷰 순서로 진행되었다.Day 4 미션 공통 피드백Day 4 미션 공통 피드백 다음과 같다.추출한 메서드에 static이 있는 경우boolean을 return 하는 메서드에 예외 throw오버 엔지니어링나도 메서드를 추상화하기 위해 추출하다보면, IDE에서 static 키워드를 붙여서 따로 지워준 적이 있다. 추출하여 메서드명만 적지 말고, 전체적으로 확인해보자.상태를 체크하고 boolean을 반환하는 메서드가 있을 때 예외를 던지는 것 보다 상황에 맞게 리팩토링 하는게 좋은 것 같다. validateOrder에서 false를 반환해서 유효하지 않은 주문을 나타내면 되지 않을까?미션의 안내 사항을 잘못 이해한 것 같다. Order의 내부 구현 없이 단순한 리팩토링을 제안하는 것이 요구사항이다. 그런데 나는 ‘Order의 메서드를 추가하더라도 구현 내용은 안적어도 된다.’라고 이해했다. 미션에서 요구했던 내용은 Order에 추가적으로 구현되는 사항 없이 리팩토링을 진행하라고 했던 것 같다.Q&AQ&A의 많은 내용들이 나에게 도움이 되었다. 다른 분들께서 질문해주신 내용들이 생각 외로 많은 인사이트를 얻을 수 있었다.질문하고자 했던 내용들이 다른 분 질문에 있기도 했고 개발 외 질문을 하고 싶어서 우빈님께 개인 취향의 저가 커피 브랜드 1순위와 선호하는 취향에 대해 여쭤보았다.우빈님께서는 저가 커피는 거의 안 드신다고 한다… 그래도 재밌는 영상을 추천해주셨다.항상 카페가면 필터 커피가 있으면 필터 커피를 먹어보거나 그 카페의 스페셜한 원두를 맛을 보려 노력하는데, 항상 먹고 나면 기억이 나지 않는다… ‘이게 어떤 맛이었더라..?’ 하게 된다. 이런 소소한 것에서 취미를 가지는 것도 재밌는 것 같다.코드 리뷰기간 내에 신청해서 우빈님께 코드 리뷰를 받을 수 있었다! 라이브 동안 다른 분 코드 리뷰 해주시는 것도 같이 경청하였는데, 생각보다 내가 놓친 부분들을 여기서 얻을 수도 있었다. 물론 내가 작성한 코드를 리뷰 해주신 것이 직접적으로 바로 와닿았지만, 다른 분 코드 리뷰에서도 배울 점이 있었다.다른 분 코드 리뷰를 해주시면서 퀴즈로 내신 부분이 있다. 퀴즈 내용은 간략하게 설명하면 ‘try-catch에서 예외를 throw했는데 왜 잡히지 않을까?’이다. 코드를 보여주셨을 때 문제가 없어보였다. 그래서 나는 ‘import가 잘못된거 아니야?’라고 생각을 해서 정답을 맞췄다!사실 미션 진행하면서 정말 유사한 문제를 겪은 적이 있었다. 분명 메서드 파라미터가 똑같은데 파라미터가 다르다고 컴파일 에러가 났었다. 미션 특성 상, 맨 처음 리팩토링 이전 패키지와 이후 패키지의 클래스는 똑같다. 그래서 리팩토링 패키지에서 import를 잘못하면, 다른 패키지의 클래스를 가져온다. 그래서 문제가 발생했었는데 이와 똑같은 문제라 운이 좋게도 맞출 수 있었다.영광의 흔적!!코드 리뷰 해주시는 것을 보며 내가 배운 점들은 다음과 같다.Enum의 valueOf 메서드를 통한 생성valueOf 대신 String을 받아서 객체를 생성하는 정적 메서드를 구성사물함 이용 가능 여부를 StudyCafePassType에 저장하는 부분도 좋음get/set은 관용적인 어구로 필드에 대한 getter/setter가 아니더라도, 메서드에 get~~, set~~ 으로 네이밍하는 건 지양하자.early return 보다 else-if가 더 배타적인 내용을 나타내지 않을까?if 절 내에 return을 봐야한다.구조화보다 적절한 책임의 분배가 더 중요하다.위 내용은 다른 분들의 코드 리뷰에서 내가 배운 부분들이다. 다음은 내가 질문하거나 리뷰해주신 내용이다.있을 수도, 없을 수도 있는 필드에 대한 관리를 어떻게 해야할까요?사물함 이용권을 별도 필드로 관리하고 EMPTY 객체를 넣는다? (내용이 정확히 기억이 나지 않는다….)PassReader - FilePassReader로 PassReader의 책임을 부여하고, File에 저장된 Pass를 읽는 구현체로 분리해도 괜찮을까요?괜찮은 접근인 것 같다.Order order = Order.create() 후, order.add(pass) 와 같은 형식으로 주문이후에 주문의 내용이 바뀔 위험성이 존재하므로, 만들어놓고 추가하는 것보다 마지막에 한 번에 Order 객체를 만드는 것이 더 안정적이다. 위험성을 제거하자. 가변보다 불변이 더 좋다!우빈님꼐서 약 1시간 45분동안 라이브를 진행해주셨다. 긴 시간동안 라이브로 진행한다는 것이 쉽지 않으실텐데, 덕분에 나는 유익한 시간을 보낼 수 있었던 것 같다! 직접적으로 우빈님과 소통할 수도 있고 내가 얻을 수 있는 인사이트도 챙겨 소중한 시간이었다. 처음에 말씀하셨던 ‘함께 자라기’를 위해 더 노력해야겠다.

백엔드워밍업스터디발자국클린코드테스트

[워밍업스터디3기][발자국][1주차] 읽기 좋은 코드

먼저, 느낀 점생각보다 1주차는 깊게 집중하지 못한 것 같다. 진도가 조금 밀리면서 듣긴 했지만강의도 열심히 듣고, 과제도 제출했지만 일방적인 학습만 했지, 이 과정을 돌아볼 시간을 못들였다. 이제 시작이니 2주차부터는 더 진심으로 달려보자. 다음, 배운 점이번주 가장 인상깊은 내용은 '섣부른 추상화'는 오히려 독이라는 것이다.예시로는 발성기관에 음을 붙여 하는 무슨 행위..를 하는 공간으로 '노래방'과 '지름방' 이라는 단어를 사용하는 두 화자가 나왔다. 지름방이라는 네이밍(추상화의 가장 중요한 요소중 하나!!) 을 한 사람도, 기존에 장황하게 쓰던 단어를 더 편하고 간결하게 쓰고 싶었을 것이다.다만 더 넓은 (다른 동네, 다른 도시) 범위의 사람들과 통하지 않는, 너무 코앞의 문제해결만을 위한 행위였다는 점이 의사소통의 실패를 가져온 것이 아닐까 한다.우리도 코드를 작성할 때, 중복되는 내용 또는 공통으로 필요할 내용을 리팩토링 하고 싶은 욕구가 생긴다.자주 쓰이는 값 (ex, order.getId(), order.getStatus()) 을 변수로,비슷한 로직 (validation, pre-processing) 을 메서드로,이러한 값과 행위를 클래스로 묶어보며 더 클린한 코드를 만들고자 노력한다.하지만 미래는 예측하기 어렵고, 경험까지 부족하다면 클린한 코드가 중복되는 이상한 현상이 발생하게 된다.어떤 Util을 만들었더니, 사실 A-Util이고 비슷한 로직이 추가되면 B-Util, C-Util이 되는..이런 실력은 많은 의식적인 경험과, 이를 돌아보는 프로세스를 반복하며 서서히 쌓이는 것 같다고 느꼈고,그래서 이번주 아쉬움이 앞서 말한 형태로 남았나 싶다. 

백엔드클린코드워밍업스터디

조혜림

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

채널톡 아이콘