배시은님 포트폴리오 3주차 작업 내용 피드백

메가스터디IT아카데미 SpringBoot 백엔드 개발자 과정 주말반 (25.02.22 ~ 25.09.13). 배시은님의 포트폴리오 3주차 작업 내용에 대한 피드백

Posted Sep 6, 2025

4 min read

작성일: 2025-09-06
github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다.
아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.

최근 많은 페이지를 추가하고 코드 구조를 개선하는 등 프로젝트에 큰 노력을 기울이신 점이 인상적입니다. 전반적으로 깔끔하고 일관성 있는 코드를 작성하고 계십니다. 몇 가지 개선점을 제안해 드리니, 더 완성도 높은 프로젝트로 발전시켜 나가시길 바랍니다.

잘된 점 (👍)

1. 컴포넌트 기반의 일관된 페이지 구조

index.html, contact-us.html 등 여러 페이지에서 헤더(header), 푸터(footer) 영역이 일관된 구조로 잘 작성되었습니다. 이렇게 공통되는 부분을 통일감 있게 관리하는 것은 유지보수 측면에서 매우 좋은 습관입니다.

2. 동적인 UI 구현

main.js 파일을 통해 상단 메뉴바 토글, 플레이버 패키지 타입 전환, 이미지 갤러리 등 여러 인터랙티브한 기능들을 자바스크립트로 잘 구현하셨습니다. 특히 바닐라 자바스크립트(Vanilla JS)를 사용하여 라이브러리 의존 없이 직접 기능을 만드신 점이 돋보입니다.

main.js (L1-L33): 상단 메뉴바 토글 기능

  
(function () {
  const primary = document.getElementById('navbar-primary');
  if (!primary) return;

  const toggles = primary.querySelectorAll('.nav-link-toggle[data-bs-target]');
  const panels  = primary.querySelectorAll('.collapse[data-collapse="nav"]');

  function closeAll() {
    panels.forEach(p => {
      bootstrap.Collapse.getOrCreateInstance(p, { toggle: false }).hide();
    });
  }
...

3. 시맨틱 HTML 및 웹 접근성 노력

<nav>, <main>, <aside>, <footer> 등 시맨틱 태그를 적절히 사용하고, aria-label, role 등의 속성을 활용하여 웹 접근성을 높이려는 노력이 보입니다. 이는 검색엔진 최적화(SEO)와 스크린 리더 사용자 모두에게 도움이 되는 중요한 부분입니다.

index.html (L13-L16): 웹 접근성을 고려한 로고 링크

  
                      <a class="navbar-brand" href="/" aria-label="Ben &amp; Jerry's 홈페이지">
                                  <img class="logo" alt="Ben &amp; Jerry's 로고" src="../assets/img/logo.png">
                      </a>

개선점 (💡)

1. CSS 스타일의 일관성 및 효율성 (제안)

현재 많은 HTML 요소에 인라인 스타일(style="...")이 적용되어 있습니다. 또한, style.css 내부에 일부 중복되는 코드가 보입니다. 이를 CSS 클래스로 분리하여 관리하면 코드의 재사용성과 유지보수성을 높일 수 있습니다.

문제점: index.html 등 여러 파일에서 main 태그에 margin-top이 인라인 스타일로 적용되어 있습니다.
- index.html (L213)
  1 <main id="main" style="margin-top: 112px;">
- new-york-super-fudge-chunk-ice-cream.html (L220)
  1 <main id="main" style="margin-top: 180px;">

개선 제안: 각 페이지의 특성에 맞는 CSS 클래스를 정의하여 style.css에서 스타일을 관리하는 것을 권장합니다.

  
/* style.css */
.page-home #main {
  margin-top: 112px;
}

.page-flavour-detail #main {
  margin-top: 180px;
}

  
<!-- index.html -->
<body class="template-home page-home">
  ...
  <main id="main">
  ...

이번 한 주도 정말 수고 많으셨습니다! 다음 작업도 기대하겠습니다. 화이팅하세요! 😊

90.강의리소스, 메가스터디IT아카데미 - SpringBoot 백엔드 과정 주말반(25.02.22 ~ 25.09.13)

This post is licensed under CC BY 4.0 by the author.

배시은님 포트폴리오 3주차 작업 내용 피드백

잘된 점 (👍)

1. 컴포넌트 기반의 일관된 페이지 구조

2. 동적인 UI 구현

3. 시맨틱 HTML 및 웹 접근성 노력

개선점 (💡)

1. CSS 스타일의 일관성 및 효율성 (제안)

Trending Tags