디자인은 결국 디자인에서 끝나는 것이 아니라 개발단계를 거쳐서 구현되고 완성되는 것이기 때문에, 직접 코드를 가지고 어떤식으로 구현이 되는지 직접해보는 것이 설계에도 도움이 된다고 생각합니다.
대략적인 와이어 프레임을 먼저 제작하였습니다. 대략적인 배치정도만 만들어 보았습니다.
섹션을 Navbar, Home, About, Skill, Project, Contact로 나누어 상단 Navbard에서 해당 메뉴를 누르면 해당 페이지 지점으로 바로이동 가능하도록 설계하였습니다.
또한 하단에서 상단으로 바로갈 수 있는 Arrow Button도 설계하였습니다. 이 버튼은 사이트들이 대부분 우측 하단에 배치하는 것을 주로 볼 수 있어서 사용자들이 이 방식이 익숙할 것을 고려하여 그렇게 배치하였습니다. 스크롤이 우측에 있고 주메뉴가 주로 우측 상단에 있어서 주로 우측 하단에 배치하는 것 같습니다.
본 사이트는 내가 기본적인 코딩을 이해하고 있음을 보여주는 것이 목적이므로 단순한 구조로 작성하고 과도한 장식성 디자인은 지양하였습니다.
피그마로 디자인 시스템을 만들때나 코드를 작성할때에 항상 제일 중요한 것은 유지보수할 것을 항상 생각하고 만드는 것이라고 생각하여, 각 섹션이 바로 보일 수 있도록 주석을 달아 작성하였습니다.
피그마에서 로컬컬러나 폰트를 지정하듯이, 컬러를 지정해두고 폰트의 크기를 지정해두어서 추후에 전체적인 컬러를 리뉴얼하거나 폰트 크기 조정이 필요할때 용이하도록 제작했습니다.
미디어쿼리를 사용하여 특정 픽셀 이하로 가로길이가 줄어들면 상단의 Navbar가 햄버거 메뉴로 바뀌어서 클릭하면 메뉴가 생기도록 반응형 디자인을 하였습니다.
화면이 모바일 사이즈로 작아지면 보이는 메뉴입니다.
핸드폰을 주로 오른손으로 사용하는 사용자가 많으므로 햄버거 버튼은 오른쪽 상단으로 배치하였습니다.
디자인툴은 포토샵, 일러스트레이터에서 Adobe XD, 피그마로 이동하였습니다. 더 고도화된 프로토타이핑을 하는 프로토파이를 사용하는 곳도 있고, 피그마의 최근 업데이트를 보아도 디자인과 개발은 동떨어진 것이 아니라는 맥락은 더욱 명확해지고 있다고 생각합니다. 앞으로 협업하기 더 편하고 프로토타이핑하기 더 좋은 툴이 나온다면 또 언제든 대세는 바뀔 수 있고 더 고도화 될 수 있다고 생각합니다. 이 점은 계속 성장을 멈추지 않아야하는 이유이기도 합니다. ‘디자이너니까 코드에 대해서까진 몰라도 된다’는 생각보다는 내 디자인이 어떻게 해서 구현이 되는지 정도는 알아야 그것을 고려한 디자인이 나올 수 있다고 생각합니다.
⬇️ 결과 보러가기