프로젝트 목적

바이 아트 매거진은 퍼블리싱 학습을 위한 개인의 micro 프로젝트입니다. 현재 포트폴리오(2.0) 보다 나은 3.0의 개발을 위해 선행적으로 HTML/CSS/JS를 학습하는 과정에서 만든 개인 훈련이며, 간단하게 웹 기획과 디자인을 선 작업 후 웹 기술(HTML5/CSS3/JavaScript)을 활용해 퍼블리싱을 완료하였습니다. 

주제 선정

바이 아트 매거진은 다양한 아트 분야의 작품과 아티스트를 소개하고 미학적 비평을 하는 매거진입니다. 제가 건축 디자인을 전공했을 당시, 조형 예술과 미디어 아트에 전향하고 싶을 정도로 관심이 있었습니다. 또한, 미학을 전공한 후 오랜 시간 디자인 경험이 축적되면 디자인과 예술 분야의 비평가로 활동하고 싶은 꿈도 갖고 있었습니다. 프로젝트 목적대로 퍼블리싱을 위해 어떤 주제의 과제를 진행할까 고민하던 중 문득 오래전 꿈이 떠오르며 이참에 한 번 아트 매거진을 만들어 보자라며 주제를 선정하게 되었습니다.

디자인 컨셉

퍼블리싱이 중점이였터라 기획과 디자인 부분은 힘을 조금 빼며 진행하였습니다. 먼저, 정보의 구조 측면은 아트와 아티스트 소개(on media), 전시회 소개(exhibition)하는 콘텐츠가 핵심이며, 브랜드 소개(about)와 잡지 판매를 위한 샵(shop)을 연결하는 구조로 형성되어 있습니다.
아트 분야에 대해 진중하면서도 직선적인 담백함을 담아내고 싶은 관점에서 디자인 방향은 기존의 신문과 오래된 잡지의 분위기와 프레임에서 영감을 받았습니다. 신문과 잡지의 편집을 보면 많은 내용을 담아내기 위해 장식적인 요소를 배제하고 다소 무거운 주제의 콘텐츠에 집중하기 위해, mass감을 갖는 텍스트 문단과 문단, 선에 의한 구획으로 레이아웃 되어 있습니다. 이 레이아웃 구조에서 느껴지는 단단하면서도 곧고, 장식의 배제로 담백함을 모티브로 디자인을 진행하였습니다.

퍼블리싱 스택

HTML5/CSS3
큰 구조는 HTML5로, 디자인의 스타일은 CSS3로 작업하였습니다. 현 작업의 진행 전, 먼저 디스플레이 속성(block, inline, inline-block, table, grid 등), 박스 모델(마진, 보더, 패딩, 너비, 높이), 마진겹침, 네거티브 마진, 선택자 우선순위, float, position, 웹 타이포그래피 등 개념의 이해와 기술을 학습한 후 적용하였습니다. 

JavaScript/jQuery
페이지가 로드될 때 변화를 사용자가 인지할 수 있도록 동적인 제어를 추가하였습니다. 수직적인 카드 리스트가 좌측에서 우측으로, 위에서 아래로 나타날 수 있도록, eq/delay/fadeIn 메서드를 학습 후 적용하였고, 여러차례 테스트를 통해 세부적인 인자값을 설정하였습니다.
퍼블리싱 내용은 아래 링크를 클릭하여 브라우저에서 확인할 수 있습니다.

https://djjydbb.github.io/byartmagazine/   <  (유의사항) 크롬 브라우저에서 확인 시 콘텐츠 영역이 노출되지 않으면, URL 필드 우측에 x가 표시된 아이콘을 누른 후, '안전하지 않은 스크립트 로드' 버튼을 눌러야 애니메이션 효과가 나타납니다. 버튼을 누르지 않으면, 수직 카드 리스트가 표기되지 않습니다. 

퍼블리싱 소스코드 파일   <  원본 파일을 확인하시려면, 클릭하여 다운로드 부탁드립니다.

퍼블리싱 전, 스케치 툴로 작업한 디자인 시안은 아래와 같습니다.

마치며..

퍼블리싱 작업을 하면서 웹의 구조에 대해 조금 더 이해하는 계기가 되었습니다. 또한, 표현의 자유도가 높은 디자인 툴과 달리 퍼블리싱 과정에서 무엇이 되고 안되고, 쉽고 어려운지 알아갈 수 있었습니다. 퍼블리싱 스택에서 언급한 개념과 기술로 대다수의 웹 디자인을 퍼블리싱 할 수 있을 것입니다. 그러나 반응형 웹 디자인을 위해서는 미디어쿼리와 유지/보수를 위한 상대적 수치(rem, em 등)의 적응이 앞으로 과제라고 생각하며 더 정진할 생각입니다.