Chrome DevTools의 「변경」 기능을 사용했더니 픽셀 퍼펙트(Pixel Perfect) 조정이 훨씬 편해진 이야기

컴프(Comp)를 보고 코딩을 하다 보면, Chrome 확장 프로그램인 Pixel Perfect를 사용하여 디자인 컴프와 구현 화면을 겹쳐가며 조정하는 경우가 있을 것입니다.

저도 평소 Pixel Perfect를 사용하면서, DevTools에서 margin이나 padding 등을 조정하곤 했습니다.

다만, 지금까지는 다음과 같은 흐름으로 작업해 왔습니다.

Pixel Perfect로 어긋남을 확인한다

↓

DevTools에서 대상 부분을 찾는다

↓

margin이나 padding 등의 값을 조정한다

↓

외관이 맞으면 에디터(Editor)로 돌아간다

↓

해당 부분을 찾아 동일한 값으로 수정한다

이 방식 자체는 일반적이라고 생각하지만,

DevTools에서 조정한 뒤에 에디터 측에서 해당 부분을 찾아가야 하는 작업이 은근히 번거로웠습니다.

일반적으로 조정하는 경우

예를 들어, DevTools 상에서 대상 CSS를 찾아 값을 조정합니다.

이번에는 SP(Smartphone) 시의 .works-detail__content의 margin-top을 조정했습니다.

조정하면 외관은 대략 맞게 됩니다.

다만, 이 후에 에디터로 돌아가서 해당되는 CSS를 찾아 수정해야 합니다.

이것이 매번 조금 번거로웠습니다.

특히 CSS가 길어지거나, SCSS로 파일이 나누어져 있으면,

"이게 어디에 적혀 있었더라?" 하는 상황이 생기곤 합니다.

그래서 유용했던 것이 Chrome DevTools의 「변경 (Changes)」 기능입니다.

이 기능을 사용하면,

DevTools 상에서 변경한 내용을 차이점(Diff)으로 표시 해줍니다.

즉, DevTools에서 어디를 어떻게 바꿨는지 나중에 목록으로 확인할 수 있습니다.

「변경」 여는 법

먼저 DevTools를 열고, 오른쪽 상단의 점 세 개 메뉴를 클릭합니다.

그다음, 「기타 도구 (More tools)」를 엽니다.

그 안에 있는 「변경 (Changes)」을 클릭합니다.

그러면 DevTools 내에 「변경」 탭이 열립니다.

이 시점에서는 아직 DevTools 상에서 변경 사항이 없다면 아무것도 표시되지 않습니다.

DevTools로 수정하면 차이점이 표시됨

「변경」 탭을 연 상태에서, 다시 DevTools 상에서 CSS를 수정합니다.

예를 들어, 아까와 마찬가지로 margin-top을 변경하면 다음과 같이 차이점이 표시됩니다.

이런 식으로,

• margin-top: 49px;
• margin-top: 42px;

와 같이,

변경 전과 변경 후의 값을 차이점으로 확인할 수 있습니다.

이것이 상당히 편리했습니다.

게다가 지금은 이 차이점을 그대로 AI 도구에 붙여넣을 수도 있습니다.

Cursor, Claude Code, Codex 등 자신이 사용하는 AI 도구에 대해,

"다음은 Chrome DevTools의 「변경」으로 확인한 차이점입니다.

해당하는 CSS 파일을 찾아 이 수정을 반영해 주세요.

이번에는 SP 시의 수정이므로,

@media screen and (max-width: 768px) 내의 해당 부분만 수정해 주세요.

PC 측에는 영향을 주지 않도록 해주세요."

와 같이 지시하면 해당 부분을 찾아 수정해 줍니다.

이를 통해,

DevTools에서 조정한 내용을 에디터 측에서 직접 다시 찾아야 하는 수고가 상당히 줄었습니다.

여러 곳의 수정에도 대응 가능

이 「변경」 기능은 한 곳뿐만 아니라 여러 곳의 수정에도 대응할 수 있습니다.

예를 들어, 같은 페이지 내에서 여러 개의 margin-top을 조정한 경우에도 다음과 같이 한꺼번에 차이점이 표시됩니다.

따라서 어느 정도 페이지 내를 한꺼번에 조정한 뒤,

그 차이점을 AI 도구에 전달하여 한 번에 반영할 수도 있습니다.

이것은 상당히 편리했습니다.

실제로 사용해 보니 몇 가지 주의점도 있었습니다.

DevTools 상의 변경 사항이므로, 페이지를 새로고침하면 변경 내용이 사라집니다.

특히 링크 근처를 조정하고 있을 때 실수로 클릭하여 페이지가 전환되면,

그때까지 조정했던 내용이 사라질 가능성이 있습니다.

여러 곳을 한꺼번에 수정할 수 있다고는 해도,

자주 차이점을 복사하여 반영하는 편이 안전하다고 생각했습니다.

「변경」 탭의 오른쪽 상단에 있는 복사 기능을 사용하면 차이점 전체가 복사되는 것 같았습니다.

물론 그것도 사용할 수 있지만, AI 도구에 읽히게 할 경우에는

필요한 부분만 수동으로 선택해서 복사하는 것이 더 명확한 상황도 있었습니다.

AI 도구에 차이점을 붙여넣을 때는,

어느 브레이크포인트(Breakpoint)의 수정인지를 명시하는 것이 좋습니다.

예를 들어 SP 시의 수정인데 아무 말도 하지 않으면, PC 측의 CSS까지 수정될 가능성이 있습니다.

그러므로,

이번에는 SP (Smartphone) 시의 수정입니다.

@media screen and (max-width: 768px) 내의 해당 부분만 수정해 주세요.

PC 측에는 영향을 주지 않도록 해주세요.

와 같이 전달하는 것이 안전합니다.

반대로 PC 시의 수정이라면, PC 측만 수정하도록 전달하는 것이 좋습니다.

Pixel Perfect를 사용한 픽셀 퍼펙트 (Pixel Perfect) 조정에서는,

DevTools에서 외관을 맞춘 뒤에, 에디터 측에서 해당 부분을 찾아 수정하는 작업이 발생하기 쉽습니다.

Chrome DevTools의 「변경 (Changes)」 기능을 사용하면,

DevTools 상에서 변경한 내용을 차이점 (diff)으로 확인할 수 있습니다.

나아가, 그 차이점을 Cursor와 같은 AI 도구에 붙여넣으면,

해당 부분에 반영하는 것도 상당히 수월해집니다.

DevTools에서 조정

↓

「변경 (Changes)」으로 차이점 확인

↓

AI 도구에 붙여넣기

↓

해당 CSS에 반영하기

라는 흐름으로 진행할 수 있기 때문에,

픽셀 퍼펙트 조정의 수고를 상당히 줄일 수 있다고 느꼈습니다.

컴프 (Comp)를 보고 코딩하며 Pixel Perfect를 사용하고 계신 분들은,

한번 시도해 보시면 편리할 것이라고 생각합니다.