포트폴리오 카드 배경 정리로 시각 노이즈 제거
목차
배경 파티클 애니메이션이 비쳐서 콘텐츠가 흐려지던 포트폴리오 페이지 문제를 불투명 배경 처리로 깔끔하게 정리했다.
문제: 장식 요소가 콘텐츠를 방해하다
포트폴리오 페이지의 "오늘의 글" 보드 영역 뒤로 히어로 섹션의 파티클 애니메이션이 계속 비쳐 보였다. 멈춰 있는 콘텐츠 뒤에 움직이는 배경이 있으니 시각적으로 산만하다. 사람 눈은 움직이는 것에 끌리는 습성이 있어서, 파티클이 계속 움직이면 그쪽으로 시선이 자꾸 분산되고 텍스트 콘텐츠에 집중하기 어렵다. 포트폴리오처럼 "자신의 작업과 경험을 정확하게 전달해야 하는" 페이지에서 이런 시각적 노이즈는 치명적이다. 사용자가 우리 글을 읽게 하려면 그 부분만 명확하게 보여야 한다.
해결: 불투명 배경으로 시각 계층 분리
"오늘의 글" 보드에 불투명한 배경색을 입혀서 뒤의 파티클을 완전히 차단했다. 간단한 수정이지만 널리 쓰는 UI 디자인 패턴이다.
파티클·배경 애니메이션과 콘텐츠의 분리 원칙
- 장식 요소(파티클, 배경 이미지, 그라디언트)는 한 레이어에서 자유롭게 움직이거나 변한다
- 콘텐츠가 있는 영역은 명확한 배경색(또는 투명도 조정)으로 그 영역만 고립시킨다
- 이렇게 하면 사용자의 눈이 콘텐츠에만 집중할 수 있다
웹에서 자주 쓰는 구현 패턴:
- 완전 불투명: 배경색을 rgba(255, 255, 255, 1.0) 같이 투명도 100%로 설정 → 뒤의 모든 것이 보이지 않음
- 반투명: rgba(255, 255, 255, 0.95) 정도로 약간의 투명도 유지 → 장식을 흐릿하게 엿보이면서도 콘텐츠는 읽을 수 있게 함
- 선택 기준: 이 경우엔 콘텐츠(글 제목, 요약)가 명확해야 하니까 완전 불투명을 선택
다국어 페이지의 일관성
수정한 파일이 portfolio/en/index.html과 portfolio/index.html 두 개다. 영문, 한글 버전 모두에 같은 처리를 했다. 다국어를 지원하는 서비스에서 이런 UI 수정은 모든 언어판에 동일하게 적용해야 한다. 한국 사용자에겐 깔끔한데 영문 사용자에겐 산만하다면 이상하니까. 다국어 파일이 여러 개일 때 일관성을 놓치기 쉽지만, 이런 작은 수정일수록 두 파일을 동시에 검토하고 테스트하는 습관이 중요하다.
회고: 배경 조정의 중요성
처음엔 "파티클 강도를 줄여볼까?" 생각도 했다. 하지만 그러면 히어로 섹션의 분위기 자체가 옅어진다. 콘텐츠는 원래 명확하게 해야 하고, 배경은 어디까지나 분위기 역할일 뿐이라는 판단이 들었다. 차라리 두 영역을 명확하게 분리하는 게 맞다.
웹 디자인에서 "배경과 콘텐츠의 분리"는 매우 중요한 원칙이다. 특히 포트폴리오처럼 "자신의 능력을 보여주는" 페이지에서는 더욱 그렇다. 멋진 배경도 좋지만, 결국 사용자가 보고 싶은 것은 우리의 작업이고 글이다. 히어로 섹션의 파티클은 첫 인상을 주기 위한 것이지, 글 영역까지 침범해야 하는 건 아니다.
이렇게 작은 UI 수정 여러 개가 모여서 "이 사이트는 반듯하고 신경 쓴 느낌"이라는 사용자 경험이 만들어진다. 한두 줄의 CSS나 HTML 수정은 작아 보이지만, 누적되면 전체 품질 인상을 크게 좌우한다. 개인 포트폴리오를 만들 때나, 팀이 작아서 개발자가 UI 피드백까지 직접 받을 때면, 이런 디테일을 놓치지 않는 게 중요하다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.