완성된 페이지: denev6.github.io/profile/ (지금은 안 됨)
Vue.js를 선택한 이유
저를 간단하게 소개할 수 있는 프로필 페이지를 제작하고 싶었습니다. Jekyll 테마를 활용하거나 React · Vue를 사용하는 방법이 있습니다. 예전에 Jekyll을 이용해 Github 블로그를 작성해 본 경험이 있어 찾아보았지만, 제가 머릿속으로 그리는 디자인을 찾지 못했습니다. 그렇다고 Vanilla Js로 다 만들자니 막막해 React와 Vue를 찾아보았습니다. 저는 React나 Vue에 대해 아무것도 모르는 상태였기 때문에 '작업 방식이 얼마나 명확한가'를 기준으로 배울 것을 선택했습니다. 이해가 부족한 상태에서 괜히 스파게티 코드를 뽑아낼 바에 간단하고 명료한 프레임워크를 선택하는 것이 맞다고 판단하여 Vue를 시작하게 되었습니다.
Vue를 처음 사용하며 느낀 점
프레임워크 답게 체계적이고 명확했습니다. 특히 컴포넌트를 처음 사용했을 때, Class 객체를 사용하는 느낌을 받았습니다. Class를 사용하면 비슷한 성격의 함수나 데이터를 한 곳에 묶어 관리할 수 있듯이, 컴포넌트를 사용하면 하나의 페이지를 여러 개의 블록으로 분해하여 별도로 관리할 수 있습니다. 그리고 필요할 때 다시 조립해 사용할 수 있습니다.
FOR이나 IF와 같은 명령을 사용할 수 있습니다. 예를 들어, 인스타 화면을 보면 동일한 디자인의 카드가 계속 반복됩니다. 이럴 때 귀찮게 복사+붙여 넣기 할 필요 없이 for문으로 반복시키면 끝납니다. 물론 Vanilla Js로도 비슷하게 흉내는 낼 수 있지만 경험상 오히려 코드가 지저분해지고 관리가 어려워지는 느낌을 받았습니다. 반면에 프레임워크 단위에서 자체적으로 제공하는 for과 if는 정말 편리했습니다.
예시:
const main = [
{
text: "Python",
icons: ["python"],
},
{
text: "PyTorch",
icons: ["pytorch"],
},
...
];
컴포넌트와 for/if를 활용한다는 것은 데이터를 중심으로 페이지를 관리할 수 있다는 것입니다. 경험상 페이지를 만들고 수정할 때, 디자인을 수정하는 일보다 내용을 수정하는 경우가 더 많았습니다. 특히 지금 만들고자 하는 프로필 페이지의 경우, 새로운 프로젝트를 할 때마다 계속 내용을 추가하고 수정해 주어야 합니다. 기존에는 광활한 HTML 속에서 수정해야 할 부분을 하나하나 찾고, 중간에 조금이라도 잘못 건드리면 어디선가 구멍이 생겨버리기도 했습니다. 그런데 이제는 템플릿과 내용을 따로 관리하게 되었습니다. 이러면 내용을 수정할 때 템플릿을 살펴볼 일도, 템플릿이 무너져버릴 일도 없습니다.
디자인하며 집중한 부분
최대한 심플하고 간결하게 만드는 것이 목표였습니다. 한 번에 보여지는 정보가 너무 많으면 보는 사람 입장에서 불편하기 때문에 최소한의 정보만 노출하도록 하였습니다. 회색 계열을 제외하면 색상도 ■와 ■로 2가지만 활용하였고, 줄 간격을 늘려 글을 읽을 때 시야에 한 줄 씩 들어올 수 있도록 공간을 넓혀 주었습니다.
읽을 때 다른 줄이 겹쳐서 집중
하기가 어렵습니다.
다른 줄과 관계 없이 집중하기가
비교적 편리합니다.
그리고 여백과 그림자를 많이 활용했습니다. 기존에는 공간을 분리하기 위해 선을 사용했는데, 이번에는 여백을 늘리거나 테두리에 그림자를 주는 방식으로 공간을 분리해 주었습니다.
저는 디자인에 '디'도 모르기 때문에 괜히 마음대로 건드리는 것보다 프레임워크의 도움을 받는 게 낫다고 생각했습니다. 그렇다고 tailwindcss를 사용하자니 HTML이 불필요하게 복잡해질 거 같아 tailwindcss의 문서를 참고하며 직접 CSS로 조정하였습니다. 아직 많이 부족하지만 이전에 만든 것들과 비교해 봤을 때 나름 만족스러운 결과가 나온 것 같습니다.
내용 구성시 고려한 점
소개나 진행한 프로젝트를 한 눈에 볼 수 있도록 만드는 것이 목표였기 때문에 간단한 정보만 표시하였습니다. 프로젝트 내용도 구구절절 작성하면 보는 사람 입장에서 읽기 전부터 귀찮을 수 있기 때문에 필요한 정보만 요약해서 적어 두었습니다. 그리고 블로그에 작성한 글을 하단에 링크로 걸어두었습니다. 이렇게 하면 요약된 정보만 원하는 사람과 자세한 내용까지 원하는 사람을 모두 만족시킬 수 있지 않을까 싶었습니다.
Github Docs
Github Docs를 사용해 페이지를 deploy 하였습니다. Github에서는 각 프로젝트마다 Docs 페이지를 사용할 수 있습니다.
그래서 저는 docs/로 프로젝트를 build하고, router를 이용해 /profile로 접근하도록 하였습니다.
이렇게하면 "사용자명.github.io/레포지토리명"으로 접근할 수 있게 됩니다. 아무래도 github.io다보니 다른 도메인보다 있어보이고 무엇보다 프로젝트를 커밋하면 바로 deploy까지 연결되는 것이 편리했습니다. 대안으로는 Netlify에 Github를 연동해 사용하는 방법도 있습니다.