찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고 입니다.상세페이지 작업 시, 각 온라인 마켓과 플랫폼별로 권장되는 이미지 크기가 다릅니다.이를 준수하면 상품이 깔끔하게 보이고, 최적의 품질을 유지할 수 있습니다.아래에 네이버 스마트스토어, 쿠팡, 11번가, 인스타그램, G마켓/옥션의 권장 이미지 크기를 정리하겠음 1. 네이버 스마트 스토어썸네일이미지: 640px × 640px , 최대 용량은 4MB, 파일 형식: JPG, PNG, GIF, BMP상세페이지이미지:가로: 860px 권장세로: 제한 없음 (단, 한 이미지의 세로 길이는 5,000px이하 권장)최대 용량: 20MB 2. 쿠팡썸네일이미지: 500px × 500px , 최대 용량은 2MB, 파일 형식: JPG, PNG상세페이지이미지:가로: 780px 권장세로: 한 이미지 최대 ..

안녕하세요 찐망고입니다. 피그마에서 줄자를 찾고 싶나요? 피그마 줄자 (Ruler) 위치단축키: Shift + R줄자를 활성화하면 캔버스 상단과 좌측에 눈금자가 나타납니다.   안내선 (Guides) 사용법안내선 추가: 줄자에서 드래그하여 가이드 생성안내선 이동: 선택 후 드래그안내선 삭제: 선택 후 Delete 또는 마우스 오른쪽 버튼 클릭 → Remove guide

안녕하세요 찐망고입니다.2025년도 벌써 두달이 지나갑니다.이번에는 반응형 웹을 위한 해상도 트렌드를 분석하면서,디자인 & 개발할 때 반응형 작업을 어떻게 하면 좋을지 정리해볼게요. 해당링크는 Statcounter입니다. Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage ShareTracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.gs.statcounter.com PC해상도부터 비교해볼까요? (2024 vs 2025) 1920 × 1080의 ..

안녕하세요 찐망고입니다.디자이너를 위한 접근성연구가이드 관련 글입니다.아주 이전글이지만 너무 기본적인 글이라 공유합니다. 디자이너를 위한 접근성 연구 가이드모든 사용자와 능력 수준을 고려한 디자인을 돕는 연구 전략By Susanna Zaraysky 이미 여러분은 접근성이 고려된 인터페이스, 공공 공간, 건축물을 사용하고 있을 가능성이 높습니다. 왜냐하면 장애인을 위한 설계는 모든 사람의 경험을 개선하기 때문입니다. 예를 들어, 길모퉁이에서 볼 수 있는 낮아진 연석을 생각해보세요. 이 경사진 표면은 휠체어를 사용하는 사람이 보도에서 도로로 안전하게 이동하도록 돕지만, 유모차를 밀거나 여행 가방을 끄는 사람에게도 유용합니다. 더 많은 사람이 제품을 더 잘 사용할 수 있도록 하려면, 시각, 청각, 손 사..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Implementing accessibility부분에 대해 포스팅을 시작합니다. Implementing accessibility 접근성 구현표준 플랫폼 컨트롤과 시맨틱 HTML(웹에서)을 사용하면, 앱은 플랫폼의 보조 기술과 잘 작동하는 데 필요한 마크업과 코드를 자동으로 포함하게 됩니다. 각 플랫폼의 접근성 표준을 충족하고, 그 보조 기술(단축키 및 구조 포함)을 지원하면 사용자에게 효율적인 경험을 제공합니다.  Do. 표준 플랫폼 대화 상자와 같은 기본 요소를 사용하세요.Caution. 비표준 요소(예: 비표준 플랫폼 대화 상자)를 사용하여 표준 대화 상자 작업을 수행하는 데 주의하세요. 이러한 경우 보조 기술과 잘 작동하려면 추가적인 테스트가 필요..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Sound and motion부분에 대해 포스팅 해볼까요 Sound and motion Sound사용자가 UI 요소에 설명 레이블을 추가하면, 소리를 사용하여 앱을 탐색할 수 있습니다. 스크린 리더(TalkBack과 같은)를 사용하고 터치 탐색을 통해 탐색할 때, 사용자가 화면의 UI 요소를 터치하면 레이블이 음성으로 읽어집니다. 스크린 리더 사용이 어려울 수 있는 상황:스크린 리더 위로 소리가 재생될 때 (예: 자동 재생되는 배경 음악. 사용자가 이 소리를 일시정지하거나 중지할 수 있는 컨트롤을 제공해야 함).기본 요소에 추가 소리가 삽입될 때 (스크린 리더는 기본 요소를 정확하게 해석할 수 있어야 함).소리에 대한 대안 (Alternatives to..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Imagery부분에 대해 포스팅 해볼까요 Imagery Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.m3.material.io  이미지의 종류이미지에 접근성 지침을 적용하려면, 이미지의 종류에 따라 기준이 다르기 때문에 이를 이해하는 것이 중요합니다. 1. 장식용 이미지장식용 이미지는 페이지 내용에 중요한 정보를 추가하지 않는 이미지입니다.W3C 기준에 따르면, 장식용 이미지는 다음과..

안녕하세요 찐망고입니다.머터리얼 디자인에서 접근성 텍스트 관련 포스팅 입니다. Writing   접근성 텍스트란?접근성 텍스트는 Google의 TalkBack(안드로이드), Apple의 VoiceOver(iOS), **Freedom Scientific의 JAWS(데스크톱)**과 같은 스크린 리더 접근성 소프트웨어에서 사용됩니다.스크린 리더는 **화면에 표시된 텍스트와 UI 요소(버튼 등)**을 읽어주며, 보이는 텍스트와 **보이지 않는 대체 텍스트(Alternative Text)**도 읽어줍니다.    보이는 텍스트와 보이지 않는 텍스트보이는 텍스트: UI 요소의 레이블, 버튼의 텍스트, 링크, 양식 등에 표시되는 텍스트.보이지 않는 텍스트: 이미지에 대한 대체 텍스트처럼 화면에 표시되지 않는 설명 경우..

안녕하세요 찐망고입니다.오늘은 머터리얼 디자인, 레이아웃과 타이포그래피 관련 포스팅을 해볼게요  Material Design의 터치 대상 가이드라인은 화면을 볼 수 없거나 작은 터치 대상을 누르기 어려운 사용자들이 앱 내의 요소를 쉽게 탭할 수 있도록 돕습니다. Layout and typography 터치 및 포인터 대상 (Touch & Pointer Targets) 터치 대상 (Touch Targets)터치 대상은 사용자 입력에 반응하는 화면의 일부입니다. 이들은 요소의 시각적 경계를 넘어 확장됩니다. 예를 들어, 아이콘의 크기가 24 x 24dp일 수 있지만, 주변 패딩이 포함되어 전체 48 x 48dp의 터치 대상을 형성합니다.대부분의 플랫폼에서는 터치 대상을 최소 48 x 48dp로 설정하는 것이..

안녕하세요 찐망고입니다.역시나 머터리얼 디자인 시리즈를 이어가며 접근성에 관련된 컬러에 대해 자세히 알아보겠습니다. Color and Contrast Color and Contrast (색상과 대비) 색상과 대비는 사용자가 앱의 콘텐츠를 보고 이해하고, 올바른 요소와 상호작용하며, 동작을 이해하도록 돕는 데 사용될 수 있습니다.   More accessible color (더 접근성 있는 색상) 색상은 분위기, 톤, 중요한 정보를 전달하는 데 도움을 줄 수 있습니다. 주 색상, 보조 색상, 강조 색상을 신중히 선택하면 사용성이 향상됩니다. 요소 간 충분한 색상 대비는 시력이 약한 사용자도 앱을 쉽게 사용할 수 있도록 돕습니다.   Contrast ratios (대비 비율)색상 대비는 사용자가 다양한 ..