스토리 홈

인터뷰

피드

뉴스

디자인에 관심있다면 꼭 읽어야하는 글
조회수 2283

초기에 할만한 ASO (앱스토어 최적화) 팁

지난번 '문돌이가 어설프게 디자이너 대타로 일하는 법'에 이어 이번에는 PM의 마케터 따라하기의 다양한 방법론에 대해 논해보고자 한다. 사실 필자는 대기업에서 약 5년간 기획자로 재직하면서 다양한 마케팅 업무를 수행하였다. 특히, 캐논 플레이샷 캠페인은 필자가 처음 발의하여 현재 3회로 이어지고 있는 캐논의 연간 캠페인이 되기도 했다. 뭐 이런 마케팅에 대해서는 나름 자신감 충만한 채로 퇴사하여 스타트업을 하고 있지만, 실제 모든 마케팅 업무를 대행사에 일임하며 기획-보고-예산따기 업무만 하던걸 '난 마케터야'라고 착각하고 있었다는 걸 깨닫는건 그리 오래걸리지 않았다. (이거 뭐 써먹을데가 있어야지 참고)당장 앱 하나를 만들어 앱스토어에 런칭하면서 ASO (App Store Optimization, 앱스토어 최적화)의 세계에 대해 알게 되었다. 아마 SEO (Search Engine Optimization, 검색엔진 최적화) 작업에 대해서는 많이들 들어봤지만 ASO는 처음 들어보는 사람도 있을 것이다 (나도 우리 개발자가 얘기해 줘서 알게 되었다.)ASO의 정의는 찾아보면 다 재각각인데 대충 다음과 같이 정리할 수 있을 듯 하다. (내 개인적인 정의이다)앱스토어에서 내 앱의 가시성을 증대시키기 위한 일련의 모든 활동들여기서 '가시성'이란 단어가 핵심인데, 영어로 visibility, 즉 내 앱이 앱스토어상에서 사람들에게 최대한 잘 검색되고 잘 눈에 띄게 만들기 위한 모든 노력을 ASO라고 부르는 것이다. 크게 다음 영역이 있다.1. 앱스토어 제목 및 키워드 관리2. 앱 아이콘 및 스크린샷 최적화3. 리뷰 관리ASO는 물론 애플의 앱스토어와 구글의 구글플레이스토어가 기본개념은 같지만 디테일한 전략은 살짝 다르다. 이 글에서는 애플의 앱스토어 기준으로 작성된 방법론임을 미리 밝혀둔다. 그리고 또하나 당부할 것은, 아래같이 ASO 작업을 잘 해놓는다고 해서 갑자기 내 앱의 다운로드가 막 증가하고 그러진 않는다. (키워드 선정을 잘 해놓으면 내 앱소개 페이지의 임프레션이 늘긴 한다.) 바크 (Bark)앱도 한때 소셜네트워크 무료 부분에 25위까지 순위가 치솟은 적이 있었지만 ASO때문만은 아니였으나 ASO를 잘 해놓으면 트래픽이 발생했을때 어느정도 순위를 최대한 끌어올려주는 역할은 할 것이다. ASO는 앱스토어 순위 상승의 직접적인 영향을 주지는 않지만 앱 트래픽이 발생했을 때 이를 최대한 끌어올려주는 역할은 한다.앱스토어 제목 및 키워드 관리앱스토어에 앱을 올릴 때 PM이 (원래는 마케터가) 다음 3가지를 꼭 미리 작성해서 전달해야 한다.1. 타이틀2. 컨텐츠3. 앱 키워드여기서 컨텐츠는 사실 ASO에서 그리 중요하지 않은데, 그 이유는 앱 검색할때 검색 순위에 컨텐츠의 내용이 전혀 포함되지 않기 때문이다. 하지만 내 앱을 이미 찾고 나서 그 앱에 대해 알기 위해서는 역시 큰 역할을 하기 때문에 내용은 충실히 작성하되 처음 3줄은 정말 공들여서 작성하기 바란다. 왜냐하면 앱스토어 들어가면 처음 3줄만 보이고 그 밑에는 생략되기 때문이다.앱스토어 검색 순위에 영향을 미치는건 (다운로드, 리뷰수 등을 제외하고) 앱의 타이틀과 키워드라고 할 수 있다. 여기서 앱의 타이틀과 키워드가 1:1의 동일한 중요도를 지니는지, 타이틀에 있는 단어에 좀더 중요도를 주는지는 확실치 않다. 중요한건 타이틀과 키워드가 모두 앱 검색순위에 영향을 미친다는 것은 기정사실이라는 것이다.타이틀에는 [앱의 이름 - 중요한 키워드를 포함한 설명] 이런 식으로 작성한다. 예를들면 아래 예시에서 보시다 시피 SoundCloud라는 앱은 SoundCloud - Music & Audio라고 작성되어 있는데 앞에가 앱의 이름, 뒤에가 본인 앱을 대표하는 가장 중요한 키워드로 설명하고 있다. 만일 당신의 앱이 대학생의 수강신청을 돕는 앱이고 앱 이름이 '대학돌이,' 앱이 표방하는 가장 중요한 가치가 수강신청을 쉽고 빠르게 해주는 거라고 한다면 타이틀을 이렇게 만들어 볼 수 있을 것이다.대학돌이 - 원클릭으로 1분만에 대학생 수강신청 완료보다시피 앱 설명 부분에 '원클릭,' '대학생,' '수강신청'이라는 중요 키워드가 포함되어 있는 것을 알 수 있다.앱 타이틀은 '앱 이름 - 중요 키워드를 포함한 앱 설명'이 포함되도록 작성한다.앱스토어 키워드 선정이제 가장 중요한 키워드 선정에 대해 알아보자. 앱스토어의 키워드는 사실 애플이 구글처럼 검색관련 기술이 잘 발달되지 않아서 궁여지책으로 만들어 놓은 검색 툴이라고 한다. 즉, 보통은 검색엔진이 알아서 컨텐츠를 파악해서 사용자의 검색어 입력에 따라 가장 연관성 높은 앱을 추천해 주어야 하는데 애플은 그 연관성 높은 키워드를 앱을 올리는 사람이 직접 100자 이내에서 정해버리는 아주 고전적인 방법인 것이다. 수 많은 한국 앱들을 보면 이 100자 조차 채우지 않고 키워드를 대충 정해서 올리는 걸 많이 봐왔는데, 키워드가 제대로 작성되어 있지 않으면 내 앱이 앱스토어에서 아예 안보일 수도 있으니 주의하도록 하자.앱스토어 키워드 작업은 크게 다음과 같은 순서로 한다.1. 키워드 브레인스토밍2. 앱키워드 분석툴로 트래픽/혼잡도 체크3. 키워드 100자 이내로 최적화하기1. 키워드 브레인스토밍우선 키워드 작업에 있어서 아주 훌륭하면서 무료인 사이트를 하나 소개하겠다. 바로 SensorTower라는 사이트 이다. 이 사이트는 원리는 모르겠으나 애플 앱스토어의 수많은 앱들의 키워드, 순위, 트래픽, 혼잡도 등을 트래킹하여 실시간으로 수치를 확인해 볼 수 있는 분석 툴이다. 물론 엄청나게 비싼 유료툴이지만 내가 하는 방법처럼 사용하면 무료로 대부분의 기능을 사용할 수 있다.SensorTower는 ASO 키워드 관리를 위한 비싼 툴이지만 무료로 사용 가능한 방법이 있다.위의 사이트에 회원가입을 한 후, 프로덕트 앱에 내 앱을 등록할 수 있는데, 만약 아직 앱스토어에 라이브된 내 앱이 없다면 그냥 아무거나 등록해 놓도록 하자. (Default는 페이스북으로 되어있다) 이때 주의할 것은 내가 하려는 ASO작업이 한국 마켓을 기준으로 하려고 하면 내가 등록한 앱의 Country 세팅을 Korea로, 미국 마켓을 기준으로 하려고 하면 US로 세팅해 놓는다. (이 세팅은 언제든지 바꿀 수 있다.) 이걸 먼저 해 줘야 앞으로 설명할 키워드 트래픽 분석 수치를 지금 세팅한 국가를 기준으로 반환한다.우측 상단의 'Country'탭을 한국, 미국 등 다양한 마켓을 기준으로 세팅할 수 있다.내 앱의 키워드를 백지에서 만드는건 매우 어려운 작업이라서 나는 다음과 같은 꼼수를 사용한다.경쟁사 앱, 유명한 앱 등의 벤치마킹할 앱의 키워드를 검색해서 거기에서 괜찮은것 골라내기요즘 유행하는 신조어들을 구글링하여 내 앱과 어울리는 단어들 캐치하기내 앱인 바크(Bark)를 기준으로 설명해 보면 바크는 경쟁앱들이 카카오톡, 라인등과 같은 메신저앱들과, 1km, 모씨, 어라운드등과 같은 익명/위치기반 앱들, Tinder, Badoo등과 같은 데이팅앱들이 있다. 이 앱들을 위의 SensorTower에서 검색해 보면 다음과 같이 해당 앱의 키워드를 볼 수 있다. 이런 유명한 앱들의 키워드 중 마음에 드는 단어들을 엑셀 시트에 잘 정리해 놓는다.틴더의 키워드이다. 사실 이런 유니콘앱들은 ASO이런거 안해도 앱스토어에서 잘보인다.요즘 유행하는 신조어들은 구글링을 통해 금방 검색 가능한데, 이걸 왜 하냐하면, 위와같이 유명 앱들이 선정해 놓은 키워드들은 대부분 이미 키워드 혼잡도가 매우 높은 앱들이다. 우리 앱이 이제 막 출시했거나 아직 다운로드수가 충분하지 않다면 저런 chat과 같은 단어들은 검색창에 치면 우리앱은 한 1000순위 바깥으로 밀려나 있어서 검색될 확률이 zero이기 때문에 키워드 선정 백날 해놔봤자 초기에는 쓸모가 없다. 따라서 나는 이런 일반적인 단어 40% + 신조어 60%의 비율로 선정해 놓는다.신조어를 선정하는 기준은 다음과 같다.1. 내 앱의 타겟이 자주 쓰는 단어들이다.2. 키워드 혼잡도가 매우 적어서 저 단어를 검색하기만 하면 바로 내 앱이 검색될 수 있는 키워드바크 앱을 예로 들어 설명해 보자. 바크 앱의 메인 타겟은 15-30세의 젊은 층이다. 이 중에서도 대학생의 사용 비중이 높다. 그러면 요즘 대학생들이 자주 쓰는 단어 중에서 핫한 신조어들이 뭐가 있는지 한번 보자. 인터넷에 대충 구글링 해봤더니 다음과 같은 단어들이 눈에 띈다.개이득, 꿀잼, 엄친딸, 안습, 열폭, 볼매, 금사빠...사실 아는 동생한테 물어보니 "형 저런단어 이미 옛날껀데 촌스러워서 누가 써?" 라는 대답이 돌아왔지만, 아무튼 난 모르는 단어들이니 한번 이 단어들을 SensorTower에서 트래픽 조사를 해보자.2. 앱키워드 분석툴로 트래픽/혼잡도 체크SensorTower의 트래픽 검색은 App Store Optimization > Keyword Rankings에서 할 수 있는데, 5개 까지만 무료이고 그 이상부터는 돈을 무지막지하게 비싸게 내야 하는 유료툴이다. 나는 어떻게 활용하냐면 검색할 키워드 리스트를 미리 엑셀시트로 정리해 놓은 후, 5개씩 검색한다음에 검색 결과를 엑셀시트에 복사해 놓고, 다시 모두 지우고 다음 5개를 입력하고.. 이런 노가다를 통해 무료로 사용하고 있다. 키워드를 보통은 한 500개정도 서치해 보게 되는데 이를 5개씩 해야하니 거의 하루 종일 걸린다. 돈 있으면 유료로 사용하는걸 강추한다...아무튼, 여기에 '익명,' '채팅'의 일반적인 단어 2개와 '개이득,' '꿀잼'의 신조어 2개를 비교해 보도록 하자. 차트에서 Traffic은 내가 세팅해놓은 국가에서 사람들이 얼마나 이 단어를 찾아보느냐 이고, iPhone Difficulty는 현재 이 키워드가 얼마나 혼잡하느냐 (이 키워드를 점유한 앱이 얼마나 많은가) 이며, 'iPhone Apps'는 실제로 이 키워드를 사용하는 앱이 몇개나 있는지를 보여주는 탭이다. 이 3개가 가장 중요한 정보이다.Traffic, Difficulty, iPhone Apps 요 3개만 보면 된다.보다시피 '채팅'같은 단어는 트래픽이 5가 넘는다. 사람들이 매우 많이 찾는 단어라는 뜻이다. 혼잡도는 무료 6이 넘는다. 그만큼 이 키워드를 점유한 앱이 차고 넘친다는 뜻이다. 이런 앱에 바크와 같은 초기 앱을 같다 넣어봤자 검색창 한 100번쯤 넘기면 보일게 뻔하다. 하지만 저기 '개이득'이라는 단어를 보라. 사실 이런 단어를 솔직히 누가 찾아볼까 싶었는데 수치상으로는 트래픽이 3이 넘는다. 높은 수치는 아니지만 최소한 '익명'이라는 단어보다는 많이 찾아본다고 나온다. 뭐 '개'라는 단어랑 트래픽이 연관되서 수치가 왜곡되는지는 모르겠지만, '개'를 따로 찾아보면 트래픽은 4.1이 나온다. 솔직히 왜곡된 가능성이 없지는 않지만 초기에는 이것저것 해볼만한건 1%의 가능성이라도 다 해보는게 중요하다. '개이득'의 혼잡도를 보면 0.1이고 등록된 앱은 2개다. 이중 하나가 바크 앱이다. 이 말은 유저가 이 단어를 검색하면 내 앱이 아예 최상단에 뜬다는 얘기이다. 여기서 또하나 유추 가능한 것은 당신의 앱 이름을 아예 저런 단어로 만들어 버리고 광고 캠페인에서 저 키워드를 사람들한테 각인시키는 광고를 한다면 이 방법이 매우 효과적일 것이란 거다.앱스토어에 '개이득'을 치면 바크 앱이 가장 먼저 뜬다.아무튼, 나는 이런식으로 일반적인 단어 40%, 신조어 60%의 비중으로 키워드를 한 500개정도 추려서 위의 트래픽 조사 작업을 진행해서 엑셀 차트로 만들어 놓았다. 여기서 단어들을 최대한 트래픽이 많으면서 혼잡도가 적은 단어들을 선정하는 것이 이 방법론의 핵심이다.이런 식으로 SensorTower에서 5개씩 찾아본 트래픽 수치를 엑셀차트에 기록해 놓는다.3. 키워드 100자 이내로 최적화하기위 작업을 다 했으면 이제 내가 작업한 리스트에서 트래픽이 높으면서 혼잡도가 낮은 단어들을 추려서 100자 이내로 세팅한다. 아까도 말했듯이 내 앱을 설명하기 위해 꼭 필요한 일반적인 키워드들 40%, 아직 선점되지 않은 핫한 단어들 60%정도의 비중으로 추린다. 후자의 경우 혼잡도가 1이 넘고 이미 등록된 앱이 20개 이상일 경우에는 선정하지 않도록 한다. 어차피 앱 검색 페이지가 한 3페이지 이후로 밀릴 가능성이 크니 키워드 낭비이다. 또한 단어 두개가 조합되서 또다른 서치 키워드가 되는 경우 둘다 등록한다. 예를들어 사람들이 '익명채팅'이라고 검색할 수도 있고, '익명'이라고, 또는 '채팅'이라고도 검색 가능할 것이다. 이럴 경우 '익명채팅,' '익명,' '채팅' 이렇게 3개를 등록하는게 아니라 그냥 '익명,' '채팅' 이렇게 두개만 검색하면 저 3가지 케이스가 다 커버가 된다는 뜻이다. 100자 단어 카운터 역시 SensorTower에서 제공해 준다.최대한 키워드를 99이상이 되도록 꽉 채워서 완성한다.지금까지 초기에 할만한 앱스토어 최적화 작업에 대한 방법론을 살펴보았다. 이 외에도 앱스크린샷 잘 만드는 법, 앱 아이콘이 눈에 띄는 법 등등 다양한 최적화 방법론이 있다. 물론 이전 글들과 마찬가지로 내가 설명한 방법론은 조금 야매스러운점이 있다. 진짜 ASO전문가 들은 앱 인덱싱이라고 불리는 기법을 활용해서 저 키워드 작업을 아주 과학적으로 운용한다고 하는데 나는 솔직히 전혀 모르는 분야이다. 이 친구의 미디엄 블로그 글에 다양한 방법론들을 소개해 놓았으니 혹시 이 분야가 궁금한 사람들은 방문해 보기 바란다.글쓴이는 스팀헌트 (Steemhunt) 라는 스팀 블록체인 기반 제품 큐레이션 플랫폼의 Co-founder 및 디자이너 입니다. 비즈니스를 전공하고 대기업에서 기획자로 일하다가 스타트업을 창업하고 본업을 디자이너로 전향하게 되는 과정에서 경험한 다양한 고군분투기를 연재하고 있습니다.현재 운영중인 스팀헌트 (Steemhunt)는 전 세계 2,500개가 넘는 블록체인 기반 앱들 중에서 Top 10에 들어갈 정도로 전 세계 150개국 이상의 많은 유저들을 보유한 글로벌 디앱 (DApp - Decentralised Application) 입니다 (출처 - https://www.stateofthedapps.com/rankings).스팀헌트 웹사이트 바로가기
조회수 304

“제가 만족할 수 있을 때까지 계속 발전하고 싶어요.”

#성별은 남자 #직업은 디자이너#기계 그리기를 좋아하고 #디자인을 좋아하고 #브랜딩을 좋아하는 사람사실 이러한 수식어보다, 스스로 만족할 만한 작업을 하기 위해 계속해서 노력하고 있는 사람이라는 말이 더 어울리는 디자이너 주영진. 깔끔하면서도 멋스러운 패션 스타일부터 조근조근 재치 있는 말솜씨까지, 모든 것이 군더더기 없고 감각적인 그를 만났다.주영진에 대해 말해주세요!안녕하세요. B.A.T에서 이것저것 다 하는 디자이너 주영진입니다. 저는 클라이언트와 소비자의 접점을 찾아 시각적으로 표현하는 일을 합니다. 브랜드 디자이너로 경계선 지능 청소년 대상 예술교육을 실현하는 ‘DTS행복들고나’와 대학생 놀이 시터 서비스 ‘놀담’의 브랜드 아이덴티티를 담당했고, 그 외 마케팅에 필요한 시각적 콘텐츠들을 진행하고 있습니다.이것저것 다하는 디자이너라고 했는데, 대체 어떤 것들을 하길래. (웃음)개인적으로 한 분야에만 치우쳐 있는 것보다 골고루 분배되어 있는 디자이너가 되고 싶어서 기회가 되는 대로 최대한 많은 분야를 배우고 있는 중입니다. 그래픽, 편집, GUI 등 디자인뿐만 아니라 사진 촬영, HTML/CSS, IoT 등 언젠간 필요하다고 생각되는 분야까지도요.B.A.T의 메인 비주얼도 도맡아했다는 이야기도 들리던걸요?그렇습니다. B.A.T 폰트 개선 작업과 소개서 등 디자인도 모두 제가 했습니다. 하하 이것저것 다한다는 거 인정할게요! 그나저나 어떻게 B.A.T에 오게 된 건지 궁금해요.사실 이전에는 B.A.T를 몰랐어요. 퇴사 후 외주와 개인 작업을 병행하고 있었는데, 온라인 포트폴리오 사이트에 올라가있는 제 작업물을 보고 B.A.T에서 직접 연락을 주셔서 알게 되었습니다.전혀 몰랐던 회사인데 선뜻 러브콜에 응한 거예요?브랜딩이 너무 하고 싶었습니다. 그래서 퇴사를 결정했는데, 막상 나와보니 오래된 연차의 경력직들만 뽑더라고요. 제가 경력이 많은 편은 아니었거든요. 어떻게 해야 하나 고민하고 있던 상황에서 마침 연락을 받았고, 브랜딩을 할 수 있는 좋은 기회라고 생각해 결정하게 되었습니다.[노트폴리오 픽(NP)에 선정된 개인 작업물][B.A.T 폰트 및 로고 리뉴얼 작업]막상 와서 업무를 해보니 어때요?때로는 다양한 작업들을 하기에 브랜딩에만 집중 못 할 때도 있지만, 점점 더 브랜딩에만 집중할 수 있는 여건과 작업 시간을 만들어주셔서 차근차근해보고 있는 중입니다. 또한 혼자 프로젝트를 진행해야 한다는 부분이 초반에는 조금 어려웠는데, 막상 적응하고 나니 이러한 점들이 오히려 개인으로서 빠르게 발전해나갈 수 있다는 장점으로 작용되는 것 같습니다.사실 좋아서 하는 일이라도 '직업'이 되는 순간 힘들다고 느낄 때가 있잖아요. 맞아요. 특히 프로젝트를 진행하는 동안 제가 생각하는 방향과 다르게 흘러갈 때라던가 커뮤니케이션 미스로 서로에게 의미가 다르게 전달될 때가 가장 힘든 것 같습니다. 각자 열심히 잘하고 싶은 마음은 같은데, 그게 결과물로 잘 이어지지 않으면 아쉽죠.반대서 일하면서 가장 보람을 느꼈던 순간은요.나와 클라이언트가 모두 만족하면서 프로젝트를 마쳤을 때?여기서 마쳤을 때라는 부분이 가장 중요합니다! (웃음)최종적으로 이루고 싶은 목표는 뭐예요?호랑이는 죽어서 가죽을 남기고, 사람은 이름을 남기며, 디자이너는 포폴을 남긴다고 합니다(?)  만족할 수 있는 작업물을 통해 한 단계씩 계속해서 나아갈 수 있는 디자이너가 되고 싶습니다.마지막으로 B.A.T 지원자들에게 한마디.함께하세용!
조회수 7244

초보 디자이너를 위한 안드로이드 DP(Dip), PX, DPI의 개념

안드로이드 앱 디자인은 처음인데요안드로이드 앱 디자인 처음 접하게 되면 dp, px(픽셀), Dpi이란 말을 듣게 됩니다. 안드로이드는 다양한 스마트폰 화면 크기와 해상도를 지원하고 있기 때문에 필요한 개념입니다. 처음에는 헷갈리기 쉽지만 생각보다 어렵지 않습니다. 그리고 이와 관련된 지식을 알고 있으면 디자인,개발 작업에 도움이 됩니다.스크린의 실제 단위 Pixel많이 들어봤을 법한 픽셀은 화면을 구성하는 최소 단위입니다.Pixel 단위는 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위이므로 안드로이드에서는 Pixel보다 dp 단위를 사용하는 것이 개발이 이루어질 때 수월합니다.그 이유는 아래 DP단위 개념을 설명에서 알 수 있습니다.DPIDPI는 Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위입니다. 예를 들면 100DPI는 1인치당 픽셀이 100개 포함된다는 것을 말합니다. 개수가 많을 수록 고밀도이며 안드로이드에서 주요 DPI는 아래와 같습니다.DPI기준ldpi120dpimdpi160dpi (기본)hdpi240dpixhdpi320dpixxhdpi480dpixxxhdpi640dpi안드로이드의 기준 DPI는 160 DPI 입니다. 160 DPI인 경우 밀도 독립단위 DP와 PX이 같은 크기를 갖습니다. 즉, 16DPI에서는 1dp는 1px이 됩니다.다양한 디바이스 크기에 대응하기 위해 필요한 DPDP는 픽셀 독립 단위입니다.화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위이며 큰 화면,작은 화면에 상관 없이 같은 크기로 나타납니다.예시1) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 PX 단위로 크기를 지정했을 때예시2) 같은 사이즈의 애플리케이션에 Low, Medium, High-density 화면에 DP 단위를 지원했을 때위의 예시들을 보면 안드로이드에서 왜 DP단위를 써야 하는지 알 수 있습니다.위의 개념들을 실무에 응용DP, Px, DPI는 안드로이드 앱 디자인 할 때 꼭 알아야 합니다. 실제로 디자이너는 디자인 후 이미지를 보내줄때 해상도별로 Png파일을 보내줘야 하고 개발자도 리소스 파일을 해상도별로 관리해야 합니다.DP와 PX의 단위 변환개발을 하다보면 DP를 PX로 바꿔줘야할 경우가 있습니다. 안드로이드 레이아웃을 코드 작성 할때 는 DP를 사용할 수가 없기 때문입니다.사용하는 공식은 아래와 같습니다.px = dp * 단말 DPI/기본 160dp = px * 기본 160/단말 DPImdpi 지원 단말일 경우 dpi는 160 이므로 1dp 160/160 = 1pixel이 됩니다.xxhdpi 지원 단말일 경우, 5dp를 pixel로 계산하면5dp 480/160 = 15 pixel 이므로 xxhdpi 단말의 5dp는 15pixel이 됩니다.단위 변환을 계산해주는 도구디자이너는 가이드를 작성할 때 DP계산이 필요하고 개발자는 코드를 작성할 때 PX 계산이 필요합니다.머릿속으로 계산이 빨리 되면 상관없겠지만, 일하면서 여간 쉬운 일은 아닙니다.(숫자에 약한 디자이너라면 더더욱…!) 그래서 계산이 힘든 사람들을 위해 작업 시간도 줄여주는 도구 몇가지 소개합니다.1. Android DP/PX converter   각 화면 밀도 별로 dp 를 pixel 로 pixel 을 dp 로 간단하게 확인 해 볼 수 있다.(바로가기)2. Pixplicity DP/PX converter   각 화면 밀도 별로 pixel, dp, sp, mm, inch, pt 로 계산 값을 확인 할 수 있다. (바로가기)3. Cracker9의 Unit Converter   디자이너가 작업하면서 쓰기 유용한 포토샵 플러그인이다. (바로가기)안드로이드 앱 디자인 하실 때 도움이 많이 되셨으면 좋겠습니다.#에이치나인 #디자이너 #개발자 #협업툴 #크래커나인 #솔루션기업
조회수 2499

같은 크기가 달라보이는 이유, 시각적 보정 이해하기

여기 크기를 맞춘 도형 조합 A, B가 있습니다. A, B 중 사각형과 원의 크기 비율이 같아 보이는 조합은 무엇인가요?  저는 B조합이 훨씬 더 자연스럽게 보입니다. A는 가로 세로 크기를 똑같이 맞췄으며, B는 상대적으로 면적을 고려해 원형의 크기를 사각형보다 조금 더 크게 그렸습니다. 이처럼 사람의 눈에 자연스럽게 보이도록 조정하는 작업을 ‘시각적 보정’이라고 합니다. 디자이너, 혹은 디자이너가 아닌 사람들도 다양한 프로그램을 통해 미세한 크기를 똑같이 맞출 수 있습니다. 하지만 프로그램이 오브젝트를 인식하는 것과 사람이 보는 것은 다르기 때문에, 때론 아주 정확한 것이 부자연스럽게 보일 수 있습니다. 서로 다른 형태 사이의 차이점을 보완해주는 작업이 필요합니다.  최근 저는 이러한 시각적 보정에 대해 요목조목 잘 정리된 루크 존스(Luke Jones)의 “Optical Adjustment”를 읽었습니다. 여기에 몇 가지 추가 사례를 덧붙여 함께 소개합니다. (“Optical Adjustment”의 원문 번역글은 강수영님의 “시각적인 보정”에서 확인할 수 있습니다.)1. 도형에 따른 크기 조정하기앞서 살펴본 원과 사각형의 크기 조절부터 다시 볼까요? 사방 80pixel의 영역 안에서 사각형은 원보다 넓은 면적을 차지합니다. 우리 눈은 사방 길이를 통해 크기를 인식하기 보다는, 면적을 보고 어림잡아 비슷한 크기를 가늠합니다. 사각형보다 원의 크기를 조금 더 크게 그려주면 비교적 두 도형의 크기가 동일해 보입니다.2. 시각적 무게 중심 고려하기시각적 무게 중심에 따른 정렬은 플레이 버튼 아이콘을 통해서 해볼 수 있습니다. 원형과 삼각형을 중앙 정렬하면 A 아이콘처럼 됩니다. 중앙에서 빗겨나 있는 것처럼 보이는데요, 이는 삼각형의 무게 중심이 원형의 중심과 맞지 않아서 그렇습니다. 이렇게 서로 다른 형태의 오브젝트를 정렬할 때는 무게 중심을 고려하여 B 아이콘처럼 수정해주는 것이 좋습니다.3. 면적 대비 색상 조정하기면적에 따라서 색상의 무게감이 달라집니다. A는 파란 아이콘에 비해 텍스트 컬러가 살짝 연해 보입니다. 이렇게 넓은 면적과 비교적 좁은 면적(텍스트/라인)에 같은 색상이 쓰이는 경우가 많습니다. 이럴 때 좁은 면적의 컬러를 조금 더 짙게 수정해주면 면적의 넓이와 상관없이 (비교적) 동일한 색상으로 인지됩니다.3. 형태를 고려해 오브젝트 정렬하기이번에는 슬로워크에서 디자인한 DMZ국제다큐영화제 시그니처를 예시로 정렬을 살펴보겠습니다. 자세히 보면 시그니처의 우측 가장자리에 ‘~제' 로 끝나는 첫줄과 ‘-29.’로 끝나는 마지막줄이 있습니다. 온점은 한글보다 공백을 많이 포함하고 있습니다. 그래서 A처럼 정직하게 정렬하면 마지막줄만 움푹 들어간 것 처럼 보입니다. 이를 B처럼 튀어나오게 수정해주는 것이 보기에 자연스럽습니다.  4. 명도에 따라 굵기 조정하기4번의 컬러 조정과 같은 맥락으로, 오브젝트의 명도에 따라 굵기가 달리 보일 수 있습니다. 좌측의 흰색 텍스트와 우측 상단 검은색 텍스트(굵기 조정 전)는 같은 굵기의 폰트입니다. 검은색 텍스트가 상대적으로 가늘어 보여서 조금 더 굵게 수정했습니다. 네거티브, 포지티브 적용을 동시에 할 때 이런 점을 고려하곤 합니다.5. 영문폰트와 한글폰트 조합시 조정하기한글폰트와 영문폰트를 조합해서 디자인하는 경우가 많습니다. 편집디자인 툴인 인디자인 프로그램에는 ‘합성글꼴’이라는 기능이 있어 숫자, 영문, 국문, 기호 등을 각각 다른 폰트로 지정하고 세세하게 크기도 다르게 할 수 있습니다. 서로 다른 폰트를 억지로 이어붙이는 것이기 때문에, 크기값이 같아도 한글폰트가 더 커보입니다.(좌측 텍스트) 이때 크기와 높낮이를 직접 조정해주는 것이 좋습니다.(우측 텍스트)6. 커닝(글자 간격 조정)하기왼쪽 텍스트를 자세히 들여다보면 글자의 각기 다른 모양 때문에 배열이 균등하지 않아 보입니다. 이때 글자의 형태를 고려해 적당한 간격으로 보이도록 수정하는 것을 커닝(kerning)이라고 합니다. 커닝은 상대적으로 공백을 많이 가진 글자(숫자 1, 알파벳 A, W, V)일수록 조정을 필요로 합니다. 디자인을 전공하면 가장 기초적으로 배우는 부분임에도, 저는 커닝을 완벽히 하는 것이 제일 어렵습니다.커닝을 연습할 수 있는 사이트도 있습니다. 완성도에 따라 점수도 매겨줍니다. 간단하게 여러분의 눈썰미가 얼마나 날카로운지 확인해보세요. -> 커닝 해보기참고: Luke Jones - Optical Adjustment#슬로워크 #스티비 #디자인팀 #디자이너 #꿀팁

기업문화 엿볼 때, 더팀스

로그인

/