개발자

맥북 듀얼 모니터 연결

2023년 11월 29일조회 431

맥북을 모니터 하나 사서 듀얼 모니터로 코딩공부를 하고 있는 학생입니다. 모니터로 볼때는 분명 px 로 css 한것이 안깨져서 괜찮다고 생각해도 맥북으로 열어서 보면 깨지는 것이 많아서 매번할때 마다 이렇게 보면서 해야 하는 건지 .. 다른 듀얼모니터 쓰시는 분들은 어떻게 하는 지 궁금해서 여쭤봅니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

박정웅님의 프로필 사진

깨진 다는 의미가 모호해서 문제 상황이 완전히 이해되지는 않지만, 혹시 모니터의 HiDPI 지원과 관련된 문제인 경우 도움이 되실 수도 있을 거 같아 글을 남김니다. 저는 꽤 괜찮은(?) 포터블 2K 모니터를 구입했는데, 맥북에 연결하니 맥북이 2K정도의 해상도를 활용하지 못하고 지원하는 해상도의 반 정도의 해상도에 그쳤습니다. 물론 윈도우즈 OS에 연결했을 땐 선명하게 보였습니다. 리서치를 좀 해 본 결과 맥북이 초고해상도의 모니터는 잘 지원하지만 어정쩡한 2K정도의 해상도는 HiDPI가 잘 지원이 안되는 경우가 있다는 것을 알게되었습니다. 재밌는 부분은 맥 OS 내부의 기술 자체는 이런 부분을 충분히 지원하는데, 설정하는 말단 인터페이스단에서 이부분을 그냥 무시해 버리는 것 같습니다. 이 부분을 파고들어 맥북 모니터 설정만을 전문적으로 다루는 앱이 있습니다. https://github.com/waydabber/BetterDisplay "설치 후 앱 트레이 아이콘 클릭 -> Setting -> Display -> More system configuration option -> Edit native panel pixel resolution 또는 Edit default resolution 등의 옵션을 조정" 하면 흐릿하던 화면을 HiDPI 로 갑자기 설정 가능하게되는 흑마술이 펼쳐집니다. (그 외 모니터에 관한 다양한 설정이 가능합니다. 예를들의 공유 오피스 처럼 서로 다른 환경의 듀얼 모니터 환경을 자주 옮겨 다니면서 작업하는 경우 신속한 모니터간 위치 조정이 가능합니다.) ** 주의: 처음 부터 2K 미만의 모니터 이거나 HiDPI가 잘 지원되는 4K 이상의 모니터 인 경우 당장의 HiDPI 지원 개선 및 화질 개선에는 크게 의미가 없습니다.

김대현님의 프로필 사진

깨진다는 표현이, 어딘가 사이즈가 아예 어긋난다는 뜻이라면 CSS에서 크기 단위들을 다시 공부해보시면 좋을 것 같구요. 레이아웃이 달라진다는 뜻이라면 반응형 웹을 공부하시면 될 것 같고, 해상도 관련 문제라면 4K이상 고해상도 모니터를 쓰시면 되겠죠. 질문에 이미지가 있었으면 서로 이해가 편했을 것 같네요. 전 노안이 진행되는 나이인데, 저보다 연세 있으신 분들은 레티나 디스플레이가 의미없다고 합니다. 일반 해상도나 고해상도나 차이가 없다나요? ㅋㅋ 고해상도를 잘 볼 수 있을 때 만끽하십시다. 돈은 나중에 벌어도 되지만, 떠나간 시력은 돌아오지 않아요. ㅎㅎㅎ

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 11월 29일

CSS가 깨지는 이유는 해상도의 차이 때문일 가능성이 큽니다. 똑같은 px값이더라도, 모니터와 맥북의 해상도가 다르면, 화면에 그려지는 실제 크기가 달라질 수 있습니다. 이런 문제를 해결하기 위해서는 relative 단위를 사용하는 것을 고려해보세요. 예를 들어, em 또는 % 같은 상대적인 단위를 사용하면, 기기간 해상도에 관계 없이 동일한 비율로 요소가 표시되게 됩니다. 또한 반응형 디자인 기법을 적용하여 다양한 스크린 사이즈에서 일관된 UI/UX를 제공하는 것을 추천드립니다. CSS3의 Media Query를 사용하거나 Bootstrap과 같은 프레임워크를 이용하면 비교적 쉽게 반응형 디자인을 구현할 수 있습니다. CSS 디자인을 작업할 때 웹페이지를 여러 기기/해상도에서 어떻게 보여질지 고민하고 테스트 하는 것은 중요합니다. 마지막으로 웹 개발자 도구의 "Device Mode" 기능을 활용하여 다양한 화면 크기와 해상도에서 웹페이지가 어떻게 보일지 미리 확인하는 것도 도움이 될 수 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!