PitchInside(피치인사이드)의 디자인 시스템과 존재하는 모든 페이지(45개) + 모바일 뷰 17개를 실제 코드에서 그대로 추출한 문서입니다. 모든 마크업·className·디자인 토큰은 앱 소스와 동일하며(앱과 같은 Tailwind v4 토큰을 그대로 사용), 데이터만 가짜로 채웠습니다. 도메인은 축구(soccer) — 아티클 · 클립 · 커뮤니티 · 경기 정보.
브랜드명 “Pitch Inside” 의 pitch 는 축구 경기장(잔디 구장)을 뜻합니다. “경기장 안의 시선” = 깊이 있는 ‘인사이드’ 축구 콘텐츠를 표방합니다. 전체 톤은 야간 조명 경기장 · 전광판(scoreboard) · 중계 그래픽의 미감입니다 — 거의 검정에 가까운 배경(#0D0E0E~#26272B)에 단 하나의 네온 시안 #3FFFF6만 강조색으로 튀게 두어, 플러드라이트 아래 형광 라인과 전광판의 에너지를 표현합니다.
레벨 게이미피케이션 — 사용자는 받은 좋아요로 알 → 병아리 → 닭 → 불꽃 → 불사조 10단계를 키웁니다(아래 토큰 섹션의 티어 색 참고). 커뮤니티 참여를 “성장”으로 시각화한 장치입니다.
src/app/globals.css 의 @theme 토큰과
src/styles/constants.ts 의 STYLE 스케일을 그대로 옮기고,
각 토큰의 용도/의도를 함께 적었습니다. (세로 픽셀은 프로젝트 컨벤션상 4의 배수 — 폰트 14/18px만 예외)
실제 LevelBadge는 /images/level/*.svg (알→병아리→닭→불사조) 벡터 아트 + 치킨 아이콘 합성. 본 문서는 자산이 없어 티어 색 라운드 배지 + 레벨 숫자로 근사합니다.
| 요소 | 값 | 의도 |
|---|---|---|
--font-sans | Pretendard, -apple-system, system-ui … | 한국어 최적 본문 폰트 + 시스템 폴백 |
h1 | 2rem / line 2.5rem / 700 / white | 페이지 대제목 |
h2 | line 40px / 700 / white | 섹션 제목 |
h3 | 600 / white | 카드 제목 |
p | line-height 1.75 | 본문 가독 줄 간격 |
strong | font-weight 900 | 본문 내 강조(블랙) |
| fontSize 스케일 | 12 · 14 · 16 · 18 · 20 · 24 · 28 · 32 px | text-[16px](95회)·text-[14px](78회) 최다빈출 |
| 워크호스 weight | extrabold = 800 | 제목·라벨·탭 — 스포티 매거진 톤 |
| 카테고리 | 스케일 | 최다빈출 / 용처 |
|---|---|---|
| rounded (border-radius) | 4 · 8 · 12 · 16 · 20 · full | 12px 카드/컨테이너(132회) · 4px 버튼·입력 |
| padding | 8 · 12 · 16 · 20 · 24 · 32 | p-[20px](65회) |
| paddingX / paddingY | X 8·12·16·20·32 / Y 4·8·12·16 | px-[12px](95회) · py-[8px](72회) |
| paddingTop (페이지) | 72 · 80 · 92 · 100 | 고정 헤더 높이만큼 본문 오프셋 |
| gap | 4 · 8 · 12 · 16 · 20 · 24 · 32 | gap-[12px](68회) |
| margin (top/bottom) | 4 · 12 · 16 · 20 · 32 · 40 · 44 · 60 | mt-[20px](35회) |
| size.icon | 16 · 20 · 24 · 32 · 40 · 52 | 32px 최다(90회) · 52px OAuth |
| size.profile | 28 · 32 · 60 · 80 | 아바타: 댓글 32 · 프로필 헤더 80 |
| 토큰 | min-width | 의도 |
|---|---|---|
xs: | 430px | 커스텀 — 소형 폰 경계(--breakpoint-xs) |
ss: | 520px | 커스텀 — 모바일 액션바 전환 등(--breakpoint-ss) |
sm: ~ 2xl: | 640 · 768 · 1024 · 1280 · 1536 | Tailwind 기본값 사용 |
| 규칙 | 값 | 의도 |
|---|---|---|
| 스크롤바 thumb | rgba(0,255,254,.56) · width 5px | 시안 디테일 — 다크 위 일관된 강조 |
::selection | 배경 시안 · 텍스트 darkBlack | 드래그 선택도 ‘액션=시안’ |
:focus-visible | 2px 시안 outline · offset 4px | 키보드 접근성(에디터/커스텀 입력은 제거) |
| input autofill | box-shadow lightGray inset · white 텍스트 | 브라우저 자동완성의 흰 배경을 다크로 보정 |
blockquote | 좌측 4px 시안 보더 · padding-left 14px · italic | 인용 — 시안 강조(트위터/인스타 임베드는 제외) |
hr | 1px solid semiDarkGray | 콘텐츠 구분선 |
.post-body h1 | 시안 좌측 12px + 하단 4px 보더 · 2rem | 본문 대제목 — 전광판 라인 모티프 |
.post-body h2 | 시안 좌측 12px 보더 · 1.5rem | 본문 소제목 |
.post-body 리스트 | 커스텀 불릿 ● / ○ / 1. / a. | 에디터 입력 = 조회 화면 단일 진실원천 |
.post-body code | 시안 텍스트 · lightGray 배경 | 인라인 코드 |
.container-main / .mainContainer | max-width 820px · padding 0 15px | 본문 단일 컬럼 폭(모바일 퍼스트) |
| @keyframes (8종) | spin · fadeIn · fadeInDown · fadeOutUp · blink · pulse · slideUp · ios-spin | 로딩·토스트·시트·iOS 스피너 모션 |
| 유틸 | .line-clamp-1~3 · .scrollbar-hide · .no-drag · .highlight* | 줄임·스크롤 숨김·드래그 방지·검색 하이라이트 |
실제 컴포넌트의 원문 className을 그대로 옮겨 라이브 렌더합니다. 아이콘은 동등한 인라인 SVG, 레벨 배지는 CSS 근사입니다.
ui/Button.tsx
실제는 /images/level/lvNBadge.svg + 치킨 아이콘 합성 SVG 아트.
첫 번째 축구 아티클을 남겨보세요.
삭제한 글은 복구할 수 없습니다.
손흥민의 오프더볼 움직임이 핵심이었네요. 좋은 분석 감사합니다!
로컬 빌드(실제 컴포넌트)를 모바일(412×915)로 렌더해 그대로 이식했습니다. 데이터는 목 데이터, 링크는 비활성.
오프더볼, 보이지 않는 곳에서 승부가 갈린다
경기를 지배하는 팀은 공을 가지지 않은 순간에 더 많은 결정을 내린다. 오프더볼 움직임은 단순한 위치 선정이 아니라, 상대 수비의 시선과 무게중심을 끌어내는 심리전이다.
프레임 단위로 분석해 보면, 톱 클래스 공격수일수록 마지막 3미터에서의 가속 타이밍이 평균 0.2초 빠르다. 이 짧은 차이가 득점과 노골을 가른다.
데이터는 거짓말을 하지 않는다. 기대득점(xG) 모델로 슈팅 위치를 집계하면, 막연히 느끼던 결정력의 실체가 숫자로 드러난다.
결국 좋은 축구는 반복 가능한 패턴에서 나온다. 오늘 정리한 원칙을 훈련에 적용한다면, 다음 경기의 장면이 분명 달라질 것이다.
어제 경기 다들 보셨나요? 후반 막판 손흥민 선수의 멀티골이 정말 인상적이었습니다.
특히 두 번째 골 상황에서 수비 두 명을 끌고 들어가는 오프더볼 움직임이 거의 교과서적이었어요.
여러분은 이번 시즌 베스트 골로 어떤 장면을 꼽으시나요? 댓글로 같이 이야기 나눠요!
![[월드컵 STAR] 토트넘 팬들 방긋...'기회 창출 2회-수비적 행동 5회' 로버...](assets/img-m/aabc3bfb203390c4.jpg)
![[속보] 국힘 “월드컵에서 ‘눈 찢기’ 인종차별… 외교 당국이 나서야...](assets/img-m/b005045b0ce78c03.jpg)
![[월드컵] '잉글랜드 대표팀' 훈련 장비 도난 사건 용의자 기소](assets/img-m/5d94a3d9b876f791.jpg)
![[여기는 멕시코] ‘38도 발열’도 막지 못한 월드컵 첫 골…데뷔 11분 만...](assets/img-m/d2935d2df9398c28.jpg)
![[442.star] '수비기여 4회+경합 3회' 백승호, 체코전 역전승의 '언성 히어...](assets/img-m/4ad9c089d0eef0e6.jpg)
![[2026 북중미]이집트가 가슴 위 별 7개 지운 이유](assets/img-m/8fe60ff51facbeba.jpg)
![[월드컵] 이강인, 이기레 멕시코 감독과 사제대결](assets/img-m/9cfd3d6ec973fe7e.jpg)
리그 경기가 없습니다.
| 팀명 | 경기 | 승점 | 승 | 무 | 패 | 득 | 실 | +/- |
|---|---|---|---|---|---|---|---|---|
 전남 광양제철남초 호남/제주 | 11 | 30 | 10 | 0 | 1 | 70 | 6 | 64 |
 전북 스포츠제이FC 호남/제주 | 9 | 24 | 8 | 0 | 1 | 49 | 18 | 31 |
제주이천수축구클럽U12 호남/제주 | 8 | 20 | 6 | 2 | 0 | 19 | 3 | 16 |
 광주챔피언스 호남/제주 | 7 | 18 | 6 | 0 | 1 | 23 | 9 | 14 |
 울산 학성초등학교 영남 | 5 | 15 | 5 | 0 | 0 | 29 | 8 | 21 |
 대전 대전중앙FC 중부/강원 | 5 | 13 | 4 | 1 | 0 | 21 | 6 | 15 |
대구TDN 영남 | 4 | 12 | 4 | 0 | 0 | 15 | 2 | 13 |
 세종세종김영후FC 레드 중부/강원 | 4 | 12 | 4 | 0 | 0 | 11 | 1 | 10 |
강원강릉WFCU15 중부/강원 | 4 | 9 | 3 | 0 | 1 | 16 | 6 | 10 |
 인천남동구LJ 서울/인천 | 3 | 9 | 3 | 0 | 0 | 21 | 4 | 17 |
 인천인유서구 서울/인천 | 3 | 9 | 3 | 0 | 0 | 16 | 2 | 14 |
 충남아산FC 중부/강원 | 3 | 9 | 3 | 0 | 0 | 11 | 3 | 8 |
 강원 SMC유소년클럽 중부/강원 | 3 | 7 | 2 | 1 | 0 | 13 | 3 | 10 |
서비스 이용 중 궁금한 점이나 개선 의견이 있으시면 아래로 연락 주세요.
회원가입 페이지에서 이메일·비밀번호·이름을 입력하여 가입할 수 있습니다. 가입 후 최초 로그인 시 약관 동의와 생년월일 입력 화면이 노출됩니다.
앱 또는 웹의 회원 탈퇴 기능, 또는 이메일 요청으로 처리됩니다. 자세한 절차와 삭제·보관 데이터는 계정 및 데이터 삭제 안내 페이지를 참고해 주세요.
앱 / 웹 내 게시물의 신고 기능을 이용해 주세요. 운영팀이 검토 후 조치합니다. 긴급한 사안은 위 이메일로 직접 알려 주시기 바랍니다.
비밀번호 재설정 페이지에서 가입 이메일로 인증 후 재설정할 수 있습니다.
영업일 기준 1~2일 이내 답변드립니다.
https://pitch-inside.com/users/edit 접속 후 페이지 하단 "회원 탈퇴" 버튼을 눌러 처리합니다.
위 보관 기간 종료 시 영구 파기됩니다.
카카오톡·인스타그램 등 인앱 브라우저에서는 소셜 로그인이 지원되지 않습니다. 외부 브라우저(Chrome, Safari)를 이용해 주세요.
계속 이용하시려면 생년월일과 약관 동의가 필요합니다.
https://pitch-inside.com/users/edit 접속 후 페이지 하단 "회원 탈퇴" 버튼을 눌러 처리합니다.
위 보관 기간 종료 시 영구 파기됩니다.
오프더볼, 보이지 않는 곳에서 승부가 갈린다
경기를 지배하는 팀은 공을 가지지 않은 순간에 더 많은 결정을 내린다. 오프더볼 움직임은 단순한 위치 선정이 아니라, 상대 수비의 시선과 무게중심을 끌어내는 심리전이다.
프레임 단위로 분석해 보면, 톱 클래스 공격수일수록 마지막 3미터에서의 가속 타이밍이 평균 0.2초 빠르다. 이 짧은 차이가 득점과 노골을 가른다.
데이터는 거짓말을 하지 않는다. 기대득점(xG) 모델로 슈팅 위치를 집계하면, 막연히 느끼던 결정력의 실체가 숫자로 드러난다.
결국 좋은 축구는 반복 가능한 패턴에서 나온다. 오늘 정리한 원칙을 훈련에 적용한다면, 다음 경기의 장면이 분명 달라질 것이다.
이번 시즌 손흥민은 단순한 득점원을 넘어 팀의 중심축으로 거듭났다. 측면에서의 침투뿐 아니라, 중앙으로 좁혀 들어오며 연결고리 역할을 수행했다.
특히 후반기 들어 어시스트 비중이 크게 늘었다는 점이 인상적이다.
"캡틴으로서의 책임감이 나를 더 성장시켰다." — 손흥민
바이에른 이적 첫 시즌부터 김민재는 안정적인 빌드업과 일대일 수비로 팀의 핵심이 되었다.
강한 압박과 빠른 템포의 리그앙에서 이강인이 어떻게 적응해 나가는지 살펴본다.
어제 경기 다들 보셨나요? 후반 막판 손흥민 선수의 멀티골이 정말 인상적이었습니다.
특히 두 번째 골 상황에서 수비 두 명을 끌고 들어가는 오프더볼 움직임이 거의 교과서적이었어요.
여러분은 이번 시즌 베스트 골로 어떤 장면을 꼽으시나요? 댓글로 같이 이야기 나눠요!
![[2026 북중미] 천하의 안첼로티도 월드컵은 어렵다…“긴장감이 팽배했...](assets/img-m/62e9e7596eef52a9.jpg)
리그 경기가 없습니다.
| 팀명 | 경기 | 승점 | 승 | 무 | 패 | 득 | 실 | +/- |
|---|---|---|---|---|---|---|---|---|
전남 광양제철남초 호남/제주 | 11 | 30 | 10 | 0 | 1 | 70 | 6 | 64 |
전북 스포츠제이FC 호남/제주 | 9 | 24 | 8 | 0 | 1 | 49 | 18 | 31 |
제주이천수축구클럽U12 호남/제주 | 8 | 20 | 6 | 2 | 0 | 19 | 3 | 16 |
광주챔피언스 호남/제주 | 7 | 18 | 6 | 0 | 1 | 23 | 9 | 14 |
울산 학성초등학교 영남 | 5 | 15 | 5 | 0 | 0 | 29 | 8 | 21 |
대전 대전중앙FC 중부/강원 | 5 | 13 | 4 | 1 | 0 | 21 | 6 | 15 |
대구TDN 영남 | 4 | 12 | 4 | 0 | 0 | 15 | 2 | 13 |
세종세종김영후FC 레드 중부/강원 | 4 | 12 | 4 | 0 | 0 | 11 | 1 | 10 |
강원강릉WFCU15 중부/강원 | 4 | 9 | 3 | 0 | 1 | 16 | 6 | 10 |
인천남동구LJ 서울/인천 | 3 | 9 | 3 | 0 | 0 | 21 | 4 | 17 |
인천인유서구 서울/인천 | 3 | 9 | 3 | 0 | 0 | 16 | 2 | 14 |
충남아산FC 중부/강원 | 3 | 9 | 3 | 0 | 0 | 11 | 3 | 8 |
강원 SMC유소년클럽 중부/강원 | 3 | 7 | 2 | 1 | 0 | 13 | 3 | 10 |
다른 해시태그를 탐색해보세요.
서비스 이용 중 궁금한 점이나 개선 의견이 있으시면 아래로 연락 주세요.
회원가입 페이지에서 이메일·비밀번호·이름을 입력하여 가입할 수 있습니다. 가입 후 최초 로그인 시 약관 동의와 생년월일 입력 화면이 노출됩니다.
앱 또는 웹의 회원 탈퇴 기능, 또는 이메일 요청으로 처리됩니다. 자세한 절차와 삭제·보관 데이터는 계정 및 데이터 삭제 안내 페이지를 참고해 주세요.
앱 / 웹 내 게시물의 신고 기능을 이용해 주세요. 운영팀이 검토 후 조치합니다. 긴급한 사안은 위 이메일로 직접 알려 주시기 바랍니다.
비밀번호 재설정 페이지에서 가입 이메일로 인증 후 재설정할 수 있습니다.
영업일 기준 1~2일 이내 답변드립니다.
일반 사용자 화면과 달리 매우 어두운 톤(bg-bg-darkBlack)·거의 무채색으로, 신고·제재 같은 중대 결정에 신중함을 강제합니다. 시안은 active 네비/링크에만.
| ID | 대상 | 사유 | 상태 | 접수 후 경과 |
|---|---|---|---|---|
| #3041 | BOARD_POST · #1827 | 욕설·비방 | 대기 중 | 2026. 6. 9. 오후 11:42:10 |
| #3040 | CLIP · #592 | 저작권·초상권 | 검토 중 | 2026. 6. 10. 오전 9:15:33 |
| #3039 | USER · #2210 | 사칭 | 대기 중 | 2026. 6. 10. 오후 7:48:02 |
| #3038 | ARTICLE_COMMENT · #8841 | 스팸·광고 | 처리 완료 | 2026. 6. 8. 오후 2:03:51 |
| #3037 | BOARD_COMMENT · #6620 | 혐오 표현 | 반려 | 2026. 6. 7. 오후 5:30:18 |
정상적인 경기 평가 댓글이었고 특정인을 향한 욕설은 없었습니다. 상대 팀 팬의 도배성 신고로 부당하게 정지된 것 같아 이의를 제기합니다.
본 시행 초기에는 회원 목록 화면을 제공하지 않습니다. 신고·이의신청 상세에서 회원 ID를 확인 후 아래로 이동하세요.
| 유형 | 버전 | 상태 | 해시 | 활성화 | 액션 |
|---|---|---|---|---|---|
| 이용약관 ↗ | v2026-06 | 시행 중 | a3f91c0d4b27… | 2026. 6. 1. | |
| 개인정보처리방침 ↗ | v2026-06 | 시행 중 | 7c2e80aa19f5… | 2026. 6. 1. | |
| 커뮤니티 가이드라인 ↗ | v2026-07 | 초안 | f01b9d6e3a44… | — | |
| 이용약관 (링크 사용 불가) | v2025-12 | 종료 | 2b8c44f7e9a1… | 2025. 12. 5. |
정통신망법 §44-2에 따라 최대 30일간 적용됩니다.
| ID | 대상 | 복원 예정 | 상태 | 액션 |
|---|---|---|---|---|
| #2041 | BOARD_POST #58213 | 2026. 7. 10. 오후 3:24 | 적용 중 | |
| #2038 | CLIP_COMMENT #11907 | 2026. 7. 9. 오전 11:02 | 적용 중 | |
| #2035 | ARTICLE_COMMENT #44120 | 2026. 7. 8. 오후 6:47 | 적용 중 | |
| #2030 | BOARD_COMMENT #39845 | 2026. 7. 6. 오전 9:15 | 적용 중 |
자동 복원 전 수동 복원 시 감사 로그에 기록됩니다.
| 일시 | 액터 | 액션 | 대상 | 사유 |
|---|---|---|---|---|
| 2026. 6. 10. 오후 3:24 | 관리자김#1 | 회원 정지 | USER #4821 | 욕설·비방 반복으로 7일 정지 |
| 2026. 6. 10. 오후 1:08 | 운영손#3 | 임시조치 적용 | BOARD_POST #58213 | 신고 누적으로 임시조치 적용 |
| 2026. 6. 9. 오전 11:42 | 관리자김#1 | 정책 활성화 | - | 개인정보처리방침 v2026-06 시행 |
| 2026. 6. 8. 오후 5:15 | 운영박#5 | 신고권 제한 | USER #3920 | 허위 신고 누적 3회 |
| 2026. 6. 7. 오전 9:30 | 관리자김#1 | 회원 익명화 | USER #2871 | 만 14세 미만 적발 |
라우트별 loading/error는 ‘상태’이므로 전역 대표 + 스켈레톤 갤러리로 표시합니다.
페이지를 찾을 수 없습니다
잠시 후 다시 시도해주세요.
![[논문 리뷰] 햄스트링 건병증, 왜 운동이 답일까? - 파트 1](assets/img-m/1805f2bac1af2942.jpg)
![[ 차세대 아카이브 ] #2. 포철고 김범준 선수](assets/img-m/8db11ede99ed7c1c.jpg)
