OnB Studio

글자 단위/단어 단위로 줄바꿈 설정하기 사이트에서 줄바꿈 되는 단위가 글자로 되어 있으면 가독성이 불편할 뿐만 아니라, 미적으로 신경쓰이게 됩니다. 때문에 단어 단위로 줄바꿈을 하는 것이 권장됩니다. 주로 'keep-all' 혹은 'break-word' 방식을 사용합니다. HTML/CSS 코드 CSS 속성 word-break : 텍스트가 줄 끝에 도달할 때 단어를 자르는 방식을 지정합니다. CSS 값 normal : 디폴트(Default) 줄 바꿈 규칙을 사용합니다. 영역 밖으로 단어가 튀어(overflow)나올 수 있습니다. break-all : 텍스트가 영역 밖으로 튀어 나오는 것을 방지합니다. 글자 단위로 줄 바꿈이 이뤄집니다. keep-all : 한/중/일 텍스트에 대해서는 줄을 바꿀 때 단어를 ..

웹 디자인과 UI/UX가 사업에 주는 긍정적인 효과 평소에 음식점을 많이 찾아보시지는 않으신가요? 기왕이면 특색 없이 밋밋한 곳보다는 사진찍기 좋은, 분위기 좋은 곳으로 가고 싶진 않으신가요? 이러한 현상은 잠재 고객이 여러분의 사업을 찾을 때에도 동일합니다. 고객 입장에서 기왕이면 형식상으로만 존재하는 사이트보다는 디자인이 정말 멋진 사이트에 눈길을 줄 것입니다. 온라인으로 모든 정보가 공유되는 요즘, 웹사이트는 잠재 고객들에게 제품과 서비스를 어필하고 소통하며 접점을 만드는 중요한 브랜딩 수단입니다. 단 5만원이면 비 전공자도 할 수 있는 가장 쉬운 방법이기도 합니다. 하지만 기업과 제품, 서비스에 대한 첫 인상을 남겨주는 디자인이 별로라면, 고객은 일말의 고민 없이 다른 곳을 알아볼 것입니다. 그렇..

미니멀리즘을 웹 디자인에 활용하기 위한 방법과 사례 분석 삶의 방식으로서 미니멀리즘은 필요한 만큼만 갖는 것을 의미합니다. 밖으로 나가기 전에 오늘은 뭘 입어야 할까 항상 고민하지 않으시나요? 미니멀리즘 라이프스타일은 내 생활 패턴에 맞는 최소한 옷만을 갖추기 때문에 이런 고민할 필요가 없어집니다. 오늘 하루는 뭘 입어야 할지, 오늘 패션은 괜찮은지, 내일은 또 뭘 입어야 할지 고민할 시간에, 미니멀리즘 라이프스타일은 우리에게 중요한 무언가에 좀 더 집중할 수 있게 해 줍니다. 불필요한 것을 버림으로써 좀 더 근본적이고 본질적인 무언가에 초점을 맞추는 것 그것이 미니멀리즘이 추구하는 가치이죠. 그리고 이는 웹 디자인에도 큰 영향을 주었습니다. 서로 다른 콘텐츠로 구성된 풍성한 디자인을 심플하게 바꿈으로써..

Apple 로고의 변천사와 숨겨진 의미 애플은 심플하고 심미적인 하드웨어 디자인으로 IT업계를 선도하는 기업입니다. 제품의 외형뿐만 아니라 내부까지 '미(美)'적으로 신경 쓰기로 유명한데요. 이렇게 디테일한 부분까지 완벽함을 보여주려 하는 노력은 브랜딩에도 적용됩니다. 브랜딩에서 가장 중요한 것 중 하나는 다방면에서 일관된 감각, 경험을 느끼게 하는 것입니다. 그런 점에서 애플은 '혁신'과 '완벽'이란 키워드를 꾸준하게 사용자들에게 제공하고 있죠. 그리고 이렇게 사용자들이 일관된 감각, 경험을 느끼게 해주는 것이 애플이 높은 고객 충성도를 유지하는 비결이라고 합니다. 그렇다면 회사의 아이덴티티를 직관적으로 보여주는 로고를 애플은 어떻게 다루고 있을까요? 가장 혁신적이고 트렌디하다고 평가받는 사과 모양 로..

온라인 마케팅이 중요한 이유 3가지와 전략 7가지 온라인 마케팅(Online Marketing)은 디지털 마케팅(Digital Marketing)이라고도 불리며, 컴퓨터와 주변 기기들 그리고 온라인 기반의 디지털 기술을 사용하는 마케팅을 의미합니다. 스마트폰 보급과 더불어 다양한 전자기기들이 일상에서 사용되고 있는데요. 때문에 많은 사람들이 자기 직전까지 혹은 자는 순간에도 인터넷과 연결되어 있습니다. 이렇게 여러분의 주 고객과 잠재 고객이 온라인에서 활동하고 있고, 이를 인지하고 있는 여러분의 경쟁사 역시 온라인 마케팅에 적극적으로 참여하고 있을 텐데요. 때문에 온라인에서 시행되는 마케팅이 사업의 생존과 성공 여부를 결정짓는다고 해도 과언이 아닐 것입니다. 그렇다면 온라인 마케팅을 시행했을 때 얻는 이..

온라인에서의 활동 거점을 만드는 '웹사이트'의 7가지 기대 효과 온라인 브랜딩의 핵심은 웹사이트입니다. 기업/서비스를 대표하는 웹사이트가 있다는 것은 그 자체만으로도 사람들에게 신뢰감을 주는데요. 여러분이 만약 어떤 제품을 구매한다고 가정해보면 좀 더 쉽게 이해할 수 있습니다. 단순히 쇼핑몰에 소개만 있는 물건 보다는 물건을 제조하는 업체의 웹사이트가 있는 곳에 좀 더 신뢰가 가지 않나요? 이러한 신뢰감에는 물건에 하자가 생겨도 AS나 후속 조치를 받을 수 있을 거란 믿음, 제품에 좀 더 진지한 모습을 보여준다는 생각이 들기 때문일 것입니다. 이처럼 웹사이트는 고객에게 신뢰를 주는 강력한 브랜딩 도구인데요. 이렇게 중요한 웹사이트를 통해 우리가 얻을 수 있는 기대 효과 7가지에 대해 소개해드립니다. 1...

네이밍 사례 분석 및 유형에 맞는 네이밍 프로세스 소개 잘 만들어진 회사 이름은 조직의 구성원들의 응집력과 사람들의 인지도를 향상시켜주는, 브랜드의 핵심 아이덴티티입니다. 헷갈리거나 복잡한 회사 이름은 사람들의 인지도 및 신뢰도를 떨어트리기에 결과적으로 매출 하락과 같은 악영향을 줍니다. 때문에 네이밍은 소비자들의 눈에 띔과 동시에 긍정적인 인상을 받을 수 있도록 해야 합니다. 네이밍은 창의력과 감각적인 영역이기 때문에 정답이란 것이 없습니다. 하지만 브랜드를 대표하는 특정 키워드를 기반으로 네이밍 하는 것이 일반적이며, 이미 전세계적으로 활동하는 기업들의 네이밍 사례를 통해 힌트를 얻을 수 있습니다. 외국어: 삼성(한자), 두산(한자), 세븐일레븐(영어) 단어의 조합/변형: Google(Googol),..

로고(Logo)의 중요성 / 종류 / 사례 알아보기 로고(Logo)는 사람들이 조직을 인식할 수 있는 독특하고 고유한 디자인입니다. 자연스럽게 브랜드를 떠올리게 하는 이 작은 디자인은 조직의 아이덴티티를 나타내는 비즈니스의 중요한 자산입니다. 주변을 둘러보면 수많은 제품과 서비스 사이에서도 조직과 브랜드를 상징하는 로고를 손쉽게 찾아볼 수 있는데요. 그렇기 때문에 로고는 일상에서 사람들에게 브랜드를 자연스럽게 인식시키는 외형이기 때문에 브랜드의 얼굴이라고 할 수 있습니다. 로고(Logo)의 중요성 비주얼 마케팅에 의하면 사람들은 시각적인 정보를 텍스트보다 더 빠르게 정보를 처리하며, 더 쉽게 기억하는 경향이 있다고 합니다. 때문에 최대한 많은 사람들에게 조직과 서비스를 알리는 마케팅 측면에서는 로고만큼 ..

미션 / 비전 / 핵심가치의 구분과 사례 알아보기 모든 서비스와 기업들은 그들만의 존재 이유와 행동양식이 존재합니다. 공감할 수 있는 가치관과 목표의식, 그리고 그들의 발자취는 그들이 계속해서 사업을 지속하고 발전시켜나갈 수 있는 원동력이 되는데요. 그렇기 때문에 사업을 준비하는 단계에서 미션(Mission) / 비전(Vission) / 핵심가치(Values)에 대해 고찰하는 시간을 갖곤 합니다. 밤바다를 보러 가는 여행을 준비한다고 생각해보면 좀 더 쉽게 이해하실 수 있습니다. 친구들과 서울에서 차를 타고 여수 밤바다로 여행을 간다고 생각해보세요. 그렇다면 우리의 미션은 '함께 바람이 시원한 여수 밤바다를 보는 것'이 됩니다. 지루해하는 친구들을 데리고 힘들게 몇 시간 동안 운전하는 이유는 우리의 미션..

글자 수를 맞출 필요 없이, CSS로 텍스트 자동 생략 설정하기 글(Post)의 대략적인 내용을 알려주는 '요약글/발췌문(Excerpt)'은 워드프레스에서 기본적으로 적용되어 있는 기능입니다. 요약글이 적용되면 화면의 레이아웃에 맞게 글 끝부분이 [...]으로 생략됩니다. 하지만 자동으로 설정되는 요약글은 제목과 문단 구분 없이 순서대로 내용을 출력하기에, 띄어쓰기가 어색해지거나 요약 내용에 아쉬움이 느껴질 때가 있습니다. 때문에 수동 요약글을 주로 사용하는데, 이때 일부 테마에서는 자동 생략이 적용되지 않습니다. 요약글 자동 생략이 되지 않을 때에는 PHP 코드 수정, 플러그인 설치, CSS 추가 등의 방법을 사용하여 조치합니다. 하지만 PHP 코드 수정은 웹 개발 지식과 각 테마의 파일 구성에 대한 ..