Post

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

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

Posted
Preview Image
By
9 min read
배시은님 포트폴리오 1주차 작업 내용 피드백

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

작성일: 2025-08-23

github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다.

HTML,CSS는 최종적으로 화면에 보이는 결과가 가장 우선됩니다. 아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.

HTML (index.html) 분석

👍 장점 (Pros)

  • 시맨틱 태그 사용: <header>, <nav>, <main>, <article>, <footer> 등 시맨틱 태그를 적절히 사용하여 문서의 구조를 명확하게 표현했습니다. 이는 검색 엔진 최적화(SEO)와 웹 접근성에 긍정적인 영향을 줍니다.
  • 웹 접근성 (Accessibility): aria-label, role 등의 WAI-ARIA 속성을 사용하여 스크린 리더 사용자가 콘텐츠를 더 쉽게 이해할 수 있도록 노력한 점이 돋보입니다. (예: index.html:15, index.html:19)
  • 이미지 최적화: loading="lazy" 속성을 사용하여 화면에 보이지 않는 이미지의 로딩을 지연시킴으로써 초기 페이지 로딩 속도를 개선하고 있습니다. (예: index.html:156)

👎 단점 (Cons)

  • 인라인 스타일(Inline Styles): 여러 요소에 style 속성을 직접 사용하여 CSS를 적용하고 있습니다. 이는 코드의 재사용성을 떨어뜨리고 유지보수를 어렵게 만드는 요인입니다. (예: index.html:12, index.html:32, index.html:152)
  • 불필요한 div 요소: 구조적으로 큰 의미가 없는 <div> 태그가 중첩되어 사용된 부분이 있습니다. (예: index.html:181 주변)

💡 개선사항 (Suggestions)

1. 인라인 스타일을 CSS 파일로 분리

  • 위치: index.html:12, index.html:152 등
  • 문제점: HTML 파일 내에 CSS 코드가 섞여 있어 코드 관리가 어렵고, 동일한 스타일을 다른 요소에 재사용하기 힘듭니다.
  • 개선 예시:
    1
2
3
4
5

    <!-- 기존 코드 (index.html:12) -->
<header id="header" style>

<!-- 개선 코드 (style 속성 제거) -->
<header id="header">

    1
2
3
4

    /* style.css에 추가 */
#header {
    /* 기존 인라인 스타일 내용을 클래스나 ID 선택자로 옮겨 정의 */
}

2. alt 속성 값 구체화

  • 위치: index.html:225, index.html:234, index.html:243
  • 문제점: alt="" 와 같이 대체 텍스트가 비어있는 경우, 스크린 리더 사용자는 이미지의 의미를 파악할 수 없습니다. 이미지가 순수 장식용이 아니라면 구체적인 설명을 제공하는 것이 좋습니다.
  • 개선 예시:
    1
2
3
4
5

    <!-- 기존 코드 (index.html:225) -->
<img src="./footer_card_1.png" alt="" class="" loading="lazy">

<!-- 개선 코드 -->
<img src="./footer_card_1.png" alt="공정무역 인증 마크와 원재료 이미지" class="" loading="lazy">

3. JavaScript 코드 분리

  • 위치: index.html:298-328
  • 문제점: HTML 파일 내에 <script> 태그로 JavaScript 코드가 직접 작성되어 있습니다. 코드가 길어질수록 HTML 문서의 가독성을 해치고, 다른 페이지에서 재사용하기 어렵습니다.
  • 개선 방법:
    1. main.js 와 같은 별도의 JavaScript 파일을 생성합니다.
    2. index.html의 <script> 내용을 main.js로 옮깁니다.
    3. <body> 태그가 닫히기 직전에 파일을 불러옵니다. ```html …

    </body> </html> ```

CSS (style.css) 분석

👍 장점 (Pros)

  • CSS 변수 활용: :root에 --bs-body-font-size, --navbar-height 등 변수를 정의하여 일관성 있는 디자인 시스템을 구축하고 유지보수성을 높였습니다. (예: style.css:8, style.css:163)
  • 반응형 디자인: @media 쿼리를 사용하여 화면 크기에 따라 내비게이션 바의 노출 여부를 제어하는 등 반응형 웹을 고려한 스타일링을 적용했습니다. (예: style.css:78-85)
  • 가상 요소 활용: ::after 가상 요소를 사용하여 드롭다운 메뉴의 화살표 아이콘을 CSS만으로 구현하여 추가적인 HTML 요소 없이 시각적 효과를 주었습니다. (예: style.css:144)

👎 단점 (Cons)

  • ID 선택자 과용: #header, #navbar-primary 등 ID 선택자를 광범위하게 사용하고 있습니다. ID는 재사용이 불가능하고 우선순위가 너무 높아 스타일 충돌(override)을 어렵게 만듭니다.
  • 복잡한 선택자: .navbar ul.navbar-nav>li.nav-item>a.nav-link 와 같이 선택자가 너무 길고 복잡합니다. 이는 브라우저의 렌더링 성능에 미미한 영향을 줄 수 있으며, 코드 가독성과 유지보수성을 크게 저해합니다. (예: style.css:114)
  • !important 사용: margin-top: 0 !important; 와 같이 !important 키워드를 사용하면 스타일 우선순위 규칙이 깨져 디버깅이 매우 어려워집니다. 꼭 필요한 경우가 아니라면 사용을 지양해야 합니다. (예: style.css:291)

💡 개선사항 (Suggestions)

1. ID 선택자를 클래스 선택자로 전환

  • 위치: style.css 전반 (예: #header, #navbar-primary, #main 등)
  • 문제점: ID는 한 페이지에 유일해야 하므로 재사용이 불가능하고, CSS 우선순위가 너무 높아 유연한 스타일링을 방해합니다.
  • 개선 예시:
    1
2
3

    <!-- index.html -->
<header class="site-header">
    <nav class="navbar-primary" ...>

    ```css /* style.css / / 기존 코드 */ #header { … } #navbar-primary { … }

    /* 개선 코드 */ .site-header { … } .navbar-primary { … } ```

2. 선택자 단순화 (BEM 방법론 등 활용)

  • 위치: style.css:114, style.css:125 등
  • 문제점: 불필요하게 긴 선택자는 가독성을 해치고 유지보수를 어렵게 합니다.
  • 개선 예시 (BEM 방법론 적용):
    1
2
3
4
5
6

    <!-- index.html -->
<ul class="navbar-primary__nav">
    <li class="navbar-primary__nav-item">
        <a href="#" class="navbar-primary__nav-link">아이스크림</a>
    </li>
</ul>

    1
2
3
4
5
6
7
8
9
10

    /* style.css */
/* 기존 코드 */
.navbar ul.navbar-nav>li.nav-item>a.nav-link { ... }

/* 개선 코드 */
.navbar-primary__nav-link {
    font-size: 20px;
    color: #141414;
    /* ... */
}

3. !important 제거 및 우선순위 조정

  • 위치: style.css:291
  • 문제점: !important는 CSS의 자연스러운 동작(cascading)을 방해하여 예측 불가능한 버그를 유발할 수 있습니다.
  • 개선 방법: !important를 제거하고, 필요한 경우 선택자의 명시도(specificity)를 높여 스타일을 적용합니다. 이 경우, sticky-guard가 밀어내는 margin-top을 초기화하는 것이 목적이므로, 더 구체적인 선택자를 사용하거나 스타일 적용 순서를 조정할 수 있습니다.
    1
2
3
4
5
6
7
8
9
10
11
12

    /* 기존 코드 */
#main{ margin-top: 0 !important; }

/* 개선 코드 */
/* sticky 클래스가 body에 추가될 때 main의 margin-top을 0으로 만드는 방식 등 */
body.sticky-active #main {
    margin-top: 0;
}
/* 또는 단순히 !important를 제거하고 다른 스타일과 충돌하는지 확인 후 조정 */
#main {
    margin-top: 0;
}
90.강의리소스, 메가스터디IT아카데미 - SpringBoot 백엔드 과정 주말반(25.02.22 ~ 25.09.13)
This post is licensed under CC BY 4.0 by the author.