📝 한줄 요약
사이드바의 태그 공백이 크다는 피드백 → CSS의 padding 값을 0.4rem에서 0.3rem으로 줄여서 → 태그가 더 촘촘해지는 변화를 만들었습니다. 작은 숫자 변화가 UI 전체 느낌을 바꿀 수 있다는 것을 배웠습니다.
👥 이런 분께 추천
CSS를 처음 배우는 비개발자
UI 레이아웃 조정 작업에서 “뭘 수정해야 할까” 막히는 분
“여백”이 무엇인지 구체적으로 알고 싶은 분
코드 한 줄 변경이 화면에 미치는 영향을 직접 보고 싶은 분
🙋 내 스펙 & 환경
항목
내용
직업
비개발자, 첫 CSS 손수정
코딩 경험
HTML은 조금, CSS는 복사·붙여넣기만
AI 도구
Claude (코드 이해할 때, 패딩 개념 설명할 때)
환경
Windows 11, VS Code
진행 방법
1. 왜 하게 되었나
학습 사이트의 왼쪽 사이드바에 사이트 네비게이션과 프로젝트 태그들이 있습니다.
그 태그들(PRD, 로드맵, 플랜)을 보니 태그 각각이 너무 넓었어요. 사이에 공백이 많아서 눈에 띄게 불필요하게 길어 보였습니다.
사용자의 피드백: “공백이 있어서 태그의 길이가 조금 더 길어졌어. 그걸 줄였으면 하는 거야.”
2. 첫 번째 벽: “그 공백이 뭐지?”
mvp 앱 한국어 버전의 스크린샷
처음엔 이 “공백”이 정확히 뭔지 몰랐습니다.
HTML에 여분의 공간이 있나? (아님)
폰트 자체가 큰 건가? (아님)
텍스트 사이에 숨은 문자가 있나? (아님)
Claude에게 물었습니다:
“사이드바의 태그들이 공백이 많아서 길어 보인다고 하는데, 이게 뭘 의미하는 걸까?”
Claude의 답:
“그건 CSS의
padding일 가능성이 높습니다. 요소 내부의 여백이 크면 그 요소 자체가 커 보이니까요.”
배운 것: CSS에는 여백을 만드는 방법이 여러 개 있다.
3. 두 번째 벽: “그럼 padding이 뭐고 어디를 고쳐야 해?”
코드를 봐야 했습니다.
WikiSidebar.astro 파일의 CSS 부분을 찾았어요.
처음에 본 코드:
.tag {
font-size: 0.65rem;
padding: 0.08rem 0.4rem; ← 여기!
border-radius: 4px;
white-space: nowrap;
font-weight: 500;
}이 padding: 0.08rem 0.4rem;이 문제였습니다.
padding 읽는 법:
첫 번째 값
0.08rem: 위아래 여백 (매우 작음)두 번째 값
0.4rem: 좌우 여백 (꽤 큼)
결론: 태그의 좌우에 0.4rem만큼 빈 공간이 있어서, 태그 너비가 불필요하게 넓었던 것!
4. 해결 과정
0.4rem → 0.3rem으로 줄였습니다.
변경 전:
padding: 0.08rem 0.4rem; /* 좌우 0.4rem */변경 후:
padding: 0.08rem 0.3rem; /* 좌우 0.3rem */단 한 줄, 숫자 하나만 바꿨습니다: 0.4 → 0.3
5. 검증: 빌드 성공
npm run build결과: ✓ 40 pages built successfully
다른 페이지는 깨지지 않았고
태그가 사용된 모든 곳이 제대로 렌더링됨
6. 최종 흐름 (단계별)
단계
한 일
1단계
”공백이 크다”는 피드백 받음
2단계
그게 CSS padding일 가능성 알아냄
3단계
WikiSidebar.astro 파일에서 .tag 클래스 찾음
4단계
padding: 0.08rem 0.4rem; 발견
5단계
좌우 여백 0.4rem → 0.3rem으 로 조정
6단계
빌드 실행 (성공)
7단계
커밋 및 푸시
🛠 사용한 도구
도구
역할
Claude
”공백”의 정체가 padding임을 알려줌
VS Code
파일 검색 및 코드 수정
npm run build
변경사항 검증
Git
커밋·푸시
배운 점
💡 핵심 교훈
1. Padding = 요소 안쪽의 여백
┌─────────────────┐ ← border (테두리)
│ ← margin (바깥쪽 여백)
│ ┌─────────────┐
│ │ ← padding │
│ │ (안쪽 여백) │
│ │ [텍스트] │
│ │ │
│ └─────────────┘
│
└─────────────────┘Margin: 요소 밖의 다른 요소와의 거리
Padding: 요소 안의 내용물과 테두리 사이 거리
Border: 요 소의 테두리
Content: 실제 텍스트나 내용
2. 작은 값 변화가 UI 느낌을 완전히 바꾼다
0.1rem의 차이지만 (0.4 → 0.3), 사용자에게는:
태그가 “더 촘촘하고 깔끔하게” 느껴짐
불필요한 공백이 없는 느낌
전체 사이드바가 더 정돈된 것처럼 보임
3. 레이아웃 조정은 코드의 아주 작은 부분부터 시작한다
“공백이 많다” → “어디를 고칠까?” 물어보고 → 정확한 위치를 찾아 → 한두 글자만 수정 → 완성.
비개발자여도 CSS 수정이 가능한 이유입니다.
솔직한 소감
처음엔 “padding이 뭐?”였는데, 이 작업 후로는 “아, 그 숫자가 그 부분의 여백이구나”가 명확해졌어요.
한 줄 코드 한 숫자로 화면이 바뀌는 걸 직접 보니 CSS가 덜 두려워졌습니다.
다음부턴 “여기 조정 좀”이라는 피드백을 받으면, “어느 부분의 뭘 조정할까?” 먼저 생각하게 될 것 같습니다.
적용할 점
🎯 결과
항목
이전
이후
태그 좌우 패딩
0.4rem
0.3rem
태그 모양
넓고 여유로움
촘촘하고 깔끔함
사이드바 느낌
여백이 큼
정렬 정돈됨
📋 복붙 가능한 프롬프트
다음에 UI 여백을 조정할 때 이 흐름을 쓰면 됩니다:
"사이드바의 [요소이름]이 [문제점]처럼 보여.
이게 CSS의 padding 때문일까?
[파일명]에서 어디를 수정해야 할까?"
→ 피드백: "padding: 0.4rem을 0.3rem으로 줄여봐"
→ 수정 후: "npm run build로 검증하고 커밋·푸시"🔜 다음 계획
CSS의 다른 여백 조정들 (margin, gap 등)도 이 방식으로 접근해보기
전체 CSS box model을 한 번 정리해 둔 개념 페이지 만들기
다른 요소들 (버튼, 입력창 등)의 패딩도 살펴보고 조정할 부분 찾기