블로그
전체 102024. 10. 27.
0
[인프런 워밍업 스터디 2기 디자인] 4주차 발자국
4주차 마무리 하기4주차에는 베리어블을 활용한 페이지를 만들었습니다. 기존에 반응형 페이지를 만들때 example responsive collection과 새로운 responsive collection의 베리어블을 혼용해서 그랬는지 header/learn 의 mobile 버전을 만들 때 충돌이 있어 시간이 소요되었습니다. 결국 example responsive collection을 지워 해결하였습니다🤣토요일 특강 시간에는 배우고 싶었던 베리어블을 활용한 프로토타입을 실습해 보는 시간이었는데 같은 러너분들이 멋진(?) 실습예제를 가져와주셔서 좋은 학습기회가 되었습니다.Keep2기까지 열심히 마무리하였습니다.🎉🎉🎉 Problem반응형 페이지에 베리어블을 적용하는데에 시간이 소요되었습니다. Try프로토타입 과제를 마무리하겠습니다.💪
UX/UI
・
인프런워밍업클럽
2024. 10. 20.
0
[인프런 워밍업 스터디 2기 디자인] 3주차 발자국
3주차를 돌아보며벌써 3주차라니, 시간이 너무 쏜살같이 지나간 한 주 였습니다.이번 주는 네비게이션 컴포넌트와 베리어블을 활용해 다크모드를 적용해 보는 시간이었습니다.Keep제시간에 과제를 제출하려 노력하였습니다. Problem반응형을 mobile로 디자인 해보는 과정에서 많은 시간을 할애하였습니다. Try반응형 mobile 페이지를 마무리하겠습니다.
UX/UI
・
인프런워밍업클럽
2024. 10. 13.
0
[인프런 워밍업 스터디 2기 디자인] 2주차 발자국
2주차를 돌아보며이번 주차는 alert 부터 toast, spinnerloader, slot, modal까지 전반적인 Feedback 컴포넌트를 만들어보는 시간이었습니다. toast에 장문을 입력했을 때 auto layout된 상태여서 컨테이너 박스 만큼 공백이 고정되어 있는 이슈가 있었고, 이럴 때는 layout 을 해제하고 group 으로 감싸 해결하면 되는 걸 알게 되었습니다. Keeptoast와 alert, modal과 pop-up에 관한 부족한 개념을 다시 찾아보았습니다. Problem부족한 개념을 우선적으로 학습하지 않고 먼저 컴포넌트를 만들었습니다. Try타이포그래피 자간 px 또는 % 확정할 것 입니다.
UX/UI
・
인프런워밍업클럽
2024. 10. 06.
0
[인프런 워밍업 스터디 2기 디자인] 1주차 발자국
1주차를 돌아보며1기를 수료 후 눈 깜짝할 새 시간이 지나 2기 스터디까지 참여하게 되었다.여러 생각 끝에 2기를 참여하게 된 만큼 다음 주부터는 꼭 미루지 않고 과제를 해결해야겠다.오랜만에 강의를 다시 들으니 재미있기도 하고 여전히 시간이 오래 걸려 괴로운 부분도 있었다😂 Keep미션을 제시간 안에 마무리 하였음 ProblemFeather 아이콘 빌런들 퇴치에 시간을 많이 씀 Trysemantic, theme 문서 디자인 통일하기
UX/UI
・
인프런워밍업클럽
2024. 06. 06.
0
[인프런 워밍업 스터디 1기 디자인] 수료 후기
이런 점이 좋았어요일반적인 스터디는 스터디원들만 참여하는 과정인데, 인프런 워밍업 클럽은 지식공유자 주도 프로그램으로 질문공간이 무한으로 열려있고 추가로 준비해 주시는 특강이 많은 도움이 되었습니다.함께하는 러너 분들의 발자국을 보면서 내가 놓쳤던 부분에 대해 다시 회고해 볼 수 있는 기회였습니다. 구체적인 계획과 정해진 완주 기간이 있었기 때문에 혼자 공부하는 것보다 빠르게 성취감을 얻을 수 있었습니다. 2기에도 디자인 강의가 열린다면 또 수강하고 싶을 정도로 좋았습니다. 인프런 워밍업 클럽 강추!!🎉
UX/UI
・
인프런워밍업클럽
・
스터디1기
2024. 05. 25.
0
[인프런 워밍업 스터디 1기 디자인] 4주차 발자국
4주차 / 5.20 - 5.23 / 페이지 만들기기타 베리어블 모드 활용 개념 익히고 실습해보기B2B 이커머스 어드민 페이지 만들기B2C 이러닝 페이지 만들기모바일 OTT 서비스 페이지 만들기 KEEP, PROBLEM강의를 듣기 전에는 4주차 [페이지 만들기]가 가장 고난처럼 보였지만 미리 만들어둔 컴포넌트와 배리어블을 활용하니 뚝딱뚝딱 비교적 빠르게 만들 수 있었다. 물론 실습을 하면서 fill, hug 등의 문제로 컴포넌트를 수정하는 일이 종종 생기면서 컴포넌트들을 만들 때에 꼭 인스턴스를 다양하게 테스트 해보고 진행해야겠다는 생각도 들었던 한 주였다. 한달이 이렇게 빨리 끝나는 게 실감나지 않고 다른 분들과 함께 열심히 스터디를 할 수 있었던 환경이 끝나 아쉽지만 덕분에 학습에 있어서 많은 동기부여를 얻어 가서 감사하고 보람차다. TRY수료식 전까지 전체적인 디자인 시스템을 다듬고 점검 및 반복해보는 시간을 가질 계획이다🙉 THANKS TO끝으로! 볼드님 좋은 강의를 만들어 주셔서 너무 감사합니다. 앞으로 다른 강의도 기대하고 있겠습니다😊
UX/UI
・
워밍업클럽
2024. 05. 19.
0
[인프런 워밍업 스터디 1기 디자인] 3주차 발자국
3주차 / 5.13 - 5.17 / 컴포넌트 만들기 23주차 돌아보기이번 주는 네비게이션 컴포넌트를 만들어보고 다크모드를 적용해 보는 시간이었습니다.다크모드 적용 후 색상 대비를 점검하는 과정에서 웹 접근성 기준에 충족하지 못한 부분이 있어 수정에 시간이 걸렸습니다.그날 주어진 강의를 수강하고 해당 과제를 마무리하고자 한 점은 좋았지만, 아직 컴포넌트를 스스로 온전하게 계획하여 만들려면 강의를 수강 할 때에 시간을 좀 더 들여 몰입하는 것과 복습을 통한 이해의 반복이 필요하다고 생각하였습니다. 마지막 주를 향한 다짐어느덧 벌써 4주차 [페이지 만들기] 를 앞두고 있습니다.4주차에도 앞서 계속 해 왔던 것처럼 그날 주어진 강의를 수강하고 과제를 마무리하도록 노력할 것이며 토요일 볼드님의 특강을 바탕으로 머릿속에 어지럽혀있는 타이포그래피에 대한 개념을 제대로 정리하여 수정할 것입니다.
UX/UI
・
워밍업클럽
2024. 05. 12.
1
[인프런 워밍업 스터디 1기 디자인] 2주차 발자국
2 주차 / 5.7 - 5.10 / 컴포넌트 만들기 1 KEEP컴포넌트 만드는 게 점점 익숙해지고 있다.2주차 할일을 3주차로 미루지 않고 끝까지 해냈다😊강의를 먼저 쭉 듣고 두번째는 음소거 해 놓고 같이 실습하니까 확실히 시간이 절약되었다. PROBLEMcontrast 플러그인을 통해 명도 대비를 확인하는 과정에서 primary 컬러의 대비가 낮아 좀 더 진하게 수정하는 등 변경사항이 많아 시간이 많이 소요되었다.ㄴ 컬러를 수정하면서 전반적으로 어두워져서 내가 생각한 primary 컬러랑 멀어지는 게 난감했다.ㄴ 전체적으로 컬러를 뒤엎고 싶기도 했지만 너무 오래 걸릴 것 같아 일부 수정하는 걸로 마무리했다. /명도 대비를 확인하면서 다른 브랜드들은 어떤지 확인해 봤는데, G마켓 디자인시스템을 살펴보니 primary 컬러를 CTA 버튼에 사용하지 않고 action 컬러를 별도로 설정하여 CTA에 적용하는 점이 인상적이었고 네이버를 포함해서 의외로 꽤 많은 브랜드들이 CTA버튼의 명도 대비를 지키지 않는 걸 확인하면서 꼭 지키지 않아도 되는 건지 헷갈렸다..추후 bold님께 질문해야겠다! typography를 Notosans KR에 행간 140%으로 잡고 가니까 확실히 너무..불편하다. 컴포넌트를 만들면서 Roboto도 따로 써야되고.. 수정이 필요해 보인다. TRY사이드 프로젝트에 배운 디자인시스템 적용해 보기
UX/UI
・
워밍업클럽
・
디자인시스템
2024. 05. 04.
1
[인프런 워밍업 스터디 1기 디자인] 1주차 발자국
1 주차 / 4.29 - 5.3 / Figma 기초 KEEP시작에 앞서, 나 자신 칭찬한다. 대견해!1월에 구매해서 섹션2 듣다가 하차했었는데 ..🙃 어느새 내가! 스타일 가이드도 만들어보고! 섹션3에 진입했다.그 과정이 나에겐, 생각보다 간단하지도 쉽지도 않았지만 그럼에도 확실히 1월에 잠깐 수강 했을 때와의 이해도가 다르다는 걸 스스로 체감할 수 있어서 기쁘다. 누가 시켜야 하게 되는 나의 게으름을 인프런 워밍업 스터디 덕분에 누가 시키면 하는 책임감으로 뿜뿜 나타나고 있는 내 모습이 좋다. PROBLEM디자인 시스템을 구성할 때 내 것으로 이해하는 과정이 없이 예시와 똑같이 만들게 됐던 순간들이 있었다. 강의 들을 시간을 여유롭게 만들어 두지 못해 실습 과정에서 완전한 이해를 미뤄둔 적이 있다. TRY가상의 프로덕트(또는 내가 진행하고 있는 사이드프로젝트)를 반영해서 디자인 시스템을 디벨롭 해 나갈 것복습 시간 정하기
UX/UI
・
워밍업클럽
・
디자인시스템
2024. 04. 29.
1
4-29 | 피그마 베리어블과 디자인 토큰/ 디자인 시스템 개념이해하기
● 배리어블 과 스타일 배리어블은 하나의 변수만 저장 가능하며 참조할 수 있다. 따라서 기본 디자인 요소를 적용할 때 주로 사용된다.스타일은 다수의 변수까지도 저장이 가능하며 참조할 순 없다. 따라서 다수의 디자인 요소를 적용할 때 사용된다. ● 배리어블의 역할 배리어블은 디자인 토큰 및 프로토타이핑 기능을 한다. *디자인 토큰이란?디자인 시스템의 기본 구성 요소로서, 전자(Electrons)에 해당한다. /디자인 토큰이 필요한 이유많은 디자이너와 함께 작업할 때 일관성을 유지 할 수 있음다양한 플랫폼 환경(IOS, ANDROID등)에 공통된 디자인을 적용할 수 있음라이트 모드, 다크 모드 등 명확하게 색상을 구분해야 할 때 용이함 많은 하위 브랜드들이 존재할 때 디자인 에셋을 관리하기 용이함*디자인 시스템이란?재사용 가능한 컴포넌트와 패턴 등을 말하며,1) 디자인 원칙/철학 2) 스타일 가이드 3) 컴포넌트 라이브러리 4) 패턴라이브러리 5) 문서화 6) 시스템 관리 운영 으로 구성된다. *Atomic Design이란?디자인 시스템 방법론으로, 전자(Electorns) → 원자(Atom) → 분자(Molecules) → 유기체(Organisms) → 템플릿(Templates) → 페이지(pages)로 UI 시스템을 구성한다는 개념 이다. /전자(Electrons) ex. 색상, 타이포그래피, 테두리 , 그림자효과원자(Atom) ex. 라벨, 텍스트 필드, 버튼
UX/UI
・
볼드UX
・
워밍업클럽