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

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

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

안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성 중 하나로,stroke-dasharray와 함께 사용되며 경로를 따라 선을 그릴 때의 시작지점을 조정하는 역할을 합니다.  stroke-dasharray는 선을 일정한 패턴의 대시와 공백으로 나누는 속성인데,  위와 같은 코드인 경우 설정된 선의 5px만큼 그 뒤로 10px만큼의 공백을 반복하는 형태를 뜻합니다.  stroke-dashoffset은 기본적으로 0으로 설정되어 있으며, 을 증가시키면 대시패턴이 이동하여 경로를 따라 선이 그려지는 위치가 변경됩니다. JS를 이용하면..

안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..

안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..