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

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

작성일: 2025-08-30 github에 push된 코드를 바탕으로 장점, 단점, 그리고 개선사항을 정리했습니다. HTML,CSS는 최종적으로 화면에 보이는 결과가 가장 우선됩니다. 아래 사항은 참고만 하시고 적용 여부는 본인이 직접 판단하시면 됩니다.

리뷰 요약

지난 피드백 이후 refactor: 폴더 구조 변경 (assets/, home/ 추가 및 main/ 정리) 커밋을 통해 프로젝트 구조를 개선하고 신규 페이지를 추가하는 작업을 진행하셨네요. 전반적으로 코드와 파일 구조를 깔끔하게 정리하려는 노력이 돋보입니다.

잘된점 (Good Points)

1. 체계적인 폴더 구조 개선

assets 폴더를 새로 만들어 이미지 등 정적 파일들을 관리하고, main 폴더에 HTML/CSS 등 주요 소스들을 모아두어 프로젝트 구조를 한결 명확하게 개선했습니다. 이렇게 역할에 따라 폴더를 구성하면 앞으로 프로젝트 규모가 커져도 파일을 찾고 관리하기 훨씬 수월해집니다. 아주 좋은 시도입니다!

2. 일관성 있는 코드 스타일

main/index.html과 main/flavours.html 파일에서 이전에 다소 불규칙했던 들여쓰기를 일관성 있게 정리해주셨습니다. 코드의 가독성이 크게 향상되었고, 이는 다른 사람이 코드를 보거나 미래의 본인이 코드를 수정할 때 큰 도움이 됩니다.

관련 파일:

• main/index.html
• main/flavours.html

3. 신규 페이지(whats-new.html) 추가 및 스타일링

새로운 소식(What’s New) 페이지를 추가하고, 해당 페이지에 필요한 스타일을 main/style.css에 체계적으로 구현한 점이 좋습니다. 특히 필터링 네비게이션, 기사 목록, 사이드바 등 새로운 UI 요소들을 적절한 CSS 규칙으로 작성하여 페이지 레이아웃을 잘 구성했습니다.

관련 파일:

• main/whats-new.html (신규 작성)
• main/style.css (신규 스타일 추가)

개선점 (Areas for Improvement)

1. 이미지 경로 표현 방식 (제안)

main/index.html의 15라인을 보면 로고 이미지 경로가 ../assets/img/logo.png로 되어 있습니다.

<!-- main/index.html:15 -->
<img class="logo" alt="Ben &amp; Jerry's 로고" src="../assets/img/logo.png">

제안: ../ 와 같은 상대 경로는 현재 파일 위치를 기준으로 경로를 계산하기 때문에, 나중에 파일의 위치나 폴더 구조가 바뀌면 링크가 깨질 위험이 있습니다. 지금 구조에서는 문제가 없지만, 좀 더 안정적인 방법으로 프로젝트의 최상위(root) 폴더를 기준으로 경로를 작성하는 절대 경로 사용을 고려해볼 수 있습니다.

예를 들어, src="/assets/img/logo.png" 와 같이 /로 시작하는 경로를 사용하면, index.html 파일이 다른 곳으로 이동하더라도 이미지 경로는 항상 동일하게 유지되어 편리합니다. (단, 이 방식은 로컬에서 파일을 직접 열 때는 동작하지 않고 웹 서버 환경에서만 올바르게 동작합니다.)

2. CSS에서 아이콘 관리 방법 (제안)

main/style.css 파일의 997라인을 보면, 페이스북 아이콘을 SVG 코드를 직접 CSS에 넣는 ‘데이터 URI’ 방식으로 구현했습니다.

/* main/style.css:997 */
.social-links .icon.icon-facebook {
  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%23002f87%22 width=%22100%25%22 height=%22100%25%22 viewBox=%220 0 9.251 19.128%22%3E%3Cpath d=%22M25.891,36.127H29.17V26.582h2.716l.4-3.14H29.151v-2c0-.912.265-1.523,1.577-1.523h1.683v-2.8A22.339,22.339,0,0,0,29.968,17a3.787,3.787,0,0,0-4.077,4.134v2.309H23.16v3.14h2.731Z%22 transform=%22translate(-23.16 -16.999)%22/%3E%3C/svg%3E");
}

제안: 이 방법은 외부 이미지 파일을 요청하지 않아 속도에 미세한 이점이 있을 수 있지만, CSS 코드가 길어지고 나중에 아이콘 디자인을 수정하거나 다른 아이콘으로 교체하기가 매우 번거롭습니다.

더 나은 방법은 아이콘을 별도의 .svg 파일로 assets/img/icons/ 와 같은 폴더에 저장하고, <img> 태그를 사용하거나 CSS의 background-image: url('/assets/img/icons/facebook.svg'); 와 같이 파일 경로로 불러오는 것입니다. 이렇게 하면 아이콘 자산을 관리하기가 훨씬 쉬워지고 CSS 코드도 깔끔하게 유지됩니다.

3. .DS_Store 파일 관리 (수정 권고)

Git에 .DS_Store 파일이 포함되어 있습니다. 이 파일은 macOS 운영체제에서 자동으로 생성하는 시스템 파일로, 프로젝트 코드와는 관련이 없습니다. 다른 개발 환경(예: Windows)에서는 불필요한 파일이므로 Git 저장소에 포함하지 않는 것이 일반적입니다.

수정 권고: 프로젝트의 .gitignore 파일에 .DS_Store 한 줄을 추가해주세요. 이렇게 하면 앞으로는 Git이 이 파일을 추적하지 않게 됩니다. 이미 추가된 파일은 git rm --cached main/.DS_Store 명령어로 저장소에서 삭제할 수 있습니다.

---

이번 한 주도 수고 많으셨습니다! 폴더 구조를 정리하는 것은 귀찮을 수 있는 작업이지만, 장기적으로 프로젝트를 건강하게 유지하는 데 정말 중요한 첫걸음입니다. 다음 작업도 기대하겠습니다.