워드프레스 포트폴리오 사이트 - 디자인과 개발까지 🥸

포트폴리오 디자인을 완료했다 😉

 

이미 레쥬메 사이트와 PDF제출용 포트폴리오가 있었기 때문에 그 안에서 콘셉트와 포인트를 정리하고, 사이트의 구성과 웹용 스타일을 만드는데 집중했다.

디자인 컨셉

• Windows
  • Rounded corner
  • Flet
  • Monotone

포트폴리오 사이트의 디자인 콘셉트는 Windows로 정했다. 토이프로젝트 소개인 '웹은 사용자 간의 거리가 아주 멀더라도 같은 경험을 해볼 수 있는 좋은 창구입니다.' 이 내용처럼 나에겐 웹이란 무언가를 공유하는 '창구'다. 사전적으로도 건물에 물리적으로 뚫어놓은 창이나 공간이면서 기관 또는 사람끼리 협조하거나 접촉하기 위한 곳을 이르는 말이면서, 컴퓨터에서 어떤 활동을 하기 위한 화면을 '창'이라고도 한다. 나는 '창'이 가진 이 여러 의미들이 내가 하고자 하는 역할과 어울리는 부분이 많다고 생각했다.

웹에서의 창에서 볼 수 있는 둥근 모서리와 평면적인 요소를 가져왔으며, 다양한 스타일의 디자인을 담기 위해 무채색의 컬러를 사용했다.

기획 포인트

그리고 포트폴리오 사이트에 중요한 포인트 세 가지를 정하고 화면을 구성했다.

• 일관성 Consistency
• 반응형 Response
• 유지관리 maintenance

1) 일관성

방문자가 일관된 디자인 스타일 속에서 콘텐츠에 집중하길 바랐다. 비슷한 구조 안에서 화면 간에 이동을 해도 어디가 제목이고, 어디가 내용인지 등 콘텐츠를 인지하기 쉽도록 했다. 그리고 비전문가인 내가 코딩을 쉽게 할 수 있다는 효율도 챙길 수 있었다.

2) 반응형

디자인 에이전시의 포트폴리오를 볼 때 아쉬웠던 점을 보완해보고자 했다. 디자인 에이전시에서는 결과물을 강조하기 위해서 기획 단계의 장표까지도 디자인해서 올리는 경우가 많았다. 그렇기 때문에 큰 화면에 고화질의 이미지가 콘텐츠의 중심이 되는 경향이 짙다. 하지만 모바일에선 가로로 확장된 고화질의 섬세한 디자인이 오히려 내용을 보는데 방해가 되는 요소가 되었다. 이 부분을 보완한 에이전시들은 포트폴리오 한 페이지씩을 반응형으로 퍼블리싱하는 방법을 썼으나 내게 현실적인 방법은 아니었다. 그래서 내가 생각한 방법은 프로젝트의 개요 부분은 구성을 통일해서 반응형으로 구현하기, 크게 봐야 하는 이미지는 모바일에서 줄어드는 정도를 줄이고 상하좌우로 스크롤할 수 있도록 별도의 코드를 적용했다.

반응형으로 적용된 컨셉 설명 부분과 좌우 스크롤로 탐색할 수 있는 이미지 부분

3) 유지관리

마지막 유지관리. 적은 에너지를 들여서 포트폴리오를 업데이트할 수 있도록 하는 것을 목표로 구조를 짰다. 포트폴리오에 공통적으로 들어가는 요소를 커스텀 필드로 정의했다. 프로젝트의 이름, 공개날짜, 내 역할, 클라이언트, 프로젝트 개요, 콘셉트, 썸네일 등이다. 콘셉트엔 3가지 썸네일과 내용을 넣을 수 있도록 구성을 했으나 정보를 입력하지 않으면 틀이 노출되지 않는다. 토이 프로젝트의 경우, 매번 코드 파일을 서버에 올리지 않도록 커스텀 필드에 입력하는 구조를 만들었다. 워드프레스에선 커스텀 필드에 넣은 코드가 작동되지 않도록 변환해 주는 장치가 되어있는데, 토이프로젝트 부분에만 그 기능을 해제하면서 캔버스가 되는 div 안에서 작동되도록 하는 것이 일이었다.

개발 단계

이렇게 포트폴리오 사이트의 화면을 만들고 퍼블리싱 - 워드프레스 - 도메인, 서버 호스팅 - SSL 적용을 거쳐 사이트를 완성시켰다. 개발 부분은 Chat GPT와 구글의 도움을 많이 받았다. 개발 과정 중 가장 어려웠던 부분은 워드프레스를 적용하는 단계였다. 가이드가 호스팅사마다 다른 데다가 검색했을 땐 그 가이드나 방식을 따르지 않아도 된다는 곳도 많아서 헤맸던 것 같다. 지금 돌이켜보면 서버 내에 워드프레스 파일 구조와 기본 코드 구조가 잘 적용됐는지의 문제라 다음엔 좀 덜 헤멜 것 같지만 익숙하게 사이트를 구축하려면 연습이 필요할 것 같다.

마치며

개발은 내 영역이 아니라며 손사레 쳤던 과거를 떠올려본다. 약소한 사이트이지만 개발이라는 분야에 경험과 이해가 생겼다는 점에서 살짝 뿌듯한 마음을 가져본다. 가능성이 열린 기분이 든다. 이 사이트를 시작으로 점차 발전된 프로젝트를 할 수 있길 기대해본다. 🥳