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

안녕하세요 찐망고입니다. Material Design은 Google에서 2014년에 개발한 디자인 언어로,웹과 모바일 애플리케이션의 사용자 인터페이스(UI) 및 사용자 경험(UX)을 향상시키기 위해 만들어졌는데요. Material Design 사이트는 디자이너와 개발자들에게 이 디자인 시스템을 쉽게 적용할 수 있도록 가이드라인, 구성요소, 도구 등을 제공합니다. https://m2.material.io/design/usability/accessibility.html#understanding-accessibility Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by op..

안녕하세요 찐망고 입니다. 이번 포스팅에서는 타이포그래피와 SVG가 만나 트렌디한 웹디자인을 완성하는 방법을 다뤄볼게요. 이 조합은 이미 많은 브랜드 웹사이트에서 사랑받고 있는 디자인 요소죠. 직관적이고 기억에 남는 시각적 효과를 주는 데 제격이라 요즘 웹디자인에서 빠질 수 없는 트렌드랍니다.왜 인기를 얻을까요? 텍스트와 이미지의 자연스러운 결합 글자 속에 아이콘이 삽입되어 단순 텍스트보다 시각적으로 더 재미있고 기억에 남습니다. 메시지를 직관적으로 전달 심플하고 깔끔한 구성이 메시지를 한눈에 이해할 수 있게 돕습니다. 보는 순간 "아하!" 하고 느껴지는 디자인이 강점이에요. 트렌디한 컬러 활용 시원한 파랑, 밝은 노랑 등 브랜드 특성을 살리는 색..

안녕하세요 찐망고 입니다. ARIA(Accessible Rich Internet Applications)는 웹 접근성을 개선하기 위해 만들어진 표준입니다.주로 스크린 리더나 기타 보조 기술을 사용하는 사용자들이 웹 콘텐츠를 더 쉽게 이해하고 사용할 수 있도록 도와줍니다. 왜 ARIA가 필요한가?일반적인 HTML 요소는 이미 접근성을 어느 정도 지원합니다. 예를 들어:은 기본적으로 클릭 가능하다는 정보를 보조 기술에 전달합니다.는 alt 속성을 통해 이미지를 설명합니다.하지만, 동적 콘텐츠나 맞춤형 UI 컴포넌트(예: 탭, 드롭다운, 모달 창) 같은 복잡한 요소는 기본 HTML만으로는충분한 접근성을 제공하지 못합니다. 이럴 때 ARIA를 사용하여 접근성을 강화할 수 있습니다. ARIA의 주요 개념ARIA는..

안녕하세요 찐망고입니다.  올해는 정말 롤링의 시대였죠! 사실 작년부터 슬슬 등장했지만, 올해는 웹사이트 레퍼런스에서 롤링 텍스트가 거의 필수 요소처럼 자리 잡았던 것 같아요. 그래서 그런지 저도 이 주제로 코드 관련 포스팅만 세 개를 올렸던 기억이 나네요. 😄  그만큼 많이 사용하고 앞으로도 당분간은 사용할 것 같은 이 디자인은 일반적으로 스크롤 애니메이션이나 무한 루프 효과를 사용해 텍스트나 배너 박스가 자연스럽게 흘러가도록 만드는 요소를 말합니다. 이러한 디자인은 시각적으로 역동성을 부여하고, 특정 메시지나 키워드를 반복적으로 노출함으로써 사용자의 머릿속에 내용을 각인시키는 데 효과적이에요.  또한, 단순히 텍스트를 흘러가게 만드는 것뿐만 아니라, 브랜드의 슬로건이나 철학을 반복적으로 보여준다면 ..

안녕하세요 찐망고입니다. 관리자 페이지를 만들 때 차트 작업이 항상 고민되시죠?오늘은 디자이너와 퍼블리셔의 관점에서 어떻게 차트를 효과적으로 만들 수 있는지 알아보겠습니다. 1. 디자이너를 위한 차트 설계 가이드 1) 먼저 물어보세요! "이 차트의 목적이 뭘까? - 데이터 시각화의 목적전달하려는 정보: "누가 볼 차트인가요?" (일반 사용자? 전문가? 관리자?) 타겟 사용자: "어떤 내용을 전달하고 싶나요?" (매출 증가? 사용자 패턴?)"데이터 관계 표현: 데이터를 어떻게 비교하면 좋을까요?" (시간별? 항목별?) 2) 차트 종류 골라보기 - 적합한 차트 타입 선정라인 차트: 시간 흐름을 보여주고 싶다면? 바 차트: 항목을 비교하고 싶다면?파이 차트: 비율을 보여주고 싶다면? 스캐터 플롯: 데이터 간 ..

안녕하세요 찐망고 입니다. 어떤 버튼을 강조하고 싶거나,시선을 자연스럽게 유도하고 싶거나,전체 디자인에 시각적 리듬감을 주고 싶다면 포인트 컬러가 써 볼 수 있는데요. 레이아웃은 주로 중립적인 배경 색상(흰색이나 회색등)을 사용하고,포인트 컬러로 특정 요소(제목, 버튼, 활성화된 카드)만 강조하는 거죠.   포인트 컬러를 선택할 때는 다음의 요소를 고려하는 것이 좋습니다.1. 브랜드 컬러: 포인트 컬러는 보통 브랜드의 주 컬러를 반영하거나, 브랜드의 핵심 이미지를 표현하는 색이 가장 적합합니다. 브랜드 컬러를 포인트 컬러로 사용하면 사용자에게 일관된 인상을 주고, 브랜드 인지도를 높이는 데 도움이 됩니다. 브랜드 컬러는 주로 로고색으로 많이 쓰죠? 2. 보색 대비: 배경 색상과 대비되는 색을 사용하면 시..

안녕하세요 찐망고 입니다. 기술적인 질문 중 홈페이지가 보이는 순서를 물어보는 경우도 있다고 해서요오늘은 그에 관련 포스팅을 해볼까 합니다.  홈페이지가 보여지는 과정은 클라이언트(사용자 브라우저)와 서버 간의 상호작용으로 이루어집니다.이 과정은 여러 단계로 이루어져 있으며, 각 단계마다 중요한 역할을 합니다. 1. 주소 입력과 서버 연결사용자가 브라우저 주소창에 웹사이트 주소 (예: www.example.com)를 입력하면, 다음과 같은 일이 일어납니다. DNS 조회: 브라우저는 DNS 서버에 해당 도메인의 IP 주소를 요청합니다. 서버 연결: IP 주소를 받은 브라우저는 서버와 연결을 시도합니다. 2. 서버로 데이터 요청 및 수신서버와 연결이 되면:브라우저는 서버에 웹페이지 데이터를 요청합니다.서버..

안녕하세요 찐망고 입니다. 얼마 전 제자가 면접을 보면서 받은 기술적인 질문 중 하나인데요.머릿속으로 맴돌긴 하는데 긴장해서인지 정확히 답변하기가 힘들었다고 하더라고요그래서 쉽게 답변하기 위한 내용을 포스팅해보려고 합니다. GET 방식과 POST 방식은 웹에서 데이터를 전송하는 두 가지 주요 방식인데요  GET 방식목적: 주로 데이터를 요청해서 서버로부터 정보를 가져올 때 사용함특징:URL에 데이터를 포함해서 보내기 때문에 주소창에 ?name=찐망고&age=25 같은 쿼리 스트링이 보임URL 길이 제한이 있어서 아주 많은 양의 데이터를 전송하기엔 적합하지 않음보안 측면에서, 데이터를 URL에 직접 노출하기 때문에 민감한 정보를 보낼 때는 사용하지 않는 게 좋음사용 예: 검색어 입력 후 검색 결과를 보여주..

안녕하세요 찐망고입니다. 웹디자인 트렌드를 살펴보다 보니,최근 시각적 효과를 높이는 레퍼런스들을 계속 소개하게 되는 것 같아요! 이번에도 그런 글인데요.    브랜드를 설명하는 문구가 들어있는 섹션들 이 있어요특히 큰 텍스트로 브랜드를 설명하는 레이아웃이 많아지고 있지만, 단순한 빈 배경에 큰 글자만 넣는 경우 다소 심심하게 느껴질 수 있겠죠그래서 인터랙션을 추가하여 텍스트 자체가 움직이거나 색이 변하도록 만들어 생동감을 부여하기도 하죠!   인터랙션이 싫다면텍스트와 배경을 자연스럽게 조합해서 시선을 집중시키는 방식도 매우 유용합니다. 여기서 주목할 점은 텍스트 자체가 이미지의 일부분을 드러내는 창처럼 작용하고,뒤에 배치된 배경 이미지가 텍스트 안에 자연스럽게 노출되도록 설정된 점입니다.이렇게 하면 미니..

안녕하세요 찐망고입니다. 웹디자인에서 리스트형태로 나열된 레이아웃들 자주 보게 되죠? 이때, 단순히 박스와 텍스트만 배치하면 다소 밋밋하거나 정보를 효과적으로 전달하기 어려울 수 있습니다. 이런 경우에는 UI아이콘을 활용해 보는 것을 추천합니다. 아이콘은 단순히 장식용이 아니라, 사용자가 각 섹션의 내용을 직관적으로 이해할 수 있도록 돕는 중요한 요소인데요. 간단한 이미지 하나만으로도 사용자는 페이지의 구조와 각 항목의 의미를 쉽게 파악할 수 있고, 한눈에 필요한 정보를 확인할 수 있게 됩니다. 아이콘을 디자인할 때는 백터형태로 제작하는 것이 좋습니다. SVG(Scalabel Vector Graphics)포맷은 해상도에 관계없이 크기를 자유롭게 조절할 수 있기 때문에 어떤 디바이스나 화면 크기에서도 선명..