📨 포트폴리오 마무리 단계 – 연락처 섹션 & 스크롤 라우팅 구현

포트폴리오 사이트를 마무리하면서 가장 마지막에 추가한 두 가지 기능이 있다.
바로 연락처(Contact) 섹션과 네비게이션 메뉴의 스크롤 라우팅 및 섹션 감지 처리다.
이 포스트에서는 어떻게 이 두 기능을 구현했는지, 그리고 왜 이렇게 구성했는지를 정리했다.

📮 연락처(Contact) 섹션 구성

대부분의 포트폴리오 사이트가 그렇듯, 마지막에는 이메일과 소셜 미디어 링크를 제공하는 섹션이 들어간다.
나는 여기에 이메일 링크, 소셜 링크, 이력서 다운로드 버튼을 포함했다.

📌 포함한 항목:

• 이메일 주소

• 위치 (간단한 텍스트)

• 소셜 아이콘 (GitHub, Velog)

• 이력서 다운로드 버튼

🧱 구현 방식:

<a href="mailto:jojh0323@gmail.com" className="text-indigo-600 hover:underline">
  jojh0323@gmail.com
</a>

소셜 아이콘은 react-icons에서 불러와 사용했고, 아래처럼 커스터마이징했다:

<FaGithub style={{ color: "#333", fontSize: "24px" }} />

✨ 스크롤 라우팅 구현

NavMenu의 각 메뉴를 클릭했을 때 해당 섹션으로 부드럽게 이동시키는 기능을 추가했다.
예를 들어, #tech, #projects 같은 앵커로 연결하고, scroll-behavior: smooth CSS 속성을 사용했다.

✏️ 핵심 코드:

const menus = [
  { name: "홈", id: "about" },
  { name: "기술스택", id: "tech" },
  ...
];

<a href={`#${menu.id}`} className="hover:text-indigo-600 transition">
  {menu.name}
</a>

🔍 스크롤 감지 기반 네비게이션 강조

추가로, 스크롤할 때 현재 화면에 보이는 섹션에 맞춰 네비게이션에서 해당 메뉴가 자동으로 강조되도록 했다.
이건 getBoundingClientRect()로 각 섹션의 위치를 계산해서 구현했다.

🔧 구현 코드:

useEffect(() => {
  const handleScroll = () => {
    const offset = window.innerHeight / 2;
    for (const menu of menus) {
      const section = document.getElementById(menu.id);
      if (section) {
        const rect = section.getBoundingClientRect();
        if (rect.top <= offset && rect.bottom >= offset) {
          setActiveId(menu.id);
          break;
        }
      }
    }
  };

  window.addEventListener("scroll", handleScroll);
  handleScroll();
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

💡 디자인적으로 고려한 점:

• scroll-mt-16을 각 섹션에 부여해서 클릭 시 상단에 딱 붙지 않도록 여백 확보

• 화면 중간 기준으로 감지해서 UX가 부드럽고 직관적

🧠 useActiveSection 커스텀 훅

• 사용자가 스크롤할 때 현재 보고 있는 섹션에 따라 네비게이션 메뉴를 자동으로 강조 표시하기 위해 useActiveSection이라는 커스텀 훅을 만들었다.

• 이 훅은 IntersectionObserver를 활용해 각 섹션의 화면 진입 여부를 판단하고, 가장 먼저 화면 중앙 근처에 들어온 섹션의 id를 반환한다.

🧱 구현 코드 (요약):

export function useActiveSection(sectionIds: string[]) {
  const [activeId, setActiveId] = useState(sectionIds[0]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
            break;
          }
        }
      },
      { rootMargin: "-50% 0px -50% 0px", threshold: 0.1 }
    );

    sectionIds.forEach((id) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });

    return () => observer.disconnect();
  }, [sectionIds]);

  return activeId;
}

🎯 적용 방식:

const activeId = useActiveSection(menus.map((m) => m.id));

<a
  href={`#${menu.id}`}
  className={activeId === menu.id ? "text-indigo-600" : "text-gray-600"}
>
  {menu.name}
</a>

이 방식은 스크롤 위치에 따라 동적으로 현재 섹션을 감지하고, 해당 메뉴를 강조할 수 있어 사용자 경험이 훨씬 자연스럽고 직관적이다.

🧩 고민과 선택

• 연락 폼을 넣지 않은 이유:
  대부분의 사용자가 이메일이나 GitHub를 통해 직접 연락하기 때문. 오히려 폼은 번거로울 수 있다.

• 스크롤 라우팅 도입 이유:
  링크 클릭 시 순간 이동보다 훨씬 자연스럽고, 사용자 시선의 흐름을 끊지 않아서 좋았다.

• 스크롤 감지 기능 추가 이유:
  내가 어떤 섹션을 보고 있는지 명확하게 인지할 수 있어, 사용성과 전문성이 함께 올라간다.

✅ 마무리

이번 작업은 사이트의 완성도를 높이는 중요한 마무리 단계였다.
특히 사용자가 마지막까지 사이트를 봤을 때, 연락할 수 있는 방법이 명확하게 안내되어야 진짜 포트폴리오라고 생각한다.
또한, 스크롤 라우팅과 감지 기능은 자잘하지만 사용자 경험을 확 끌어올리는 핵심 포인트였다.

https://portfolio-kappa-rouge-28.vercel.app/