UI/UX 디자인 코드 상세 페이지에서는 중앙 화면에 코드가 렌더링되어 디자인을 직접 시각적으로 확인할 수 있습니다. 또한, 상단에 위치한 다양한 버튼들을 활용하여 디자인을 더 세밀하게 탐색하고 필요한 작업을 수행할 수 있습니다.
반응형 레이아웃
반응형 레이아웃 버튼을 통해 디자인이 다양한 기기에서 어떻게 보여지는지 쉽게 확인할 수 있습니다. 각 버튼을 클릭하면 해당 기기 화면 비율에 맞춘 프리뷰가 제공됩니다.
-
모바일: 모바일 화면에서 디자인이 어떻게 보여지는지 미리 확인할 수 있어, 모바일 사용자를 위한 UI/UX 최적화에 유용합니다.
-
태블릿: 디자인이 태블릿 화면에서는 어떻게 보여지는지 확인할 수 있어, 다양한 해상도의 중간 디바이스를 위한 UI 확인이 가능합니다.
-
데스크탑: 현재 적용된 화면의 전체 넓이에 맞춰 데스크탑 환경에서의 디자인이 어떻게 보여지는지 확인할 수 있습니다. 이 옵션은 더 넓은 해상도에서의 레이아웃 최적화에 도움을 줍니다.
풀스크린 보기
-
풀스크린 버튼: 프리뷰 화면을 전체 화면으로 확대하여 볼 수 있습니다. 디자인을 더 크게, 세부적으로 확인하고 싶은 경우에 유용합니다. 전체화면으로 전환하여 불필요한 요소 없이 디자인을 온전히 감상할 수 있습니다.
코드 보기
디자인의 프리뷰 화면과 함께, 현재 렌더링되어 있는 코드도 확인할 수 있습니다. 코드 보기 옵션은 개발자나 디자이너가 프론트엔드 구조를 이해하고 참고할 때 매우 유용합니다.
-
코드 보기 버튼: 코드 보기 버튼을 클릭하면 프리뷰 화면 하단에 별도의 코드 컨테이너 박스가 열리며, 렌더링된 디자인과 해당 코드가 나란히 표시됩니다. 이를 통해 디자인 요소와 코드 간의 매핑을 바로바로 확인할 수 있습니다.
코드 복사하기
디자인을 적용할 때 가장 효율적으로 사용할 수 있는 기능이 코드 복사하기입니다. 버튼 클릭 한 번으로 현재 프리뷰에 표시된 코드를 클립보드에 복사할 수 있습니다.
-
코드 복사하기 버튼: 해당 버튼을 클릭하면 코드를 복사하여 다른 프로젝트나 서버에 바로 붙여넣을 수 있습니다. 코드 작성 시간을 절약하고, 편리하게 디자인을 적용할 수 있어 생산성을 높이는 데 큰 도움이 됩니다.
이러한 다양한 기능을 통해 원하는 기기에 맞는 반응형 디자인을 미리 확인하고, 코드까지 손쉽게 활용할 수 있도록 지원합니다.