스타일링

요소를 선택하면 스타일 패널이 열립니다. 값을 바꾸면 페이지에 곧바로 반영되니, 고친 모습을 실제 화면에서 바로 확인하면서 다듬을 수 있습니다.

스타일 패널 섹션

패널은 위에서 아래로 다음 섹션 순서로 구성됩니다(라벨은 화면에서 영문으로 표시됩니다).

Class — 요소의 class 목록 편집.
Layout — display·flex 정렬·margin·padding·gap.
Position — position(배치 방식)·z-index(겹침 순서)·위치 오프셋(top·right·bottom·left). position을 relative·absolute 등으로 바꾼 뒤 네 면 오프셋으로 요소를 옮길 수 있습니다.
Container — 배경·투명도·모서리 반경.
Border — 테두리 두께·색·스타일. 네 변(위·오른쪽·아래·왼쪽)을 따로 손보거나, 링크 버튼으로 한꺼번에 맞출 수 있습니다.
Size — 너비·높이와 최소/최대값.
Overflow — overflow·줄바꿈·말줄임.
Text — 요소의 텍스트 내용 편집(텍스트가 있는 요소에서만 표시).
Typography — 글꼴 크기·굵기·줄 높이·자간·정렬·색.
Effects — 그림자·필터·블렌드.
Transition — 전환 속성·시간·이징.

라이브 반영과 되돌리기

값을 바꾸면 페이지에 곧바로 적용됩니다.
섹션마다 인라인 변경만 원복하거나, Class·Text를 원본으로 되돌리는 버튼도 따로 있으니 부담 없이 이것저것 시도해 보세요.
사이트가 이미 걸어 둔 스타일 자체를 끄고 싶을 땐, 드롭다운 항목의 **unset**을 고르세요. 되돌리기가 "내가 바꾼 값만 취소"라면, unset은 "이 스타일은 적용되면 안 된다"를 표현합니다. 예컨대 말줄임(text-overflow)이 걸리면 안 되는 자리에 걸려 있을 때 unset으로 꺼서 고친 모습을 보여줄 수 있습니다.

네 면을 한 번에, 혹은 따로

여백(margin·padding·gap)·테두리(Border)·모서리 반경·위치 오프셋(Position)처럼 **네 면(또는 모서리·양방향)**을 가진 속성에는 입력칸 옆에 작은 링크 버튼이 있습니다. 네 면을 같은 값으로 다룰지, 면마다 따로 손볼지 이 버튼으로 정합니다.

링크가 켜져 있으면 입력칸이 하나로 합쳐집니다. 한 번만 입력하면 네 면이 같은 값으로 맞춰져서, 좁은 패널에서 칸 네 개를 일일이 채울 필요가 없습니다.
링크를 끄면 위·오른쪽·아래·왼쪽 칸이 따로 펼쳐져 면마다 다른 값을 줄 수 있습니다.
면마다 값이 다른 상태에서 링크를 켜면, 합쳐진 칸은 혼합으로 표시됩니다. 이때 기존 값을 함부로 덮어쓰지 않으니 걱정 마세요 — 새 값을 입력하면 그제야 네 면이 통일됩니다.

디자인 토큰(CSS 변수) 인식

색·여백·글꼴 같은 값이 사이트의 **디자인 토큰(CSS 변수)**으로 지정돼 있으면, BugShot이 이를 알아서 인식합니다. 값 입력창에서 같은 계열(family)의 토큰을 모아 보여주니, 임의의 색·숫자를 직접 입력하는 대신 팀이 이미 쓰는 디자인 시스템 안에서 형제 토큰으로 바꿀 수 있습니다.

예를 들어 어떤 색이 --color-primary로 지정돼 있으면, --color-danger·--color-success처럼 같은 계열의 다른 토큰을 골라 바로 적용할 수 있습니다. 디자인 시스템을 쓰는 팀이라면, 제안한 수정이 곧바로 실제 코드와 맞물립니다.

변경사항 보기

변경사항 보기 다이얼로그

지금까지 무엇을 바꿨는지 헷갈릴 땐, 패널 하단의 변경사항 보기 버튼을 눌러 보세요. 버튼 옆 숫자는 지금까지 바꾼 항목 수이고, 바꾼 게 없으면 버튼은 비활성화됩니다.

누르면 다이얼로그가 열리고, 수정한 요소별로 묶여 각 항목이 고치기 전 → 후로 나열됩니다. 현재 선택한 요소와, 앞서 담아 둔 요소(아래 "여러 요소를 한 이슈에" 참고)가 모두 보입니다.

항목 우측 휴지통 아이콘 이 변경 초기화 — 그 항목 하나만 원래 값으로 되돌립니다. 페이지와 스타일 패널이 바로 갱신됩니다. 한 요소의 마지막 항목까지 되돌리면 그 요소 카드는 통째로 사라집니다.
좌측 하단 전체 초기화 — 모든 요소의 변경을 되돌립니다(이건 한 번 더 확인을 거칩니다).

항목 초기화는 따로 묻지 않고 바로 실행되니, 부담 없이 정리하셔도 됩니다. 되돌려서 변경이 하나도 안 남으면 다이얼로그는 저절로 닫힙니다.

AI 스타일링

AI 스타일링 배너

AI(LLM)를 연결해 두면 패널에 AI 스타일링 배너가 나타납니다. 직접 값을 만지기 번거로울 땐, 자연어로 지시만 하면 됩니다.

"버튼을 더 둥글게"
"여백을 키워줘"
"글자를 더 크고 진하게"

그러면 AI가 알맞은 스타일·class 변경을 찾아 페이지에 즉시 적용해 줍니다. AI를 연결하지 않았으면 이 배너는 나타나지 않습니다.

AI 연결 방법은 AI LLM 연동을 참고하세요. AI도 가끔 실수하니 적용된 결과는 한 번 확인해 주세요.

여러 요소를 한 이슈에

버그가 한 곳에만 있는 건 아니죠. "버튼 색 + 그 옆 라벨 정렬 + 카드 여백"처럼 여러 요소를 묶어 한 이슈로 보내고 싶을 때가 있습니다.

A 요소를 고쳤다면, 우상단 다시 선택으로 다음 요소(B)를 고르면 됩니다. 이때 A의 변경은 사라지지 않고 페이지에 그대로 남고, 이슈에도 함께 담깁니다. 이렇게 A·B·C… 원하는 만큼 이어서 담을 수 있어요 — 요소마다 before/after가 따로 기록됩니다.

담은 요소는 변경사항 보기에서 요소별로 확인하고, 항목 단위로 따로 빼낼 수 있습니다(한 요소의 항목을 모두 빼면 그 요소가 통째로 빠집니다). 한 번에 비우려면 전체 초기화를 누르거나, 이슈 작성을 취소하거나 제출을 마치면 그동안 담은 요소가 모두 비워집니다.

다음 단계

수정이 끝나면 다음을 눌러 이슈 초안으로 넘어갑니다. 고치기 전과 후가 비교로 담깁니다.

다음은 스타일을 최소 한 가지 바꿔야 활성화됩니다(이미 담아 둔 요소가 있으면 현재 요소를 안 바꿔도 넘어갈 수 있어요). 요소를 그대로(스타일 변경 없이) 담고 싶다면 요소 캡처를 쓰세요.