디자인회사에서 더욱 효율적으로 일할 수 있을까요? 업무용 메신저 소통 방법부터 스스로 건강 챙기기까지 디자이너라면 또는, 디자이너와 일하는 분이 알아두면 좋은 글을 모았습니다.


1. 업무용 메신저 슬랙(Slack), 슬로워크는 이렇게 사용합니다.

이젠 업무에 메신저를 사용하지 않는 직장을 찾아보기 어렵습니다. 라인이나 카카오톡을 사용하기도 합니다. 하지만 원고, 시안 등 파일을 자주 공유해야 하는 디자인 회사의 업무 속성을 고려하면 업무용 메신저를 사용하는 것이 효율적입니다. Slack, Hall, Jandi 세 가지 업무용 메신저 사용 후기와, 어떤 메신저가 디자인회사 슬로워크에 가장 적합했는지를 공유합니다.



업무용 메신저 슬랙(Slack), 슬로워크는 이렇게 사용합니다. ➔ 더 읽기



2. 업무용 그룹메시지 에티켓 6가지

업무를 마친 밤이나 주말에도 업무용 메신저가 울리는 경우가 있습니다. 업무용 채팅에서 지켜야 할 에티캣 6가지를 소개합니다. 



업무용 그룹메시지 에티켓 6가지 ➔ 더 읽기 



3. 디자이너와 디자인회사를 위한 업무 필수앱 5개

슬로워크가 디자인 업무에 사용하는 무료 모바일 앱 5가지를 소개합니다. 빠르고 효율적인 자료 확인, 기록, 공유를 할 수 있도록 도와줍니다.



디자이너와 디자인회사를 위한 업무 필수앱 5개 ➔ 더 읽기 



4. 출력과 인쇄, 무엇이 다를까?

출력과 인쇄, 디자이너도 가끔은 혼용해서 쓰는 표현입니다. 출력과 인쇄 두 용어를 명확하게 이해하고, 과정 비교를 통해 자신의 업무에 적합한 제작 방법을 고르는 기준까지 제시합니다. 클라이언트에게 인쇄 개념을 알려주시고 싶다면 이 글을 꼭 보여주세요.



출력과 인쇄, 무엇이 다를까? ➔ 더 읽기



5. 작업에 도움을 줄 사소하지만 유용한 포토샵 팁

포토샵을 주로 사용하는 웹디자이너, 간단한 작업을 하는 비디자이너에게도 유용한 포토샵 팁 7가지를 소개합니다.



작업에 도움을 줄 사소하지만 유용한 포토샵 팁 ➔ 더 읽기



6. 디자이너 부럽지 않은 아이콘 활용하기

디자이너가 아니더라도 기획서나 간단한 문서에 자주 활용하는 아이콘을 찾기 힘들었다면 이 글을 꼭 보세요. 구글 검색으로 통일성 없는 아이콘을 제각각 사용한 경험이 있는 분도 꼭 보세요. 아이콘 작업을 하다 막힌 디자이너라면 소개된 웹사이트를 통해 다양한 아이콘 표현 방법을 참고해보세요.



디자이너 부럽지 않은 아이콘 활용하기 ➔ 더 읽기



7. 사무직 노동자를 위한 스트레칭, 50'

열심히 일한만큼 몸도 챙겨야겠죠? 어깨통증, 손목저림.. 열심히 일한 디자이너라면 한 번쯤 겪어봤을 고통입니다. 오랜시간 앉아서만 일하는 사무직 노동자를 위한 통증 예방 스트레칭 방법을 배워보세요.



사무직 노동자를 위한 스트레칭, 50' ➔ 더 읽기





Posted by slowalk



디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다.


서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다.


이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다.


여담이지만 디자인과 출신인 저도 자간, 행간에 대한 감각이 형편 없습니다.


자간과 행간의 기준은 디자이너들 사이에서도 많은 차이가 납니다. 모바일에서 잘 안 보인다고 만지지 않는 분이 있지만, 편집디자인처럼 세세하게 다 보시는 분도 있습니다.


다양한 디자인 의도를 정확하게 표현하기 위해, 가이드를 넘어 포토샵에 대한 이해가 필요합니다.



자간

포토샵에 자간을 작업하는 방식은 다음과 같습니다.




단위가.. 없네요


퍼블리싱 작업을 할 때 저 알 수 없는 단위를 어떻게 환산해야 할지 고뇌한 적이 많습니다. 솔직하게 말씀드리면 자간이 좁다고 생각되면 -1px로 처리했던 적이 많습니다. (디자이너분들에게 죄송합니다...)


저 단위 없는 자간의 정체는 무엇일까요? 어도비 공식사이트에는 다음과 같이 명세 되어 있는데요.


자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em으로 측정됩니다. 6포인트 글꼴에서 1em은 6포인트에 해당하고, 10포인트 글꼴에서 1em은 10포인트에 해당합니다. 커닝 및 자간은 현재 문자 크기에 정확하게 비례합니다.


쉽게 말씀드리면, 포토샵의 1000이 CSS의 1em(현재 폰트크기)과 일치합니다. (링크)



파이어폭스에서 구현된 자간. 거의 일치합니다.



가장 정확하게 렌더링하는 파이어폭스 기준으로 거의 일치하는데요.이제는 픽셀로 어설프게 맞추지 않아도 되겠네요. 

(*IE9 이하 등 구형브라우저에서는 소수점을 정수화 처리하기 때문에 정확하게 작동하지 않을 수도 있습니다. 링크)



행간

포토샵에서 행간을 넣는 방법은 이렇습니다.




자간과 비교하면 단위가 있어서 다행이네요.

하지만 포토샵과 CSS의 line-height의 방식은 다릅니다.




이처럼 포토샵은 글자의 가장 윗부분을 기준으로,

css의 line-height는 글자의 수직중앙을 기준으로 작동합니다.




결국, 이런 오차가 생길 수밖에 없는데요. 이 오차 때문에 가끔 글씨 위 아래로 애매한 여백이 생깁니다. 이 여백을 계산하는 공식((행간 - 폰트사이즈) / 2)을 사용하면 좀 더 정확하게 퍼블리싱 할 수 있습니다.  



행간과 자간을 디자이너의 의도와 비슷하게 맞추는 방법에 대해 알아봤습니다. 하지만 위와 같은 방법으로 해도, 아래의 예시와 같이 OS와 브라우저의 렌더링 방식에 따라 1~2px정도 오차가 있을 수 있습니다.


크롬에서 구현된 자간. 미세하게 오차가 있습니다.



웹디자인에서 자간과 행간의 문제는 개발자의 실력도 원인이 될 수도 있겠지만, 디자이너들과의 의사소통으로 간단히 해결할 수 있다고 생각합니다. 이런 소통을 통해 모두가 만족할 수 있는 프로젝트를 진행할 수 있었으면 좋겠습니다.




출처: Justin Marsan, 어도비 공식사이트


더 읽기 > 올바른 웹, 모바일 폰트 사용하기


by 원숭이발자국



Posted by slowalk




내가 그의 이름을 불러 주기 전에는
그는 다만
하나의 몸짓에 지나지 않았다.


내가 그의 이름을 불러 주었을 때
그는 나에게로 와서 꽃이 되었다....


김춘수의 [꽃]






세상에는 수많은 광고판들이 있습니다. 하지만 우리가 달려가서 그의 이름을 부르기 전까지는 꽃이 되지 못하는 광고판들이 여기에 있습니다. 바로 우리의 참여가 있을 때 완성되는 "인터랙티브 광고판" 인데요.


사람들의 참여가 이루어질 때 발생되는 절묘하고 기발한 광고의 미학! 그 세계로 빠져들어 볼까요?





1. 문자메시지 참여형




더블린에 설치된 이 혼다자동차 광고는 사람들이 보내는 문자메시지에 반응 합니다. start와 관련된 문자를 보내면 자동차가 반응합니다. 더불어서 혼다자동차와 관련된 정보를 문자로 다운로드 받을 수도 있습니다. 영상을 보시죠!





다음 영상은 나이키축구 홍보와 관련된 빌보드 입니다. 광고판 안에 LED 판을 삽입해서 거기에 적힌 주소에 문자를 보내면 그 문자를 송출하는 방식의 광고판이네요.









2. 관광객 사진 참여형




이번 광고는 맥도날드가 런던에 설치한 LED 광고입니다. 관광객들이 이곳에서 사진을 많이 찍어간다는 점에 착안해서 사람들의 사진에 개입될 수 있는 형상들을 LED광고 판에 띄우는 방식의 인터랙티브 광고입니다. 약간은 고전적인 방식이지만 사람들의 반응은 마냥 즐거워 보입니다.








3. 참여 기부형




나이키에서 아르헨티나에 설치한 이 인터랙티브 광고판은 참여함으로써 달라지는 인터랙티브의 미덕도 있지만 참여의 결과에 따라 사회적으로 좋은 활동을 한다는 의의도 훌륭합니다. 달리기를 좋아하는 사람들은 이 빌보드 판에 장착된 러닝머신에서 달릴 수 있으며, 누적된 달리기 Km 수에 따라서 금액으로 환산해서 유니세프에 기부한다고 하네요.







4. 카메라 노이즈 발생형.




지금 소개드릴 타입은 바로 카메라 노이즈 발생형입니다. 카메라를 찍는 사람들에겐 무의식적으로 반응 할 수 밖에 없는데요. 바로 그런 것을 노린 광고판이랄까요?  스웨덴에 설치된 일본 TV프로그램의 홍보 광고입니다. 약간의 소리와 함께 사진 찍는 소리, 사진의 플래시를 시각적으로 경험하게 만들면서 이 광고에 주목하게끔 합니다.




이와 비슷한 카메라 노이즈 형으로는 니콘의 카메라 광고를 예로 들 수 있습니다.




빌보드 판 앞에는 빨간색 카펫이 깔려 있습니다. 이것이 뭐냐구요? 바로 예상했겠지만, 헐리우드 스타들, 무비스타들이 밟는 바로 그 레드카펫입니다. 영화 속의 주인공이 된 기분을 느끼면서 프레스 라인, 카메라들의 쉴 새없는 플래시 세례 앞을 지나가는 기분을 여러분도 느껴 볼 수 있습니다. 이 광고는 우리나라 광고사의 아이디어로 프로모션 되었는데요, 그래서 우리나라에도 실제로 설치 되어있습니다. '신도림' 역에 가면 만나볼 수 있지요.






노키아에서 만든 카메라 반응형은 좀더 복합적이고 진보적입니다.



바로 카메라로 실제로 찍고, 그것이 빌보드 LCD 창에 반응하고 애니메이션으로 뿌려준다는 점인데요. 앞에서 카메라의 작동방식을 따와서 작동하는 척 했던 빌보드와는 다르게, 이것을 실제로 카메라가 광고판 앞에 선 사람을 카메라로 찍고, 찍힌 사람이 광고의 주인공이 된다는 점에서 차이가 있습니다.





위의 실제 카메라의 작동원리에서 파생된 광고가 있습니다. 카메라가 사람의 움직임을 읽어서, 이것을 아름다운 그래픽으로 송출 하는 광고 이미지 인데요.




포토샵으로 유명한 어도비사는 광고판 앞을 지나가는 사람들에 반응하는 아름다운 그래픽 광고를 선사합니다.










5. 정보 송출형


이번에 소개드릴 인터랙티브 빌보드는 바로 유의미한 정보를 광고판에 전달하는 정보송출형 입니다.




BBC에서 방송되는 미국에 관련된 기획프로그램을 홍보하는 빌보드입니다. 미국에서 벌어지는 사안들과 관련된 수치정보를 주제에 맞게 실시간으로 송출하는 광고판이지요. 이를테면 미국의 전염병 소식을 전하면서 전염병에 걸린 사람의 숫자와 치료된 사람의 숫자를 실시간으로 정보를 빌보드판에 띄웁니다.







이 광고판은 "느린것이 더 낫다." 라는 슬로건으로 교통안전 캠페인을 진행하는 내용을 담은 빌보드 판입니다. 교통과 관련된 유익한 정보들을 제공하는 빌보드들은 실제로 우리나라 고속도로에서도 많이 본 경험이 있지요.








지금 소개할 BMW 미니 역시 기발한 인터랙티브 광고의 좋은 사례입니다. BMW 미니에는 고유의 정보가 기록되어 있고 그 정보는 이 빌보드를 담당하는 컴퓨터에 전송됩니다. 이 빌보드는 그 정보를 읽어내서 그 공간을 지나가는 미니 드라이버에게 개인적인 메시지를 던집니다.  이를테면
" Hi Mr. 리. 과속하지마세요. 요즘 변호사생활은 잘되요?"







6. 물리적 체감형


이번에 소개할 인터랙티브 광고판은 실제로 물리적인 반응을 활용하는 광고판들 입니다.




뭔가 엿보고 싶은 관음증을 이용한 광고랄까요. 빌보드 광고판이 유용한 것은 평면속에 이미지를 표현해내는데 그치는 것이 아니라, 입체적으로, 물리적인 이미지를 설치 할 수 있다는 점이 장점입니다.. 바람이 불면 젖혀지는 스커트 속의 속옷이미지를 통해서 주목을 이끌어내고 속옷을 광고하는 인터랙티브 빌보드 광고입니다.





기브스를 한 석고보호대 위에 낙서를 한 경험들을 살려서, 메모를 유도하는 광고판.





닌텐도의 위의 광고 빌보드 입니다. 고전 게임의 픽셀이미지와 포스트잇 형식을 조합하여 옛날 닌텐도 고전 게임들이 곧
Wii 플랫폼으로 출시 되니까 잊지 말아달라 라는 식의 홍보를 하는 인터랙티브 빌보드 입니다. 포스트잇을 집에 가져가서 붙여 놓으면 옛 향수와 함께 새롭게 출시되는 게임기에 대한 기대를 키울 수 있겠지요.





이번에는 필립스사에서 내놓은 인터랙티브 광고입니다. 야광으로 처리된 포스터 광고는 밤이 되면 빛을 냅니다. 낮에는 에너지를 저장해두었다가  밤에 야광으로 빛을 발하면서, 에너지에 대한 저장과 활용에 대해서 생각해 볼 기회를 던져주는 빌보드 이지요.




지금까지 다양한 종류의 인터랙티브 광고에 대해서 살펴보았습니다. 광고를 접하는 사람들의 직접적인 참여들이 이루어질 때 비로소 완성되는 인터랙티브 광고는 그 전달되는 메시지의 효과가 기존의 광고보다 훨씬 더 인상적으로 우리의 머릿속에 침투합니다. 수많은 광고의 홍수속에 살아가는 우리들에게 이런 기발하고 효과적인 광고는 눈에 더 띌 수 밖에 없는데요. 이런 광고들이 사회적인 공익과 잘 맞물리면서 사람들에게 보다 유익한 광고를 전달하고 좀 더 나은 사회를 만들어가는데 이바지 하길 개인적인 마음으로 빌어봅니다.


이렇게 새로운 인터랙티브를 체험하고 싶으신 분은 "신도림"2호선 역에 방문하시면 니콘의 카메라 광고를 경험해보 실 수 있습니다!^^

Posted by slowalk