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

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

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

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

안녕하세요 찐망고입니다. 22년 말부터 우리가 자주 보던 레이아웃 있는데요, 바로 선이 눈에 띄는 디자인이에요.원래 웹디자인에서 border는 단락을 구별하고, 있는 듯 없는 듯 경계를 잡아주는 역할을 하던 요소였는데요요즘은 나 선이다~~ 선이지롱 하고 존재감을 드러낸달까? 특히 이전 포스팅에도 적었듯이 y2k디자인이나 키치스타일에서 이러한 경향이 강하게 나타나고 있었죠  이제는 이런 키치 한 느낌의 레이아웃에서 조금 벗어나 디자인이 다소 산만해 보이거나 정보 구분이 명확하지 않을 때 선을 추가로 개선을 시도하기도 합니다.나 선이야! 이 정도는 아니지만 없으면 안 될 중요한 요소로 자리 잡은 것이죠.  선이 들어간 디자인에서는 각 섹션이나 콘텐츠 영역이 명확하게 구분되어, 정보가 더 쉽게 눈에 들어옵니다..

안녕하세요 찐망고입니다. 카드형 레이아웃은 방대한 콘텐츠를 한눈에 제공하는 특징이 있는데요.카드형 레이아웃이 주는 정보의 풍성함은 매력적이지만,너무 많은 정보를 한꺼번에 제공하면 오히려 사용자에게 부담을 줄 수 있습니다.그래서 여유롭지만 세련된 느낌을 주면서도 강조할 부분에 자연스럽게 시선을 이끌고 싶다면?바로 비어있는 공간을 만드는 것! 비어있는 공간을 효과적으로 활용하면 전체적으로 세련된 인상을 줄 뿐만 아니라, 특정 콘텐츠에 자연스럽게 시선을 집중 시킬 수 있습니다.여백이 주는 여유로움과 깔끔함을 통해 사용자는 중요한 정보를 더 빠르고 명확하게 파악할 수 있게 되죠   때로는 비어있는 공간을 대체해 일정한 형태나 패턴을 활용하는 것도 좋은 방법입니다.정해진 형태나 패턴을 비어있는 부분에 배치하면 페..

안녕하세요 찐망고입니다. 웹디자인을 하다 보면 하나의 섹션에 방대한 콘텐츠를 넣어야 할 때가 있죠?이때 중요한 건, 각 콘텐츠가 한눈에 들어와 사용자가 쉽게 탐색할 수 있도록 만드는 것!하지만, 콘텐츠에 우선순위를 두고 싶다면???바로 박스의 크기를 다르게 설정하는 방법입니다.박스 크기를 달리하면 사용자는 자연스럽게 큰 박스에 시선을 먼저 두게 되죠.이 방식은 강조하고자 하는 주요 정보나 콘텐츠를 빠르게 전달하며,우선순위에 따라 정보흐름을 조절하는데 매우 효과적입니다. 아래 예시처럼 말이죠!  주요 정보는 크고, 보조 정보는 작게 하는 이런 방식은 한 가지 주제를 중심으로 상세한 설명을 제공합니다.좌우 대칭 구조로, 왼쪽에 큰 박스를 배치해 가장 중요한 정보를 강조하고,오른쪽에 작은 박스를 배열해 보조 ..

안녕하세요 찐망고입니다. 웹디자인에서 배경이미지를 사용하는 이유는 크게 세 가지라 생각합니다.브랜드의 정체성 강화시각적 분위기 조성메시지의 감성적, 직관적 전달 배경 이미지는 웹 페이지의 주제를 시각적으로 강조하며, 사용자에게 강렬한 첫인상을 남기는 중요한 역할을 합니다.그래서 우리가 접속하는 거의 모든 사이트의 히어로 섹션이 전체 배경이미지 혹은, 영상으로 이루어진 거죠히어로섹션(Hero section)은 웹페이지의 상단에 위치한 큰 시각적 영역인데요.방문자가 페이지에 접속했을 때 가장 처음으로 접하는 부분인 만큼웹사이트의 첫인상을 좌우할 테니, 배경을 꽉 채우는 건 당연한 원리겠죠?   배경이미지를 섹션마다 많이 사용하는 경우도 있는데요.풀페이지 웹사이트처럼 전체화면을 꽉 채우는 레이아웃에서는 각 섹..

안녕하세요 찐망고입니다. 일 년에 두 번 많게는 세 번 정도 수업을 하다 보면, 매번 웹사이트들을 보면서 현재 이런 형태의 레이아웃들이 유행이구나 싶을 때가 있단 말이죠?아무래도 디자인의 시작이 레퍼런스 혹은 클라이언트의 요구들이다 보니한 번에 모아보면 아 이건 진짜 많이 쓰는 형태의 디자인이구나 싶어요  저는 이런 식으로 수업 전후 3~6개월 양의 웹사이트를 폴더를 나눠서 정리를 해보는데오늘부터는 정리된 폴더를 포스팅으로 공유해 볼까 합니다. 현재 폴더는 2024년 7월부터 11월 7일 현재까지의 레이아웃디자인을 카테고리별로 묶어봤어요.   첫 번째 카테고리는 그러데이션입니다. 웹에서 사용하는 그러데이션 하면 떠오르는 이미지들이 있죠? 물론 여러분 병맛 ppt 무지개 그 보노보노 그거 생각하면 안 되고..