프론트엔드7분
모바일에서만 가로 스크롤이 생기는 이유
모바일에서 화면을 옆으로 밀었더니 페이지가 밀리고 오른쪽에 빈 여백이 보인다면, 어떤 요소가 뷰포트보다 오른쪽으로 삐져나가 있다는 뜻입니다. 흔한 문제인데 범인을 찾기가 은근히 어렵습니다. 눈에 보이는 요소가 아닌 경우가 많기 때문입니다.
DUOLABS BLOG
전체 글354
- 프론트엔드6분
크롬에서는 멀쩡한데 아이폰에서만 흰 화면이 뜨는 이유
개발하면서 가장 당황스러운 상황 중 하나가 내 브라우저에서는 되는데 다른 기기에서만 안 되는 경우입니다. 특히 화면이 아예 하얗게 나오면 어디서부터 봐야 할지 막막합니다. 콘솔도 못 보고 에러 메시지도 없습니다.
- 프론트엔드6분
iOS 사파리에서 고정 헤더가 사라지거나 잘리는 이유
상단 고정 헤더는 거의 모든 사이트가 쓰는 패턴입니다. position: fixed 한 줄이면 끝나는 것처럼 보이고, 데스크톱에서는 실제로 그렇습니다. 그런데 iOS 사파리에서는 이 헤더가 스크롤 도중 통째로 사라지거나, 위쪽이 몇 픽셀 잘려 보이는 일이 생깁니다.
- AI 자동화3분
Claude에 MCP 커넥터를 직접 연결하는 방법
Claude는 Gmail, Google Drive, Slack 같은 커넥터를 기본으로 제공합니다. 하지만 쓰고 싶은 서비스가 목록에 없다면 직접 등록할 수 있습니다. 커스텀 커넥터를 붙이면 대화 도중에 그 서비스의 기능을 바로 호출할 수 있습니다.
- 디자인 시스템2분
디자인 시스템 이름을 짓는 방법: 오래 가는 네이밍 전략
디자인 시스템을 운영하다 보면 버튼, 컬러, 레이아웃보다 먼저 부딪히는 문제가 있습니다. 바로 이름입니다. 이름은 문서 구조, 패키지명, 컴포넌트 철학, 팀 내 커뮤니케이션에 계속 영향을 줍니다.
- 디자인 시스템2분
네오브루탈리즘 UI는 언제 효과적일까
네오브루탈리즘은 최근 웹과 앱 디자인에서 자주 보이는 강한 시각 스타일입니다. 두꺼운 테두리, 원색, 딱딱한 그림자, 과감한 타이포그래피를 사용해 화면을 포스터처럼 보이게 만듭니다.
- AI 자동화2분
AI 프로젝트를 잘 관리하기 위한 기본 개념
AI 도구를 프로젝트에 도입하면 생산성이 올라갈 수 있지만, 규칙 없이 쓰면 결과가 흔들립니다. AI 프로젝트 관리는 프롬프트를 잘 쓰는 것을 넘어 컨텍스트, 도구, 검증, 작업 규칙을 함께 설계하는 일입니다.
- AI 자동화2분
AI를 잘 활용하려면 모델보다 구조가 중요하다
AI를 잘 쓰는 핵심은 좋은 모델을 고르는 것만이 아닙니다. 모델에게 어떤 정보를 주고, 어떤 도구를 연결하고, 결과를 어떻게 검증할지까지 설계해야 실제 업무에 도움이 됩니다.
- AI 자동화3분
CodeRabbit, Warp AI, Cursor는 무엇이 다를까
AI 개발 도구가 많아지면서 이름은 비슷하지만 역할이 전혀 다른 도구들이 함께 비교됩니다. CodeRabbit, Warp AI, Cursor도 모두 개발자를 돕지만 같은 범주의 제품은 아닙니다.
- 모바일 앱3분
여러 고객 앱을 운영할 때 계정과 서명 키를 분리하는 방법
React Native와 Expo로 여러 고객 앱을 개발·배포한다면 계정, 비용, 서명 키, 스토어 권한을 어떻게 나눌지 초기에 정해야 합니다. 이 구조를 잘못 잡으면 나중에 소유권 이전, 업데이트, 보안 관리가 복잡해집니다.