웹 사이트 제작 무작정 따라하기!

웹 사이트도 사실 모바일 UXUI 디자이니 큰 맥락은 동일하지만(4배수, 그리드 시스템 등) 그러나 큰 화면의 디자인이기에 감을 잡아야할 필요는 느꼈다.

그래서 마디아님의 유튜브 강의로 무작정 따라해봤다!!!

 

https://youtu.be/NX_Ow_aEeZ0?si=RDqTjuGSAXABmzIu

 

자주 사용하시는 그레이 컬러나 메인 컬러 들이 있고 폰트도 위계가 정해져있어서 사실 스타일 등록해서 쓸까 했는데

피그마가 익숙하기도 하고 손이 빨라서 스타일 등록할까 말까 고민하다가 다 만들어버렸다ㅎㅎ...

내용은 사실 중요한 건 아니라 폰트 위계정도만 잡고 더미 데이터를 다 넣지는 않았다.

 

내가 무작정 따라하기를 하면서 나름 배웠다고 생각한 것들은

• GUI에 그림자 처리를 할 땐 같은 에셋을 복사해서 밑에 넣고 블러랑 투명도 처리를 하자.
  • 그냥 블랙 그림자보다 훨씬 입체감 있어진다.
• 피그마 작업부터 레이어, 프레임 정리를 잘 해야 개발할 때도 명확해질 수 있다.
  • 내가 처음부터 잘 못하면... 개발자분이 힘들어 질 것 같다는 생각?
  • 터치 영역을 꼭!!!!! 고려하자, 터치영역이 아니더라도 웹에서는 호버되었을 때 영역이 접근성 측면에서 중요하기 때문에 프레임을 잡을 때 이 터치 영역을 잘 고려하자
  • 요소들을 정리할 땐 작은 것부터 연결되는 요소끼리 묶어나가자(=>오토레이아웃)
• 공간감을 줄 땐 GUI를 활용해서 표현할 수 있다.
  • 검색창 좌우의 디자인 에셋의 크기와 선명도를 조절한 것도 공간감을 주기 위함

 

23년도에도 무작정 따라하기를 했었는데... 지금은 디자인을 보는 눈이 달라졌다는 게 느껴져서 뿌듯하고 소름이었다.

마디아님께 무한 감사를 드립니다. 웹쪽 디자인에서는 정말 너무너무 도움을 많이 받고 있습니다.🫡