Skip to content

[8주차/카사] 워크북 제출합니다.#85

Open
jjeunv wants to merge 5 commits into
UMC-Inha:카사/mainfrom
jjeunv:main
Open

[8주차/카사] 워크북 제출합니다.#85
jjeunv wants to merge 5 commits into
UMC-Inha:카사/mainfrom
jjeunv:main

Conversation

@jjeunv
Copy link
Copy Markdown
Member

@jjeunv jjeunv commented May 21, 2026 •
edited
Loading

✅ 워크북 체크리스트

  • 모든 핵심 키워드 정리를 마쳤나요?
  • 핵심 키워드에 대해 완벽히 이해하셨나요?
  • 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
  • 미션을 수행하셨나요?
  • 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

  • 디렉토리 구조 컨벤션을 잘 지켰나요?
  • pr 제목을 컨벤션에 맞게 작성하였나요?
  • pr에 해당되는 이슈를 연결하였나요?(중요)
  • 적절한 라벨을 설정하였나요?
  • 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
  • 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

미션 3의 배경 스크롤 방지 항목 구현 중에 궁금한 점이 생겼습니다 ❗❗ ◑﹏◐

일반적으로 사이드바가 열렸을 때 배경 스크롤을 막는 것이 UX 관점에서 권장되는 패턴이라고 적혀있었는데,
저는 미션을 진행하면서 오히려 사이드바를 탐색하면서 배경 콘텐츠도 함께 스크롤할 수 있는 편이 더 자연스러울 수 있다고 생각했습니다. §(￣▽￣)§

여러분은 생각은 어떤지 궁금합니다~.~ 사이드바가 열렸을 때 배경 스크롤을 막는 것이 더 나은 UX라고 생각하시나요? 👀

@jjeunv jjeunv self-assigned this May 21, 2026
@jjeunv jjeunv requested a review from qkrdmsthff as a code owner May 21, 2026 05:00
@jjeunv jjeunv linked an issue May 21, 2026 that may be closed by this pull request
Chapter08_Debouncing & Throttling #75
Open
12234538
12234538 reviewed May 24, 2026
View reviewed changes
Comment thread mission/chapter08/mission01/src/hooks/useDebounce.ts
@@ -0,0 +1,15 @@
import { useEffect, useState } from "react"
Copy link
Copy Markdown

@12234538 12234538 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

debounce를 처음 들어봐서 어떻게 코드를 짜야할지 잘 몰랐는데 카사 코드가 깔끔해서 참고하기 좋을 것 같아요!

@seohyeon0219
Copy link
Copy Markdown

seohyeon0219 commented May 24, 2026 •
edited
Loading

카사 말을 듣고 저도 찾아봤는데,
원래는 사이드바가 열리면 배경 스크롤을 막는 이유에는

  • 사용자의 집중을 사이드바로 유도
  • 뒤 페이지가 의도치 않게 움직이는 것을 방지
  • 사이드바가 화면을 덮고 있는데 뒤 배경이 움직이면 시각적으로 어색하고 완성도가 떨어져보이는 문제

등등이 있다구 하더라구요!

그런데 제 생각에는 현재 구조에서 데스크탑과 모바일일 때의 사이드바 역할이 조금 다르다고 느꼈습니다.
데스크탑에서 페이지를 로드하면 기본적으로 사이드바가 열린 상태인 반면,
모바일/협소 화면에서 사이드바가 숨김처리되고 필요할 때만 열리며, 사이드바를 열면 배경이 어두워지는 CSS 효과가 있습니다.

정리해보면 아래와 같이 차이점이 있을 것 같아요.

모바일 사이드바 데스크탑 사이드바
형태 오버레이 (메인 위에 뜸) 고정 (메인 옆에 나란히)
메인과의 관계 메인을 가림 메인과 공존
스크롤 잠금 필요 필요 불필요
기본 상태 닫힘 열림

데스크탑의 경우 스크롤을 막아버리면 사용자는 메인 컨텐츠를 보려고 할 때마다 사이드바를 닫아야 해 UX적으로 불편함이 있을 것 같습니다.

그래서 제 생각에는 모바일(오버레이형)에서는 스크롤을 잠그고, 데스트탑(고정형)에서는 스크롤 잠금을 해제하는 방향이 좋아보입니다!

구현은 CSS 미디어쿼리를 이용해 아래처럼 코드를 작성하면 좋을 것 같습니다!

useEffect(() => {
  if (isOpen) {
    document.body.classList.add('sidebar-open');
  } else {
    document.body.classList.remove('sidebar-open');
  }
  return () => {
    document.body.classList.remove('sidebar-open');
  };
}, [isOpen]);

/* 모바일에서만 적용 */
@media (max-width: 767px) {
  body.sidebar-open {
    overflow: hidden;
  }
}

haewonwon
haewonwon reviewed May 25, 2026
View reviewed changes
Copy link
Copy Markdown

@haewonwon haewonwon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저번 스터디 시간에도 얘기했지만, 폴더 구조를 보완하면 더 좋은 설계가 될 수 있을 것 같아요!
지금은 pages 폴더 안에 다양한 기능 페이지 폴더를 생성하고 그 안에 components, hooks를 두고 있는데 두 가지 방향으로 보완할 수 있을 것 같네요!

  1. src 디렉토리 아래, components. containers, pages, layouts, hooks 등을 같은 레벨에 두고 그 안에서 각각의 feature 폴더 만들기
  2. src 디렉토리 아래, feature 폴더를 만들고 components. containers, pages, layouts, hooks 등을 두기

https://feature-sliced.design/blog/frontend-folder-structure
이 링크에 들어가시면 이미지가 있는데, 그걸 참고해서 리팩토링해 보는 것도 좋을 것 같아요!

더불어 개인적으로 사이드바가 open 상태일 때, 배경 스크롤은 막는 게 좋은 UX라고 생각이 듭니다!

UX, 즉 User experience는 명확해야 한다고 생각해요.

  1. UX를 설계할 때는 다양한 유저를 고려해야 하는데, 혹여나 스크린 리더기를 사용하는 유저일 경우 혼란스러울 수 있기에 접근성 측면에서 문제가 발생할 수 있는 설계라는 생각이 듭니다.
  2. 또, 배경 스크롤이 막혀 있다면 유저는 사이드바를 닫아서 해결할 수 있지만, 배경 스크롤이 허용되어 있는 경우, 유저가 시도할 수 있는 방법이 없고, 애초에 유저가 해결할 수 있는 문제가 아니기에 좋은 패턴이 아니지 않을까... 생각합니다.
  3. 결론은... 배경 스크롤을 막지 않으면 의도치 않은 동작이 발생할 수 있고 그로 인해 배경 스크롤을 막는 것보다 더 불편한 유저 경험을 줄 수 있다고 생각합니다!!!

다음 스터디에서 모두의 의견을 들어보면 좋을 것 같네요 ㅎㅎ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@haewonwon haewonwon haewonwon left review comments

@12234538 12234538 12234538 left review comments

@qkrdmsthff qkrdmsthff Awaiting requested review from qkrdmsthff qkrdmsthff is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@jjeunv jjeunv

Labels

chapter08 keyword mission practice

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Chapter08_Debouncing & Throttling

4 participants

@jjeunv @seohyeon0219 @haewonwon @12234538