LeetCode UI 버그: "Accepted" 팝업 테두리 정렬 문제 및 해결

카테고리

디자인

서브카테고리

UX 디자인

대상자

• 웹 개발자 및 UI/UX 디자이너 (중급~고급 난이도)
• CSS 및 레이아웃 정렬 문제 해결에 관심 있는 개발자

핵심 요약

• "Accepted" 팝업의 파란 테두리가 오른쪽으로 약 1cm 이동되어 정렬 오류 발생
• CSS transform: translateX(10px) 속성이 오른쪽 이동 원인
• 정렬 문제 해결 방법: translateX(0) 또는 left: 50%; margin-left: -50% 적용

섹션별 세부 요약

1. 문제 현상

• 파란 테두리의 상/하/둥근 모서리 완벽하지만, 오른쪽으로 약 1cm 이동됨
• 사용자 경험에 영향: 팝업이 중심에 있지 않아 시각적 불균형 유발
• 예시: LeetCode 플랫폼에서 "Accepted" 상태 표시 시 발생

2. 버그 시뮬레이션

• CSS 코드 예시:

```css

.popup.buggy.show::after {

transform: translateX(10px); / 👈 오른쪽 이동 원인 /

}

```

• translateX(10px) 속성으로 인해 오른쪽으로 이동됨
• 정확한 중심 정렬을 위한 transform: translateX(0) 또는 left: 50%; margin-left: -50% 적용 필요

3. 해결 방법

• CSS 속성 수정으로 테두리 이동 제거
• margin-left 또는 left 속성을 조정하여 정렬 조정
• GitHub 저장소에서 DEMO 확인 가능

결론

• CSS transform 속성의 미세한 값 조정이 UI 정렬에 큰 영향을 미칠 수 있음
• translateX(10px) 대신 translateX(0) 또는 left: 50%; margin-left: -50% 사용하여 정렬 문제 해결
• UI/UX 디자인 시 레이아웃 정렬 검증을 반드시 수행해야 함