all-layer
초창기 All-Layer 웹사이트 디자인입니다.
작업기간
– 디자인 : 2019/05/15 ~ 2019/05/21 – 포토샵 활용
– 코딩 : 2019/06/02 ~ 2019/07/15 – 브라켓 활용
1920px ver / 1700px ver / 1250px ver
anchor 기능을 통해 각 섹션마다 이동할 수 있게 되어 있습니다. 즉 메뉴를 클릭하면 그 섹션으로 자동적으로 갈 수 있습니다. 모션은 제이쿼리를 활용했고 배너의 경우는 Bx-slider를 통해 구현했습니다. 각 섹션별로 저의 컨텐츠를 담았습니다. 로고는 현재 All-Layer 로고가 아닌 변형 전의 로고이며, 계속 발전해온 디자인의 역사를 볼 수 있습니다. 전반적으로 눈이 편하도록 어두운 배경을 베이스로 했지만, 각 섹션 별 구분을 위해 중반엔 배경을 검은 계열과 흰 계열을 교차 반복했습니다.
Mock up
디자인을 하면서 코딩에 대해 신경써야 한다는 점에서 디자인에 대해 더 많은 고민을 할 수 있었습니다. 넣을 수 있는 작품도 개성적인 부분이 있을 수도 있고 재밌는 요소를 전면에 배치하여 흥미를 끌 수 있게 했습니다.
만들면서 흥미로웠던 부분은 코딩 툴에 관한 것이었습니다. 브라켓을 활용했을 때 가장 효율적인 부분은 실시간으로 제가 코딩한 것이 나오는 것이었습니다. 마치 F12눌러 코딩을 브라우저 상에서 수정한 것이 보이는 것과 같았는데, 이 부분은 그 어떤 툴보다도 강력하다고 생각합니다. 물론 본인에게 맞는 것을 고르는 것이 좋지만, 저는 처음으로 배운 툴이라 그런지 익숙하고 편한 느낌이었습니다. 앞으로도 계속 배워나가는 디자이너가 되도록 하겠습니다.
폰트를 설치하셔야 완전한 형태를 볼 수 있습니다.
