[박지섭] sprint1 #24
[박지섭] sprint1 #24
Conversation
- 반응형을 기반해서 구현했습니다.
- 미션 조건에 맞춰서 수정했습니다.
- figma에 폰트 규격이 3xl까지 있어서 4xl를 추가하였습니다.
- 반응형에 기반해서 구현했습니다.
- 헤더와 배너의 통일을 위해 반응형을 통합했습니다. - 추후 문제가 있을 시 되돌리기 위해 주석처리하였습니다.
- 스크롤을 포함해서 자연스러운 변화를 위해 값을 수정했습니다.
- 아직 css는 적용하지 않았습니다.
- 정보 섹션의 반응형은 아직 구현하지 않았습니다. - 자연스러움을 위해 다시 반응형 구간을 다시 추가했습니다.
- 반응형 구현 X
- 하단 고정을 제거했습니다.
| <a href="/" class="header__logo"> | ||
| <picture> | ||
| <source media="(max-width: 480px)" srcset="./assets/logos/logo_typo.png" /> | ||
| <img src="./assets/logos/logo_sm.png" alt="판다마켓 로고" /> | ||
| </picture> | ||
| </a> |
There was a problem hiding this comment.
헤더 로고를 이미지로 다운받았다보니 picture을 사용해서 로고를 변화하게 구현했습니다.
반응형을 통해 이미지를 바꿔야 할일이 생긴다면 이런식으로 구현하는지 아니면 잘못된 방법인지 리뷰 부탁드립니다!
There was a problem hiding this comment.
반응형 디자인은 1주차 요구사항이 아닌데 같이 구현하셨네요!
저는 요구사항과 디자인을 잘 반영했다면 충분히 좋은 방법이라고 생각해요.
위에서도 말씀드렸지만, 왜 이런 방식으로 구현하셨는지, 혹시 다른 방법도 고민해 보셨는지 그리고 어떤 기준으로 이 방식으로 고르셨는지 함께 공유해 주시면 더 정확한 피드백을 드릴 수 있을 것 같습니다!
There was a problem hiding this comment.
판다마켓 이라는 텍스트를 이미지로 관리하다보니 PC, 테블릿은 판다마켓 로고 + 판다마켓 으로 표현되어야 하고, 모바일 일때는 로고가 없느 판다마켓으로만 보여야하길래 picture 태그를 사용해서 width값 변화에 의해 이미지를 변경하게 구현했습니다. 처음 사용해보는 방법이고, 평소였다면 텍스트를 스타일값을 준 뒤, 앞에 이미지로고만 width값이 모바일 너비로 들어오면 안보이게 구현했을 것 같습니다.
There was a problem hiding this comment.
작업하신 방법도 적절합니다. 현 디자인의 경우 텍스트가 사이트내에서 사용되는 폰트와 다른 값이라 기존 방식대로 작업할 수 없는 경우니 이미지로 관리하시는 것이 더 적절합니다.
지금처럼 picture 태그를 이용해서 viewport별 이미지를 정해주셔도 되고, 아니면 텍스트와 로고 이미지를 분리 관리해서 평소 작업하시던 것처럼 작업하셔도 됩니다!
결론을 말씀드리자면 반응형 이미지를 처리할때, 이미지를 최적화 할때 picture 태그를 이용할 수 있고 이는 잘못된 방법이 아닙니다!
| .text-xs { | ||
| font-size: 12px; | ||
| line-height: 18px; | ||
| } |
There was a problem hiding this comment.
프리텐다드 폰트를 woff2 파일로 다운받아서 사용할까?, 아니면 cdn으로 불러서 사용할지 고민하다가 cdn으로 선언 후, 폰트 속성을 정의한 css파일을 구현해서 관리했습니다.
해당 고민은 스프린트를 시작하기 전에도 궁금했던 토픽이라 실무에서는 폰트나 폰트 속성을 어떻게 관리하는지 알려주시면 감사합니다..!
There was a problem hiding this comment.
음 딱 명확한 방식이 있기보다 프로젝트의 요구사항과 성능 측면을 고려해 폰트를 관리합니다.
폰트 속성의 경우 디자이너가 정해준, 디자인 토큰에 따라 관리를 합니다. 저희 프로젝트의 경우도 피그마 내부에서 디자이너가 선언해둔 폰트 스타일들을 확인할 수 있습니다.
따라서 디자이너와의 원활한 의사소통과 피그마를 보고 바로 알 수 있도록, 다른 이유가 없다면 이에 맞춰서 폰트를 관리합니다.
폰트 파일의 경우 프로젝트의 요구사항마다, 서버 세팅을 어떻게 하느냐에 따라 다를 것 같습니다.
이러한 고민을 하시는 것은 좋은 습관입니다. 다만 이런 고민은 큰 정답이 없습니다.
현재 요구사항에 맞춰 작업을 하는 것에 가깝기 때문이라고 생각합니다.
따라서 이러한 의문이 드실때 왜 이런 고민이 드는지를 생각해보시면 스스로도 정리가 되고, 저도 답변드리기 더 수월할 것 같습니다.
- woff2 파일로 관리했을 때의 장단점은?
- CDN으로 연결했을때의 장단점은?
- 위 두방식의 장단점을 고려할때 내가 구현해야 하는 프로젝트의 요구사항에서 어떤 것이 적절한가?
최종적으로 내가 한 선택이 프로젝트 요구사항과 어떤 점에서 맞았는지 정리해보시면 도움이 되실 것 같습니다.
There was a problem hiding this comment.
최적화와 렌더링이 가장 큰 주제가 될 것 같습니다.
제가 프로젝트를 많이 해본적이 없어서 둘의 차이를 느껴보질 못했지만, 모바일 chrome, Naver 앱에 의한 폰트 적용이 안되어서 woff2를 적용시켜서 해결해 보려고 했습니다. (결국 실패했지만요.. ㅎㅎ)
용량도 적고 커스텀이 가능한 woff2를 사용하는게 맞다고 생각했을 때 CORS에러의 이슈도 있고해서 해답을 구하지 못했습니다. (예전 프로젝트를 진행할때는 커스텀 폰트를 사용하느라 woff2를 채택한 뒤, 프론트단에서 관리했습니다.)
그래서 실무에서는 어떤식으로 관리하는지 궁금했었습니다!
리액트, Nextjs를 시작하기 전 프로젝트에서는 CDN으로 관리하는 것이 편하고 적절하다고 생각합니다.
There was a problem hiding this comment.
프로젝트의 규모나 요구사항, 성능 최적화 여부에 따라 폰트 관리 방식이 달라지기 때문에 실무에서도 정답이 딱 정해져 있는 건 아닙니다.
보통 CDN을 사용하면 간편하고 빠르게 적용할 수 있지만, 네트워크 상태에 따라 영향을 받을 수 있고, 폰트 적용이 예상과 다르게 동작할 수도 있습니다. 반면, 폰트 파일을 직접 관리하면 더 자유롭게 최적화가 가능하고, 네트워크 의존성이 낮아지지만 초기 개발비용이 들고, 배포 방식에 따라 설정이 추가로 필요할 수도 있습니다.
따라서 현재 프로젝트 상황에 따라 선택하는 것이 중요합니다. 말씀하신 것처럼 React나 Next.js를 사용하기 전에는 CDN 방식이 편리하고 적절하지만 이후에는 프로젝트의 상황에 따라 선택하시는 것처럼 "상황"과 "왜"가 중요합니다! 그래서 경험을 쌓으면서 "내가 어떤 선택을 했고, 그 선택이 왜 유효했는지" 계속 고민해보시면서 기준을 찾는 것이 중요합니다.
+실무에 대해 궁금해하시는 것 같아 첨언을 하자면, 기본적으로 해당 폰트 파일중 가변굵기와 다이나믹 섭셋을 지원하는 경우 해당 폰트를 사용했으며, 필요시 cloud server에 폰트파일을 직접 호스팅 해 사용하거나 프로젝트 내부에서 관리하기도 했습니다~
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
지섭님 첫번째 PR 제출 고생하셨습니다!
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차도 화이팅입니다~
-
commit 쪼개시고 형식에 따라 message 작성하신 것 좋습니다.
-
<div> 태그를 최소한으로 사용하고 시맨틱태그를 사용하고자 했습니다. HTML 구조가 괜찮은지 리뷰 부탁드려요!: 괜찮습니다~ -
반응형 웹을 구현 해본 것이 이번이 처음이라 자연스럽지 않게 반응형을 구현했습니다.. 미디어 쿼리를 이런식으로 나눠도 괜찮은지, 아니면 크게 태블릿, 모바일 두가지로 나누고 %,rem 같은 단위로 구현해야하는지 알려주시면 감사합니다!: 음 자연스럽지 않다는 것이, 아마 화면 사이즈가 줄어들 때 요소의 크기가 변하는 것이 아니라 특정 breakpoint에 따라 크게크게 width가 변경되는 부분을 말씀하시는 것 같아요. 이러한 사이트를 적응형 사이트라고 합니다. 만약 이러한 결과물을 원하신거면 괜찮고, 반응형 디자인을 원하신거면 PC css를 작성하실때부터 width, height 같은 값들에 반응형 단위를 사용하시는 것을 추천드려요.
div {
width: 92%;
max-width: 1200px;
}| <a href="/" class="header__logo"> | ||
| <picture> | ||
| <source media="(max-width: 480px)" srcset="./assets/logos/logo_typo.png" /> | ||
| <img src="./assets/logos/logo_sm.png" alt="판다마켓 로고" /> | ||
| </picture> | ||
| </a> |
There was a problem hiding this comment.
반응형 디자인은 1주차 요구사항이 아닌데 같이 구현하셨네요!
저는 요구사항과 디자인을 잘 반영했다면 충분히 좋은 방법이라고 생각해요.
위에서도 말씀드렸지만, 왜 이런 방식으로 구현하셨는지, 혹시 다른 방법도 고민해 보셨는지 그리고 어떤 기준으로 이 방식으로 고르셨는지 함께 공유해 주시면 더 정확한 피드백을 드릴 수 있을 것 같습니다!
| align-items: center; | ||
| justify-content: space-between; | ||
| border-bottom: 1px solid #dfdfdf; | ||
| padding: 9.5px 200px; |
There was a problem hiding this comment.
💬 여담
css에서의 소수점 사용에 대해 다양한 의견이 있습니다.
예전에는 이러한 소수점이 떨어져 나간다는 것이 정론에 가까웠으나, 다양한 해상도가 나오면서 이러한 소수점도 반영된다는 의견이 있습니다.
정확한 명세로 나온것은 없지만, 저는 소수점 사용을 지양하는 편입니다.
만약 같은 화면 크기임에도 해상도에 따라 소수점이 반영되는 것이 갈린다면, 디자인의 일관성이 떨어지는 것이고 소수점 사용은 가독성에 좋지 못하다고 생각하기 때문입니다~
이와 관련해 다양한 논의들이 있으니 참고해보세요!
https://www.reddit.com/r/css/comments/148y3xm/is_it_ok_to_give_text_the_size_in_decimals_like/
There was a problem hiding this comment.
피그마 속성 값을 보고 스타일을 적용하다보니 생긴 이슈입니다!
혹시나 디자이너가 9.5px로 지정해뒀다면 그걸 따르는 것이 좋은지 아니면 디자이너에게 10px같은 값으로 수정을 요구하는게 맞는지 알려주세요! (미션에서 수정해 달라는 것은 아닙니다!!)
| @media (max-width: 1010px) { | ||
| .info { | ||
| margin: 24px; | ||
| gap: 52px; | ||
| } |
There was a problem hiding this comment.
💊 제안
해당 페이지에서 사용되는 요소들의 css 를 분리해두셨지만 media query 문은 한곳에 두셨군요~
만약 쪼개실거라면, media query 문도 해당하는 파일 하단으로 옮기시는 것이 더 좋지 않을까합니다.
만약 이렇게 하고 싶으시다면 css를 안 쪼개시는 것도 방법일 것 같아요~
There was a problem hiding this comment.
제가 구현한 스타일이 적응형 웹인지 모르고 구현하다보니 생긴 이슈입니다.
반응형을 구현하려면 pc, tablet, mobile의 미디어 쿼리를 각각의 css에서 적용할 것 같아 index.css에서 관리하는 것이 맞다고 판단해서 이렇게 시작했지만.. break point가 많아져서 길어진 것 같습니다.
적응형 웹을 반응형 웹으로 수정해서 브레이크포인트를 pc, tablet, mobile로 3개로 지정한다고 하더라도 각각의 css에서 미디어 쿼리를 관리하는 것이 좋은지, index.css에서 관리하는 것인지 알려주세요!
There was a problem hiding this comment.
브레이크포인트를 pc, tablet, mobile로 3개로 지정한다고 하더라도 각각의 css에서 미디어 쿼리를 관리하는 것 / index.css에서 관리하는 것 중 어떤 것이 좋은지 질문 주셨는데, 둘다 어떤 방식인지 이해가 잘 가지 않습니다.
다만 코딩에 정답은 없고, 각 방법의 장단점을 비교해 하나를 선택하는 것이라고 생각합니다~
두 방법의 장단점을 고민해보시고 현재 프로젝트와 어떤 것이 더 적절한 지 고민해서 선택하시면 된다고 생각합니다~
직접 생각해보시고 결정해보는 것이 학습에 있어 중요하니 지섭님께서 더 적절한 방법을 골라 적용해보시면 좋겠습니다!
+저는 close된 PR의 코멘트를 확인하지 않으니 더 자세한 설명이나 질문은 DM 주세요!
| .text-xs { | ||
| font-size: 12px; | ||
| line-height: 18px; | ||
| } |
There was a problem hiding this comment.
음 딱 명확한 방식이 있기보다 프로젝트의 요구사항과 성능 측면을 고려해 폰트를 관리합니다.
폰트 속성의 경우 디자이너가 정해준, 디자인 토큰에 따라 관리를 합니다. 저희 프로젝트의 경우도 피그마 내부에서 디자이너가 선언해둔 폰트 스타일들을 확인할 수 있습니다.
따라서 디자이너와의 원활한 의사소통과 피그마를 보고 바로 알 수 있도록, 다른 이유가 없다면 이에 맞춰서 폰트를 관리합니다.
폰트 파일의 경우 프로젝트의 요구사항마다, 서버 세팅을 어떻게 하느냐에 따라 다를 것 같습니다.
이러한 고민을 하시는 것은 좋은 습관입니다. 다만 이런 고민은 큰 정답이 없습니다.
현재 요구사항에 맞춰 작업을 하는 것에 가깝기 때문이라고 생각합니다.
따라서 이러한 의문이 드실때 왜 이런 고민이 드는지를 생각해보시면 스스로도 정리가 되고, 저도 답변드리기 더 수월할 것 같습니다.
- woff2 파일로 관리했을 때의 장단점은?
- CDN으로 연결했을때의 장단점은?
- 위 두방식의 장단점을 고려할때 내가 구현해야 하는 프로젝트의 요구사항에서 어떤 것이 적절한가?
최종적으로 내가 한 선택이 프로젝트 요구사항과 어떤 점에서 맞았는지 정리해보시면 도움이 되실 것 같습니다.
|
정성스러운 리뷰 감사합니다! 남겨주신 리뷰를 꼼꼼히 살펴봤고, 추가로 궁금한 점을 코멘트로 남겼습니다! |
2 participants
요구사항
기본
심화
스크린샷
멘토에게
<div>태그를 최소한으로 사용하고 시맨틱태그를 사용하고자 했습니다. HTML 구조가 괜찮은지 리뷰 부탁드려요!미디어 쿼리를 이런식으로 나눠도 괜찮은지, 아니면 크게 태블릿, 모바일 두가지로 나누고
%,rem같은 단위로 구현해야하는지 알려주시면 감사합니다!