블로그

윤기숙

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

📖 1주차 - 학습 내용 정리1. 피그마 배리어블과 디자인 토큰 개념 정리피그마 배리어블과 디자인 토큰의 개념 다시 한번 정리하기 Semantic이 중요하게 필요한 이유 Mode로 구분 가능하고, 로컬 베리어블 관리가 필요하기 때문2. 배리어블과 파운데이션 세팅하기색상, 타이포그래피, 간격, 선, 그림자, 그리드 등 베리어블 직접 등록해보기다양한 효과(Effect) 알아보기, Drop Shadow외에도 다른 효과들도 사용해보기높낮이(Elevation)는 UI 요소 간의 계층 구조를 시각적으로 명확하게 나타내고, 베리어블로 정리하면 유용그리드 종류 Fixed Grid(centered), Fluid Grid(stretch), Hybrid Grid 살펴보기.디바이스별 반응형 디자인 기준점(viewport) 정리해보고, Min width와 Max width를 지정해주기.3. 유용한 피그마 플러그인들 적용해보기  💡 1주차 - 회고 및 느낀 점 😆 좋았던 점강의를 듣고 직접 실습하면서 배리어블 개념, 용어, 피그마 플러그인등을 정리할 수 있었던 점이 좋았다.UI3에 맞춰서 업데이트 된 강의를 들을 수 있는게 너무 좋았다. 이전에 강의 들을 당시 예전 UI와 다른점이 많아서 이해하기 어려운 부분들도 있었는데, 이번에 다시 정리하면서 들으니 너무 좋았고, 좀더 체계적으로 추가 업데이트 된 내용을 배울 수 있어서 좋았다.😅 아쉬웠던 점스터디 첫 주였는데 계획했던 것처럼 매일 강의를 듣지는 못했고, 정해진 시간에 아직 루틴화 되지 못한 점, 강의 따라가기에 바빠서 스타일가이드 문서화 정리까지는 제대로 못했던 점이 아쉽다.😍 앞으로 바라는 점다음 주부터는 정해진 시간에 조금씩이라도 매일 공부하고, 문서화 하는 부분도 염두해두면서 작업해보자 💪 

UX/UI인프런_워밍업_클럽디자인시스템FigmaUX/UI

junghlee234

[인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)] 4주차 발자국

진행 기간: 4주차(20250323-20250330)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 학습 내용네비게이션 컴포넌트, 모드 활용(다크모드, 통합 브랜드 구현, 반응형 디자인, 다중언어)컴포넌트 부분에서는 마지막인 네비게이션 관련 부분을 학습하였습니다.링크, 탭, 바텀 네비게이션, 사이드 네비게이션, 글로벌 네비게이션, 페이지네이션, 케러셀네비게이션 컴포넌트는 어떻게 보면 제일 많이 쓰이는 중요한 요소일 수 있는데, 개발자 입장에서는 제일 구현을 안하는 요소이기도 한 것 같습니다. 전부 라이브러리로 가져다 쓰는 부분이 많아서, 원리만 생각하고 많이 사용했던 것 같습니다. 이번에 네비게이션 컴포넌트를 배우면서 개발 원리를 배우지는 않았지만 "실제로 구현을 할 수 있겠다"는 생각과 라이브러리에만 의존하는 것이 아니라 "차별화 된 디자인적 요소"를 반영 할 수 있다는 생각이 들었습니다.모드 활용 부분을 진행하면서 실제로 개발을 해보지 않고도 많은 시나리오를 미리 계획할 수 있고, 테스트 해 볼 수 생각이 들었습니다.브랜드 통합 부분에서는 기본 UX 요소를 배리어블과 모드를 통해서 쉽게 전환이 가능했습니다.모드를 활용하면 개발 전에 여러 디바이스 들을 대응하기가 매우 용이하였습니다.언어의 경우에도 아직은 많이 부족하지만, 어느 정도는 시나리오를 테스트 할 수 있었습니다.B2B 어드민, B2C 이러닝, 모바일 OTT 앱이 부분은 앞에서 왜 열심히 컴포넌트를 만들고 모드를 활용하는 법을 배웠는지에 대해서 알 수 있는 실습 위주의 파트였습니다. 또한, 실제 피그마를 사용하는 시나리오와 제일 유사한 환경이기도 하였습니다.이 파트는 워밍업 클럽을 하지 않더라도 꼭 진행을 스스로 해봐야 한다는 생각이 드는 파트였습니다.컴포넌트, 파운데이션 등을 미리 정확히 준비해 놓고 화면을 구성하는 것과 아닌 것이 엄청나게 많이 차이났기 때문입니다.강의를 듣기 전에 앱 디자인을 했을 때, 딱 이 강의의 반대로 했기 때문에 UX 구현시에 많은 시간을 소모했었습니다.강의 수강 이후로는 앱을 빠르게 디자인 하고, 다른 부분에 시간을 더 투자할 수 있을 것 같습니다.개인적으로 이 파트는 뒤로 갈수록 개인적으로 난이도가 쉬워졌습니다.여러 페이지를 만들면서 중복된 요소들이 등장하고 만드는 법이나 스스로의 노하우가 늘어난다는 생각이 들었습니다. 4주차 및 강의와 활동을 마치며중간 점검 미팅에서 선생님은 디자이너로서 개발을 해보면 내 프로덕트에서 더 디자인이 나아질 부분이 있다는 것을 발견하신다고 하셨는데, 저는 반대로 UX구현을 좀 더 체계적으로 진행하면서 개발자로서는 부족하지 않지만, 사용자로서는 부족했을 요소들, 실제로는 그렇게 개발하면 안되는 요소들을 많이 찾아 볼 수 있게 되었습니다.모든지 쉽게 할 수 있는 AI 시대에 스스로의 생각으로는 개발자, 기획, 디자인의 끝은 만류귀종으로 "개인의 경쟁력" 하나로 귀결된다는 생각이 들었습니다.미팅에서 말씀하셨던 것처럼 개개인의 주요 전공과 더불어, 노하우와 제품을 보는 눈과 같은 "개인의 경쟁력"을 지속적으로 발전시켜야 한다는 생각이 들었습니다.또한 앱이나 웹 등을 개발하거나 디자인을 하더라도, 나만의 요소(디자인 시스템, 기술적인 구현, 참신한 아이디어 등)에 AI를 적극적으로 도입하여서 스스로의 작은 기획과 테스트를 여러 번 진행 하고 실제 출시 시에는 완성도가 높고 성장성이 높은 프로덕트를 낼 수 있겠다는 생각이 들었고 실제로 그렇게 해보려고 합니다.워밍업 클럽을 하기 전에는 사실 이 많은 부분을 다 할 수 있을까 생각이 많이 들었지만 2가지 요소 덕분에 완강 및 미션을 모두 진행할 수 있었습니다. 강의에서 처음 피그마를 하는 사람도 들을 수 있을 정도로 자세하고 친절하게, 또 실제 구현시에 노하우를 숨김 없이 알려주십니다.워밍업 특성상 타임 리밋이 있다는 점이 집중도를 매우 높일 수 있는 부분이 있습니다.강의를 듣기 전과 들은 후가 스스로에게 있어 많은 차이가 있다고 생각이 듭니다. 특히 전체적인 프로덕트를 보는 눈이 넓어졌고, 개발자지만 막상 앱을 구현하라고 하면 막막한데, 이제는 구현이 가능하다고 자신있게 말할 수 있을 것 같습니다. 특히 개발자의 경우에는 지엽적으로 개발하는 경우가 많고, 전체적인 맥락을 모르고 개발하는 경우가 많은데, 이 강의를 듣고 실습을 실제로 진행한다면 전체 프로세스를 보는 눈이 생길 것이라고 생각하며 꼭 강의를 들어 보시고 실습도 해보시기를 추천 합니다! 

UX/UI인프런_워밍업_클럽UX/UIFigma디자인시스템볼드UX

junghlee234

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

학습 내용저번 주에 처리하지 못한 입력 및 디스플레이 컴포넌트 관련 내용을 학습하였습니다.  이번 주와 관련하여 피드백 컴포넌트 관련 내용을 학습하였습니다.이번 주 발자국을 작성하고 난 후 네비게이션 컴포넌트와 모드 관련 내용을 학습할 예정입니다.미션 및 실습특히, 이번 주 컴포넌트 실습에 있어서 '티끌 모아 태산'이라는 말이 많이 생각이 났습니다. 여러 컴포넌트를 불러와 인스턴스로 또 하나의 컴포넌트를 조합하는 일이 매우 많았기 때문에, 하나의 컴포넌트가 잘 완성이 되어 있지 않으면 연쇄적으로 영향을 주는 경우가 많았습니다.프로토타입을 피그마에서 사용시 스피너, 스켈레톤을 움직이게 만드는데 활용한 경우는 없었고, 터치로 인한 스크린 전환 같은 UI/UX 흐름에만 활용을 했었는데 관련하여 많은 배움을 얻을 수 있었습니다.사실 개발시에도 라이브러리를 import 하는 식으로 구현하는 경우가 많아서 이번 구현이 처음이었습니다.회고이번 주는 아직 전체 진도를 따라가진 못했지만, 정말 많은 것들을 배울 수 있었던 주였습니다.오늘 밤과 내일 사이에 남은 진도를 따라 잡아 다음 주부터는 여유롭게 지금까지 했었던 것들을 차근차근 확인하며 마무리 할 수 있는 시간을 가지도록 노력할 것입니다.

UX/UI인프런_워밍업_클럽UX/UIFigma디자인시스템볼드UX

junghlee234

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

진행 기간: 2주차(20250310-20250316)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기강의 및 미션이번 주는 입력과 디스플레이 컴포넌트를 만들어보는 주였습니다.강의 내용 및 미션도 저번 주와는 다르게 구현을 많이 하면서 기본 컴포넌트들을 만들어나가는 부분이 많았습니다.특히 컴포넌트의 속성의 조합에 따른 다양한 파생 베리언트들을 만들어 보는 것이 중요했습니다.미션을 수행하기 위해서는 숙련도 부족으로 정확한 확인을 위해 결국 강의 하나하나를 다시 천천히 들어야 하기에, 특히 시간이 필요하였습니다.회고이번 주는 수술과 좋지 않은 몸 상태로 인해 실제로는 2일(하루 4시간 기준) 이상을 낼 수 없었기에 목표하고자 하는 미션의 절반 이하로만 진행이 가능하였습니다.확인 결과 3주차의 경우에는 컴포넌트의 고도화 및 마무리 과정으로, 거의 하루 1개 미션을 진행해야 하는 상황이므로 다음 주 1일 차에 못한 강의와 미션을 마저 처리하고, 남은 4일에 하루 2개 정도로 처리하고, 만약에 부족한 경우 주말에 처리하는 식으로 진행할 예정입니다.또한 미션과 강의를 전부 하지는 못했지만, 좀 더 Figma 인터페이스에 익숙해져서 빠르게 구현을 할 수 있도록 하여 각 구현의 시간을 줄여야 겠다는 생각이 드는 주였습니다.

UX/UI디자인시스템FigmaUX/UI인프런_워밍업_클럽

윤기숙

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

📖 2주차 - 학습 내용 정리1. 아이콘Union + Flatten Selection앤트맨 전략으로 확대후 수정 그 이후 사이즈 조정해서 아이콘을 컴포넌트화Icon placeholder를 미리 만들어 놓고, 사이즈나 다른 아이콘으로 변경한다.2. 인풋 컴포넌트버튼 (button, icon button, button stack)체크박스(check), 라디오(radio), 스위치(switch) 텍스트 라벨(label), 컨트롤 그룹 (control group), 텍스트필드(text field), 텍스트 영역(text area)셀렉트/드롭다운(select/drop down)Multi-Edit 기능의 신세계를 배웠다. Q로 같은 구조를 한거번에 선택하거나 shift를 통해 선택.3. 디스플레이 컴포넌트아바타(avatar), 아코디언(accordion), 구분선(divider)뱃지(badge), 칩(chips), 툴팁(tooltips)카드(basic cards), 테이블(table)  💡 2주차 - 회고 및 느낀 점 😆 좋았던 점컴포넌트를 하나하나 만들어가면서 확실하게 컴포넌트 베리어블 개념을 익힐 수 있었던 것.이런 것까지 만든다고? 라는 생각이들 정도로 자주 쓰이는 부분을 컴포넌트화하면서 정리해 볼 수 있었던 것.피그마에 잘 몰랐던 부분, 기본 개념들 반복하며 훈련하기, 그리고 유용한 단축키등을 다시 한번 정리할 수 있었던 것.😅 아쉬웠던 점이전에 Hug / Fill Container 부분을 아직 확실히 이해하지 못했던 부분들이 있었구나 깨닫는다. Basic cards만들 때, 조금 어려웠던 부분이 있었다. 앞으로 이런 부족함을 좀더 확실히 익힐 때까지 노력해야겠구나 그런 생각이 들었다.  😍 앞으로 바라는 점미션을 정해진 시간에 따라가기가 꽤 많은 양이라는 생각이 들었다. 밀리지 않도록 최선을 다해 따라가자.포기하거나 미루지 말고 완주를 위해 꾸준히 노력하자.

UX/UI인프런_워밍업_클럽디자인시스템FigmaUX/UI

한석환

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

진행 기간: 1주차(20250303 ~ 20250309) 📖1주차 학습내용디자인 토큰, 배리어블, 디자인 시스템에 대한 구조, 이름, 특징Color, Typography, Spacing/Size, Effect에 대한 구성, 네이밍, Scope 설정 방법Primitive/Semantic 배리어블, 스타일 직접 등록해보기Typography와 Shadow를 스타일에 연결하는 이유는 프로퍼티가 다양한 복합 배리어블이어서Spacing/Size 배리어블의 디자인 토큰은 티셔츠 or 숫자 Fixed Grid(Center), Fluid Grid(Stretch)에 대한 차이점은 화면 크기에 따라 그리드 크기를 고정할지 비례하게 만들지 ☺좋았던 점플러그인 활용하여 오래걸리는 단순 작업들을 효율적으로 처리하는 방법을 배울 수 있었다. 배리어블을 등록하고 디자인시스템을 만드는 과정을 여러 step으로 나누어 가르쳐주셔서 실습하는데 큰 어려움을 느끼지 않았다.   😁잘한 점원래 계획했던 시간에 강의를 들으려고 노력한 것. 강의듣는 것으로 하루르 시작하면서 그 동안 엉망이었던 아침 루틴을 조금이나마 개선할 수 있었다. 미션에서 배리어블 항목들을 최대한 보기 편하게 문서화하는데 노력한 것.Color 배리어블 미션에선 Print 플러그인 사용 후, 오토레이아웃 요소를 하나하나 뜯어 고쳐야만 했다.Typography 배리어블 미션에서 강의에서 알려준 플러그인으로 문서화하기엔 적합하지 않아 새로운 플러그인을 찾으려 했고, 이미 등록된 스타일은 pc모드로 되어 있어 mobile모드에 맞춘 스타일을 새로 생성해야 했다. 😅아쉬운 점계획대로 강의 수강과 미션을 다 끝내고 싶었는데 스타일가이드 문서화를 정리하다가 어려움을 겪으면서 오래걸린 것강의를 보며 따라 만드는건 괜찮지만, 다른 방법이나 디자인에 맞춰서 작업하는데에는 어려움을 느끼는 것

UX/UI인프런_워밍업_클럽디자인시스템배리어블Figma볼드UX

junghlee234

[인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)] 1주차 발자국

진행 기간: 1주차(20250303-20250309)진행 강의:[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기 강의이번 주차에는 섹션 3개 분량의 내용을 다뤘습니다.특히 디자인 시스템에 있어서 가장 중요할지도 모르는 스타일 파운데이션을 만드는 부분을 다뤘습니다.크게 개념 소개 및 구조 부분 섹션, 이론 및 실습 두 섹션(색상 및 타이포그래피, 간격, 그림자, 그리드)으로 나누어 학습하였습니다.섹션 1에서는 스타일 파운데이션을 만들기 위해서 디자인 시스템, 디자인 토큰의 개념과 figma에서 도입된 베리어블(variables)에 대해서 알아보았습니다.섹션 2에서는 여러 디자인 시스템에서의 예시를 바탕으로 나만의 색상 베리어블의 이름과 구조을 만들고, 타이포그래피 베리어블과 스타일을 만드는 것과 베리어블 인터페이스와 플러그인을 통해 실제로 정의하고 적용하는 법에 대해 알아보았습니다.섹션 3에서는 간격 베리어블을 정의하는 다양한 방식과 적용 방법, 다양한 효과 및 특히 그림자 효과의 이론적인 적용과 베리어블과 스타일을 활용한 실제 적용 방법, 그리드 시스템의 적용 방법에 대해서 알아보았습니다.​​ 미션진행해야 할 미션은 총 3가지 였습니다.색상 베리어블 인증샷 & 링크 제출타이포그래피 베리어블 & 링크 제출기타 스타일 인증샷 & 링크 제출 이전까지는 디자이너가 아닌 개발자로서 Material Design System 같이 이미 잘 정의되어 있는 디자인 시스템의 요소를 사용하는 것에만 집중하였기 때문에, 강의의 개념과 적용 방법이 익숙하지 않았습니다. 진땀을 흘리면서 여러 번 강의를 반복해 들으며 미션을 진행하였습니다. 회고이전에는 스스로에게 있어 Figma가 아주 단순한 프로토타입 디자인 용도로 활용되었다면, 이제는 App, Web 플랫폼의 디자인의 밑바탕을 직접 그리는 용도로 쓰임이 진화하였다는 느낌이 들었습니다. 또 베리어블을 통해 프로그램처럼 체계적으로 나의 색상, 타이포그래피, 간격 등을 관리하고 적용할 수 있는 실마리를 발견하였던 한 주였습니다. 

UX/UI디자인시스템FigmaUX_UI인프런_워밍업_클럽베리어블스타일스타일_파운데이션볼드UX

ddang

인프런 워밍업 클럽 스터디 1기 FE 과제

1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_2_food_menu2번 과제 (Day3) (가위 바위 보 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_3_rock_scissors_paper3번 과제 (Day4) (퀴즈 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_4_quiz 4-1번 과제 (Day5-1) (책 리스트 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_05-1_book_list   4-2번 과제 (Day5-2) (GitHub Finder 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_05-2_github_finder 5번 과제 (Day6) (비밀번호 생성 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_06_password_generator 6번 과제 (Day7) (타자 속도 측정 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_07_typing_speed_test 7번 과제 (Day9) (예산 계산기 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_09_budget_calculator 9번 과제 (Day11) (포켓몬 도감 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_11_pokedex 11번 과제 (Day13) (리덕스를 이용한 쇼핑몰 앱)깃허브 저장소 주소: https://github.com/llddang/Inflearn_WarmingUp_FE/tree/main/day_13_redux_shop_app

프론트엔드인프런_워밍업_클럽1기과제FE

채널톡 아이콘