피드백을 긍정적으로 검토하기
이번 수정은 혼자 발견한 문제라기보다, 실제로 포트폴리오를 봐준 친구의 피드백에서 시작됐습니다. 화면의 분위기나 블로그 인덱스처럼 의도한 부분이 잘 전달된 것도 있었고, 반대로 스크롤 신호와 해상도 대응처럼 내가 놓친 부분도 있었습니다.
정말 UI 쫀득하고 조타. 대기업홈페이지같아
블로그 차례 나누어져서 인덱스 있는 게 정말 너무 세심하고 감동적이라 조앗다.
개발 회고록 쓸 거면 갠홈에만 백업하지 말고 velog나 티스토리나,,, 디스콰이엇 같은 곳에도 글 함께 백업하면좋긴할듯 (나도블로그 전~혀안쓰지만, 암튼 기왕 쓸 거라면.)
첨에 어바웃페이지에서 스크롤 내려가는 건지 몰랏어 다른 페이지들처럼 쩜 쩜 쩜 쩜 잇으면 조을 것 같다이거 화면크기 달라서 잘리나 ? 100으로 보면 잘리는데 ... 90으로 보면 딱 맞아 ㅠㅠ좋았다는 말은 계속 가져가야 할 방향을 알려줬고, 불편했다는 말은 바로 고쳐야 할 기준이 됐습니다. 그래서 이번 작업은 단순히 오류를 수정하는 느낌보다, 다른 사람의 화면에서 내 의도가 어떻게 도착하는지 확인하는 과정에 가까웠습니다.
고정 90%에서 반응형 스케일로
가장 먼저 본 것은 전체 페이지를 감싸던 PageScaleWrapper였습니다. 기존에는 콘텐츠 전체에 zoom: 0.9가 고정으로 들어가 있었고, 이 덕분에 내 화면에서는 안정적으로 보였지만 다른 해상도에서는 기준이 흐려질 수 있었습니다.
이번에는 고정 줌을 없애고 --global-scale을 화면 폭과 화면 높이에 따라 계산하도록 바꿨습니다. 1600px 폭과 헤더를 뺀 812px 높이를 기준으로, 화면이 작을 때만 0.84에서 1 사이로 부드럽게 조정되게 했습니다. 모바일에서는 스케일을 1로 돌려 실제 반응형 레이아웃이 그대로 작동하게 했습니다.
이 변화는 단순한 숫자 수정처럼 보이지만 꽤 중요했습니다. 포트폴리오처럼 큰 타이포그래피와 패널형 화면이 많은 사이트에서는 전체 줌이 임시 해결책이 될 수 있지만, 결국 각 컴포넌트가 자기 자리에서 반응해야 더 안정적입니다.
:root {
--global-scale: clamp(
0.84,
min(calc(100vw / 1600), calc((100svh - var(--header-height)) / 812)),
1
);
}
@media (max-width: 640px) {
:root {
--global-scale: 1;
}
}스크롤 신호와 블로그 구조
About 페이지에서는 첫 화면만 보면 아래로 더 내려갈 수 있는지 알기 어렵다는 피드백이 있었습니다. 그래서 기존 Projects의 점 네비게이션과 같은 언어로 About에도 점을 추가했습니다. 디자인 시스템을 새로 만들기보다 이미 사이트 안에 있는 신호를 재사용한 결정이었습니다.
블로그에는 All, Dev Notes, Daily 탭을 추가했습니다. 개발 회고를 담는 공간이면서도 개인 블로그처럼 일상 기록을 남길 수 있으면 좋겠다는 피드백을 받아들인 변화입니다. Dev Notes는 구현과 회고 중심, Daily는 생활과 생각을 남기는 공간으로 나누었습니다.
블로그 상세의 Index도 다시 정리했습니다. 이전에는 GSAP으로 왼쪽 인덱스 위치를 계산해 따라오게 했지만, 해상도마다 안정적으로 보이려면 CSS sticky가 더 믿을 만했습니다. 그래서 sticky를 기본으로 두고 현재 섹션 활성화 로직만 유지했습니다. 화려한 계산보다 단순한 레이아웃 규칙이 더 좋은 선택이 되는 순간이었습니다.
프로젝트 화면을 낮은 높이에 맞추기
Projects 페이지는 큰 제목, 큰 이미지, 오른쪽 설명이 한 화면에 같이 들어와야 하는 페이지입니다. 그래서 세로가 낮은 노트북 화면에서 가장 먼저 답답해질 수 있었습니다. 이번에는 title padding, preview 높이, meta 간격을 svh 기준으로 줄여 낮은 화면에서도 같은 비율감이 유지되도록 조정했습니다.
특히 vh 대신 svh를 사용한 것이 중요했습니다. 모바일 브라우저나 작은 화면에서는 주소창과 실제 보이는 영역 차이 때문에 vh가 생각보다 불안정할 수 있습니다. svh를 쓰면 현재 보이는 작은 viewport에 더 가깝게 맞출 수 있어 패널형 화면에 안정적입니다.
모바일에서는 강제 패널 전환보다 자연 스크롤이 더 편했습니다. 그래서 PanelPager는 900px 이하에서 일반 스크롤로 전환하고, Projects는 하단 점 네비게이션으로 프로젝트를 넘길 수 있게 했습니다. 데스크톱의 전시형 경험과 모바일의 읽기 쉬운 흐름을 분리한 셈입니다.
이번 작업에서 남긴 기준
이번 피드백은 포트폴리오가 단순히 예쁜 화면에서 끝나면 안 된다는 걸 다시 알려줬습니다. 좋은 UI는 내 화면에서만 좋아 보이는 것이 아니라, 다른 사람의 노트북과 모바일에서도 의도가 유지되어야 합니다.
앞으로는 새 섹션을 만들 때 1440px 데스크톱, 1366px 노트북, 390px 모바일을 기본 확인 기준으로 두려고 합니다. 큰 타이포그래피는 clamp로 제한하고, 화면 높이에 민감한 패널은 svh 기준으로 먼저 계산하고, 모바일에서는 스케일이 아니라 실제 레이아웃으로 해결하는 방향을 유지하고 싶습니다.
아직 더 다듬을 부분은 많지만, 이번 수정으로 사이트가 조금 더 남의 화면을 배려하는 쪽으로 가까워졌다고 느꼈습니다. 나에게만 맞는 포트폴리오가 아니라, 보는 사람의 환경에서도 같은 인상으로 도착하는 포트폴리오를 계속 만들고 싶습니다.