반복되는 기준 만들기
가장 먼저 맞춘 것은 굵은 타이틀, 검정과 흰색의 대비, 그리고 제한적인 포인트 컬러였습니다. 이 세 가지가 페이지마다 반복되면 구조가 달라도 같은 세계 안에 있는 것처럼 느껴졌습니다.
Emotion을 쓰면서 컴포넌트 안에 스타일을 가깝게 두니, 레이아웃의 의도와 시각 규칙을 같이 읽을 수 있어 편했습니다.
처음에는 페이지마다 필요한 스타일을 그때그때 만들었습니다. About은 소개 페이지니까 정적인 느낌으로, Projects는 전시 페이지니까 강한 대비로, Contact는 터미널 컨셉으로 접근했습니다. 그런데 페이지가 늘어날수록 같은 포트폴리오 안에 있다는 감각을 유지하는 일이 중요해졌습니다.
그래서 가장 반복되는 기준을 먼저 정리했습니다. 타이틀은 크게, 본문은 충분히 얇게, 검정과 흰색의 대비는 선명하게, 포인트 컬러는 연두색 하나를 중심으로 제한했습니다. 이 기준이 생기니 새로운 섹션을 만들 때도 어디까지 튀어도 되는지 판단하기 쉬워졌습니다.
Emotion은 이런 과정에서 꽤 잘 맞았습니다. 컴포넌트와 스타일이 가까이 있으니, 이 컴포넌트가 어떤 화면의 역할을 하는지 바로 읽을 수 있었습니다. 물론 파일이 길어지는 단점도 있지만, 지금처럼 화면 단위로 빠르게 다듬는 단계에서는 의도를 잃지 않는 장점이 더 컸습니다.
페이지마다 성격은 다르게
About은 소개에 가깝고, Projects는 전시에 가깝고, Contact는 작은 터미널 경험에 가깝습니다. Blog는 기록과 탐색의 중간쯤에 있어야 했습니다.
그래서 모든 페이지를 같은 카드 구조로 통일하기보다, 타이포그래피와 간격의 규칙만 공유하고 각 페이지의 경험은 다르게 설계했습니다.
처음에는 통일감을 위해 모든 페이지에 비슷한 카드와 라인을 반복하려고 했습니다. 하지만 그렇게 하면 페이지마다 가진 목적이 흐려졌습니다. About의 소속과 대회, 대외활동은 정보를 비교하기 쉬워야 했고, Projects는 한 프로젝트에 몰입해야 했고, Contact는 클릭하고 싶은 작은 장면이 필요했습니다.
결국 통일감은 같은 컴포넌트를 반복하는 것이 아니라 같은 태도를 유지하는 쪽에 더 가까웠습니다. 과한 장식은 덜어내고, 글자와 여백으로 화면을 잡고, 필요한 순간에만 강한 대비를 쓰는 방식입니다. 이 태도만 유지하면 페이지의 레이아웃은 달라도 하나의 포트폴리오처럼 느껴졌습니다.
Blog를 만들 때도 이 기준을 다시 생각했습니다. velog처럼 글을 읽기 쉬워야 하지만, 완전히 평범한 리스트가 되면 포트폴리오의 분위기와 멀어졌습니다. 그래서 큰 아카이브 라인, 굵은 제목, 원형 썸네일 같은 요소로 내 사이트의 톤을 남기되, 글 자체는 편하게 읽히도록 만들었습니다.
앞으로의 정리
지금은 페이지별 컴포넌트가 빠르게 늘어나고 있어서, 반복되는 타이포그래피와 버튼 스타일은 조금 더 명확한 UI primitive로 묶을 수 있을 것 같습니다.
다만 추상화는 나중에 해도 늦지 않다고 생각합니다. 먼저 화면의 결을 찾고, 반복이 충분히 보일 때 정리하는 편이 더 안전했습니다.
이번 작업을 하면서 추상화를 너무 빨리 하면 오히려 화면을 고치기 어려워진다는 것도 느꼈습니다. 아직 디자인이 움직이고 있는 상태에서는 공통 컴포넌트를 먼저 만들기보다, 각 페이지가 원하는 모양을 충분히 찾는 것이 더 좋았습니다.
물론 계속 이렇게 둘 수는 없습니다. 버튼, 태그, 큰 제목, 섹션 라벨, 스크롤 가능한 패널 같은 요소는 여러 번 반복되고 있습니다. 나중에는 이 요소들을 작은 primitive로 정리하면 유지보수가 훨씬 좋아질 것 같습니다.
그래도 지금 단계에서 가장 중요한 것은 내 포트폴리오가 어떤 인상을 주는지 찾는 일이었습니다. 화면을 만들고, 실제로 보고, 사용자의 피드백처럼 어색한 부분을 바로 고치면서 스타일의 방향이 조금씩 선명해졌습니다. 앞으로도 코드를 정리하는 일과 화면의 감각을 다듬는 일을 같이 가져가고 싶습니다.