디자인 와이어프레임이 구축되었다.
사실상 대략 이런 컴포넌트를 이러한 위치에 넣을것이고, top bar 은 이런식으로 통일할 것이고, 유저플로우는 다음과같을것이다. 정도의 내용이 담긴 파일이었다.
마음의 짐이었던 디자인 시스템을 정리해보려 한다.
단한가지 아쉬운 것은 현재 프리온보딩 디자인 시스템 강의를 수강하고 있는데, 정말 중요한 약속과 수업이 겹쳐서 수업자료 + 친구의 수강후기 를 듣고 복습해서 해봐야한다는 점이다.
디자인 시스템
- 간격(spacing) 지정하기 : margin, padding, gap
관련 이론 : 게슈탈트, 통일성, 근접성의 원리
원칙 : 8의 배수(4,8,12,16,24,32,...) 로 지정
규칙 : 중요도, 관련도에 따라 같은 spacing을 지정할 수 있도록 통일성을 유지할 것
지정 : 문서화 => 실 디자인에 정해진 디자인 시스템의 규칙대로 디자인
figma의 auto layout 활용
figma auto Layout 기능
반응성 디자인에 사용가능
auto layout Resizing
fill => 내부 요소 없어졌을때 유동적으로 내부 contents가 resizing 하여 fill 됨(외부프레임에 따라 내부 contents가 resizing됨)
hug => 내부요소에 따라 외부 프레임이 resizing 됨
fixed => 외부 frame 이 hug가 아닌 fixed인 상태에서 내부 contents 가 fill이라면 기준점이 사라진 셈이므로 내부 contents 도 fixed화 된다
add auto layout 유무에 따른 선택 옵션이 달라질 수 있다
- grid 지정하기
모바일은 보통 2~4개의 column을 사용
media query break point : 768(이전 : 모바일, 이후~1024: 탭) , 1024(1024 이후~ : 웹 고정)
프로젝트에 적용하기
1일차
일단하자는 마음으로 수정 중입니다
반응형으로 hug,fixed,fill을 사용하는 것을 조금 익힌 느낌
2일차
두번째, 세번째 페이지 수정중
absolute로 띄워줘야하는 모달창이 있는데, 이친구는 반응형적용을 어떻게 해야하는지 고민이 된다.
바깥 화면(건드리지않는) 과 모달창은 각각 반응형적용이 되는데, 당연한 이야기지만 바깥(뒤쪽) 화면을 늘린다고 해서 absolute로 띄워져있는 모달이 늘어나지는 않는다. 실제로 어떻게 적용되는지를 잘 몰라서 헤매는 건가 싶기도 함.
+옆으로 fill해서 늘리는것은 문제가 없는데... 위아래로 크기조정시에 fill이나 hug로 반응형으로 만들어놓으면 기존에 셋팅해둔 padding이나 margin은 무시되는 느낌이라 피그마에서 어떤식으로 구현해야하는지 고민, 확인해봐야할 듯 하다
아이콘 리뉴얼, 삭제용 모달, 토스트 만들기
추가필요 ) hover시, activate 시, 타이포그래피/color 시스템 정의
2일차(프리온보딩 마지막 수업 후)
component 만드는 법을 알려주셨다(버튼,input) 솔직히 내 식대로 만들고있어서 property등 넣는 법을 몰라서 다 재래식으로 했는데 , 다 수정하고 있자니 힘들지 않다고 하면 거짓말이다.. 그래도 깔끔해지면 더 좋아지겠지 하며 적용해보는 중
그리고 아직 icon으로 instance 넣어서 아이콘 바꿔보는 건 좀 더 연습이 필요할 것 같아서 더욱 더 이마짚는 중임
사실 페이지가 그렇게 많지 않은 어플리케이션이라.. 안해도 괜찮을 수 있지만, 무엇보다 컴포넌트 화 하면 나도 그렇고 특히 프론트에서 작업하기가 좀 더 용이할 것같았다(소통할때도 용이할거같았음)
무엇보다 수정이 많이 되는 이유는 나는 component까지 만들었는데 사실 그 전에 타이포그래피 시스템과 컬러시스템을 정의했어야 했기 때문이다..
쓰는 색상이 많지 않고 아직 brand 색상을 정하지 못해 일단 진행했는데, 더 체계적으로 가져갔어야했나..고민이 들긴했다. 그리고 눈물을 흘리며 수정하고 있음
+사설
사실 바닐라js나 리액트로 챌린지과제나 졸업과제를 할때는 내가 디자인 겸 프론트였기 때문에 그냥 생각하고 바로바로 적용하면 되었는데, 지금 느끼는 심경은 거꾸로...코드로 구현했던걸 맞아 이것도 필요하지, 이것도, 하며 디자인으로 구현하는 느낌이다.
좀 더 효율적으로 일할 수 있을때까지 화이팅
내적 눈물을 흘리며 강의를 듣고 있는 나의 아바타 모습
