Automatically show index.html 설정을 체크한 후 CHOOSE FOLDER로 웹서버를 돌릴 폴더를 선택해주자. 그리고 [su_highlight background=”#ffef3b”]127.0.0.1:8887[/su_highlight] (또는 localhost:8887)로 접속하면 끝!
Html과 Javascript로 나만의 UI를 만들고 빠르게 확인하는데 좋을 것 같다. Service Worker 같은 Https가 필요한 기술도 실행이 가능하다.
데스크톱 상에서 디자인 작업에 더욱 정확한 측정을 위해 눈금자(Screen Ruler) 중 하나를 사용하거나 실제 객체를 측정하려면 눈금자가 인치(inch)/센티미터(cm)가 맞도록 조정해야 한다. 최상의 결과를 얻으려면 현재 디스플레이의 해상도 (즉, 1920 × 1080)과 모니터의 정확한 대각선 크기(즉, 23.5″)를 알아야 한다. 모니터가 실제로 21.5인치 일 때 22인치 값을 사용하면 여전히 약간의 부정확한 측정값이 생성되고 가능한 한 정확해야 한다.
자신이 사용하는 모니터의 정보가 있으면 PPICalc를 방문하여 확인 가능하며, 또는 DPI / PPI 계산기 웹 및 가로 및 세로 해상도와 대각선 크기를 입력하여 확인할 수 있다
눈금자(Screen Ruler)
그러면 페이지에 인치당 픽셀 수 (PPI)가 출력되어 가장 정확한 측정을 할 수 있는 경우 눈금자 유틸리티에 입력할 수 있다. 이것을 허용하는 대부분의 도구는 100%가 아니지만 소수에 가까운 정수를 입력할 수 있게 해 준다.
Mac OS
Pascal은 많은 직관적인 기능을 갖춘 Mac OS X 용 무료 눈금자이다. 웹 개발자, 그래픽 디자이너 및 프로그래머에게 적합할 수 있다. 참고로 PixelSnap은 아마도 최고의 스크린 자가 않을까 싶은데 한 가지 아쉬운 점은 유료라는 거 참고하기 바라며, 개발한 회사에서도 자신감이 대단하다. 30일 이내에 사용 중 맘에 들지 않으면 환불해준다는 내용이 구매 버튼 바로 아래 나와 있다.
독립적으로 또는 동시에 사용할 수 있는 수평 및 수직 눈금자를 지원
pixel, inch, picas 또는 centemeter 4가지 단위를 제공
눈금자의 자동 정렬 및 자의 길이를 잠가두거나 늘릴 수 있음
눈금자를 그룹화하고 단위로 이동 가능
수직, 수평자 중 하나만 사용 가능
사용자 정의가 가능하며, 투명도 지원
더 정확한 측정을 위해 마우스 위치를 따르는 대화 형 눈금 표시
길이가 200 픽셀에서 5000 픽셀 인 눈금자를 독립적으로 크기 조정 가능하며, 대부분의 눈금자 기능을 위한 단축키 지원
데스크톱 모든 요소의 픽셀 크기를 측정하기 위한 도구이다. 쉬운 눈금자 도구를 사용하여 바탕 화면의 모든 요소에 대한 픽셀 단위의 크기를 측정 가능하다. 판독 가능한 픽셀 측정 스케일로 크기를 조정하고 드래그할 수 있는 눈금자이다. 아래의 4가지 모두 윈도우즈 10에서 이상 없이 작동되는 것을 확인하였다.
제플린(Zeplin)은 공동 작업을 위한 웹과 데스크톱을 모두 지원하는 프로그램이다. 스케치(Sketch), 어도비 XD CC, Photoshop CC, 피그마(Figma) 등과 연동하여 자동으로 작업한 결과물을 Asset 생성, 좌표값, Color Palette를 스타일 가이드로 생성해 준다.
과거 Assistor PS를 사용하여 추출된 소스를 ppt에 정리하여 디자인 가이드 ppt 문서와 이미지 파일 asset을 개발자에게 넘겨줬었는데 몇 년 전 제플린이라는 프로그램이 나오면서 이제 제플린을 이용한 가이드를 요구하는 곳이 하나둘씩 늘어나는 추세다.
제플린은 가이드를 생성하고 요소의 크기를 확인하는 이 모든 과정을 자동화하여 시간과 노력을 절약해준다.
Sketch 디자인에서 Zeplin으로 아트 보드를 내보내는 것은 아주 간단하다. 디자인 결과물을 내보낼 수 있으려면 데스크톱 응용 프로그램을 다운로드해야 한다. 스케치 파일에서 레이어 / 아트보드를 선택하고 ^⌘E을 누르거나 상단의 “플러그인> Zeplin> 선택된 아트보드 내보내기… “메뉴를 사용하여 내보내기 프로세스를 시작하면 된다.
얼마 전 Zeplin의 새로운 Adobe XD CC 인터그레이션을 시작했다. 그 이후로 수십만 건의 디자인이 Adobe XD에서 Zeplin으로 내 보내졌다고 한다. 프로토타이핑 링크 및 그리드 내보내기와 같은 기능을 추가하여 인터그레이션 기능이 개선이 되었다고 한다. 현재 Mac/Windows 모두 지원하고 있다.
GitHub에서 새로운 정책을 새해에 발표했다. 이제 GitHub에서도 비공개 프로젝트를 프리 버젼 사용자들도 사용이 가능해졌다는~
무료 개인 저장소(free private repositories) 및 엔터프라이즈(Enterprise) 제품에 대한 다음과 같은 업데이트 내용이다.
GitHub Free는 무제한 개인 저장소를 포함합니다. 개발자는 처음으로 개인 프로젝트에 GitHub을 사용할 수 있으며 저장소당 최대 3명의 공동 작업자를 무료로 사용할 수 있습니다. 많은 개발자는 사설 리포지셔닝을 사용하여 일자리를 신청하거나, 부 프로젝트에서 일하거나, 공개적으로 공개하기 전에 사적으로 뭔가를 시도하려고 합니다. 오늘부터 GitHub에서 무료로 이러한 시나리오를 비롯한 다양한 시나리오를 사용할 수 있습니다. 공개 리포지토리는 여전히 무료이며 (변경 사항 없음) 무제한 공동 작업자가 포함됩니다.
GitHub Enterprise는 Enterprise Cloud (이전의 GitHub Business Cloud) 및 Enterprise Server (이전의 GitHub Enterprise)를 위한 새로운 통합 제품입니다. 클라우드 또는 자체 호스팅 구성에서 GitHub를 사용할 수 있는 유연성을 원하는 조직에서는 이제 한 시트 가격으로 두 가지 모두에 액세스 할 수 있습니다. 또한 GitHub Connect를 통해 이러한 제품을 안전하게 연결할 수 있으므로 하이브리드 옵션을 통해 개발자는 두 환경에서 원활하게 작업할 수 있습니다.
GitHub Pro (구 GitHub 개발자) 및 GitHub 팀은 전문적인 코딩 및 공동 작업 기능이 필요한 개발자 및 팀에서도 사용할 수 있으며, 물론 공개 소스 제공자는 GitHub Team 무료 버전을 포함하여 공개 저장소에서 공동 작업하는 데 필요한 모든 것을 제공한다.
첫 번째 코드를 작성하려는 학생이든, 전 세계 팀을 보유한 엔터프라이즈 리더 또는 오픈 소스 관리자이든 관계없이 GitHub는 코드 작성, 공동 작업 및 글로벌 고객과의 연결을 위한 최고의 장소가 되기를 바란다고 한다.
디자인이라는 단어를 들었을 때 당신은 어떤 생각이 드시나요? 당신이 혁신적인 문화를 만들어 내는데도 디자인을 이용할 수 있음을 알고 있었나요? 최고의 경영자들은 디자인을 힘이 있는 새로운 방법으로, 자신들의 조직 안에 오래된 것들을 바꾸는 데 사용합니다. 당신은 디자인을 어떻게 사용하고 있습니까?
Are you getting the most out of Design?
– Bryan Hoedemaeckers
당신은 디자인을 당신의 제품과 서비스를 좀 더 아름답게 만들기 위해 사용하시나요? 당신은 더 나은 고객 경험을 만드는 데 사용하시나요? 당신의 조직을 위해 사용하시나요?
이제 디자인은 여러 가지 방법으로 비즈니스에 사용되고 우리는 덴마크의 디자인 사다리가 어떻게 비즈니스에서 디자인이 사용되고 어떤 다른 방법으로 사용할 수 있는 가능성이 있는지 이해할 수 있는 최고의 방법이라고 생각합니다.
왜냐하면, 디자인은 비즈니스 세계에 잘 스며들고 있고 우리는 다양한 단계들을 설명할 필요가 있다고 생각한다. 사람들이 받아들이기 시작하고 다양한 방법으로 디자인을 사용하기를 희망합니다.
전 세계의 리더들은 새롭고 파워풀한 방법으로 디자인을 사용하고 있습니다.
디자인을 받아들이는 당신 조직의 자세는 어떠한가요? 덴마크 디자인 사다리는 디자인을 사용하는데 네 가지 단계에 관해 이야기하고 있습니다. 우리는 다른 두 단계를 첨부하였습니다. 6개의 단계는 비즈니스에서 리더들이 어떻게 다른 방식으로 디자인을 사용하고 있는지에 관해 이야기해줍니다.
덴마크 디자인 사다리
첫 번째 단계 : Nothing
당신은 아무 이유 없이 디자인을 사용하고 있다. 당신의 조직은 그 어떤 디자인의 형식적인 틀이 없고 디자인 에이전시를 이용하지 않는다. 노잼.
예를 들어 : 모든 디자인 작업(또는 기타 작업)이 불필요한 것으로 보이는 제품에 대한 수요가 높은 제철소
두 번째 단계: 미학(Aesthetics)
당신은 미학을 위해, 스타일링 혹은 양식을 위해 디자인을 사용한다. 당신의 고객에게 당신의 제품과 서비스를 혹은 물리적인 터치포인트를 통하여 어떻게 작동되는지.
당신은 디자이너를 채용하거나 에이전시에 디자인 작업을 맡긴다. 디자인은 사물을 더 아름답게 만든다. 뭐…. 재밌네
예를 들어 : 신발회사는 디자인을 이용하여 그들의 신발을 고객에게 좀 더 어필한다.
세 번째 단계: 과정(Process)
이것은 제품과 서비스를 만들어 내는데 당신의 과정 안 어는 부분에서 디자인을 사용하는지 알려주고 당신은 디자인 싱킹을 받아들이고 협업하는 과정 혹은 워크숍으로 어떻게 당신의 프로세스가 끝이 나는지 보여준다.
당신은 스타일링을 하거나 예쁘게 보이는 것을 해줄 디자이너보다 이런 것들을 해줄 디자이너를 채용한다. 그들은 그들의 고객에게 당신의 제품과 서비스를 최고의 경험으로 만들어줄 필수적인 사람들이다.
당신의 사람들은 고객 연구, 에스노 그라피, 프로토타입 그리고 창의적인 방법으로 고객의 요구를 해결해줄 것이다.
예를 들어 : 제품을 사용하기 쉽게 하기 위해 디자인을 사용하는 기기 제조업체(미학 포함하여)
네 번째 단계: 전략(Strategy)
당신은 디자인을 사용하고 당신 조직의 전략을 만들어 낸다. 여기의 명언은 덴마크 디자인 사다리 1)에서 인용하였다.
‘디자인 업무는 회사의 오너와 매니저들과 협력하여 사업의 개념을 완전히 혹은 부분적으로 다시 생각한다. 여기서 핵심은 회사의 비즈니스 비전과 비즈니스 분야에서의 욕구 그리고 가치사슬의 미래의 역할과 관련된 디자인 프로세스에 있다.’
당신 조직에는 설립자, 설립 멤버 혹은 경영진에 디자이너가 있다. 디자인은 투자 선택을 받는데 영향력을 미칠 수 있는 자리에 있다.
예를 들어 금융 서비스 기관이 고객 연구를 통해 파악된 고객의 깊은 요구를 해결하는 서비스로 투자를 이전하는 조직.
우리는 덴마크 디자인 사다리를 언급하는 것을 좋아하고 그것은 그들이 어떻게 디자인을 사용하고 어떻게 더 높은 수준으로 가능성 있는 가치에 대해 생각할 수 있게 틀을 짜는 것을 도와준다. 우리는 지금 모든 단계에서 디자인을 사용하고 다른 영역에서 사용하기 위해 두 개의 단계를 더 늘렸다.
다섯 번째 단계 : 체계적인 변화(Systemic Change)
당신은 사회이슈를 해결하는 데 도움을 주고 복잡한 산업의 문제 혹은 복잡한 에코시스템을 간소화하기 위해 디자인을 사용한다. 당신은 디자인을 사용하여 수많은 조직 혹은 기업에 체계적 변화를 주도할 수 있다.
정부 기관들은 지역 또는 지역 생태계 내에서 정책을 수립하기 위해 이것을 하기 시작하고 있다. 그들은 이질적인 그룹들과 그 특정 생태계에 가장 잘 맞는 솔루션을 함께 제공한다. 그들은 그 그룹들과의 협력을 통해 체계적인 변화를 끌어낼 수 있다.
예를 들면 지역협의회는 주변의 커뮤니티그룹과 함께 그들로부터 복잡한 사회 이슈를 해결하기 위해 디자인을 이용한다.
여섯 번째 단계: 문화(Culture)
이것은 우리가 비즈니스에서 디자인을 사용하는 정점이다. 당신은 최고의 문화를 만들고 활용하려고 디자인을 사용한다. 당신은 사람들이 혁신하기 시작하고, 기업가처럼 행동하고, 모호성을 포용하고, 고객의 목소리를 듣고, 디자인을 주도하기 시작하는 디자인 사고방식에 맞추기 위해 조직 내의 사람들의 사고방식을 바꾸고 있다.
예를 들면 : 예: 설계자(또는 설계 처리/배경을 가진 사람)를 적극적으로 역할에 고용하여 현직 인력을 고무하고, 도전하며, 촉매작용을 하고, 개발하고자 하는 조직.
당신은 어떻게 디자인을 판단하고 있나요? 당신은 디자인이 미적 가치를 더하는 것이라고 보시나요? 아니면 당신은 건강하고 창의적인 문화를 만드는 것이 가능하다고 보시나요? 비즈니스 또는 팀의 수준을 높이고 새로운 방법으로 디자인을 받아들이며 더 높은 곳으로 이동하면서 더 큰 가치를 얻을 수 있는 방법에 대해 생각하세요.
더 자세히 보려면 2) Desogn for Business를 참고하고 만약에 어떤 질문이 있다면 아래의 링크를 통해 편하게 연락하세요.
OS X를 부팅하고 Mac의 클립보드(Clipboard)에는 편집 메뉴 또는 바로 가기 키를 사용하여 복사하거나 잘라낸 마지막 항목이 저장된다. 클립보드의 내용을 보는 가장 빠른 방법은 [keybt]⌘ Command[/keybt] + [keybt]v[/keybt]를 눌러 문서에 붙여넣는 것입니다. Mac의 Finder 응용 프로그램을 사용하여 클립 보드의 현재 내용을 볼 수도 있다.
클립보드의 내용 보기
단계 : Dock에서 Finder 아이콘을 클릭하여 Finder 응용프로그램을 시작한다.
단계 : 화면 상단의 기본 메뉴에서 도움말을 클릭하여 도움말 검색 필드를 로드한다.
단계 : 검색 필드에 ‘clipboard’를 입력한 다음 클립보드 표시를 클릭하여 클립보드의 내용을 확인한다.
또 다른 접근법(Another Approach)
Finder를 클릭하면 화면 상단의 메인 메뉴에 편집(Edit) 메뉴를 선택하면 클립보드 보기(Show Clipboard)를 선택하면 된다. 클립보드에 텍스트를 복사하거나 자르기를 하게 되면 실제 텍스트가 표시되거나, 이미지와 같은 다른 유형의 파일 용량이 많은 경우에는 파일 이름만 표시된다. 모든 경우 클립보드의 내용에 대한 간략한 설명이 화면 하단에도 제공된다.
Finder에 Edit 메뉴 아래 Show Clipboard 항목을 선택한다.
복사(Copy), 붙여넣기(Paste) 및 지우기(Clear) 키보드 단축키 사용
Mac에서 항목을 복사, 붙여넣기 및 자르기를 하기 위한 키보드 단축키는 Windows 와는 약간 다르다. 복사하려면 [keybt]⌘ Command[/keybt] + [keybt]c[/keybt], 붙여넣기는 [keybt]⌘ Command[/keybt] + [keybt]v[/keybt]를 잘라내려면 [keybt]⌘ Command[/keybt] + [keybt]x[/keybt]를 누른다.
클립보드를 지우는 것은 쉽다. 현재 복사된 항목을 다른 사본으로 덮어쓰거나 붙여넣기를 사용하는 경우 몇 번의 클릭만으로 클립보드 기록을 삭제한다. 그러나 나중에 필요할 때를 대비하여 일부 항목이나 전체 클립 보드 기록을 iCloud에 저장하는 것이 좋다. 붙여넣기 또는 Unclutter를 사용하면 클립 보드 기록을 가능한 간단하게 관리할 수 있다.
대부분의 Mac 사용자는 한 번에 하나의 클립 보드 항목으로 자신을 제한하고 실수로 덮어쓸 때마다 좌절감을 느낄 수 있지만 붙여넣기, Unclutter 및 Rocket Typist와 같은 응용프로그램을 사용하여 Mac의 기본 기능을 확장할 수 있다.
보조 클립보드 사용
기존에 클립보드에 저장되어 있던 텍스트를 지우지 않고도 새로 텍스트를 갈무리해 놓을 수 있고, 또 필요한 경우 두 개의 텍스트를 번갈아 붙여넣는 것도 가능할 것이다. 근데 실제로 OS X에는 기본 클립보드 말고도 텍스트를 저장할 수 있는 클립보드가 하나 더 준비되어 있다.
기본 클립보드와 보조 클립보드의 단축키 비교
이 두 번째 클립보드에 텍스트를 잘라넣는 단축키는 [keybt]Control[/keybt] + [keybt]k[/keybt]이고 다시 붙여넣는 단축키는 [keybt]Control[/keybt] + [keybt]y[/keybt]이다.
위 이미지와 같이 [keybt]⌘ Command[/keybt] + [keybt]x[/keybt] 단축키로 주 클립보드에 어떤 텍스트를 저장해 놓은 상태에서도 [keybt]Control[/keybt] + [keybt]k[/keybt] 단축키로 또 다른 텍스트를 주 클립보드가 아닌 보조 클립보드에 저장할 수 있다. 이후 주 클립보드에 저장된 텍스트를 OS X 응용프로그램에 다시 붙여 넣으려면 [keybt]⌘ Command[/keybt] + [keybt]v[/keybt] 단축키를 입력해주면 되고 보조 클립보드에 저장된 텍스트를 응용프로그램에 붙여 넣으려면 [keybt]Control[/keybt] + [keybt]y[/keybt] 단축키를 입력해주면 된다.
하지만 보조 클립보드를 사용하는데 몇 가지 제한 사항이 있는데, 영미권에서는 OS X의 보조 클립보드 기능이 비교적 잘 알려진 반면 국내나 비-영여권에서는 잘 알려지지 않거나 알고 있는 사용자로부터 외면받는 이유는 보조 클립보드 단축키가 오로지 영문 입력기 상태에서만 작동하기 때문이다. 즉, 한글 입력기가 활성화되어 있는 상태에서 보조 클립보드를 사용하려면 [keybt]⌘ Command[/keybt] + [keybt]Space[/keybt] 단축키로 일단 영문 입력기로 전환해야 하므로 보조 클립보드 사용이 번거로워진다는 단점이 있다.
보조 클립보드의 또 다른 제한 사항은 [keybt]Control[/keybt] + [keybt]k[/keybt]로 텍스트를 ‘잘라내기’는 할 수는 있지만, 텍스트를 ‘복사’하는 단축키는 준비되어 있지 않다는 것이다. 즉 무조건 원본에서 텍스트를 일단 잘라내야 한다. 이에 대한 해결책은 [keybt]Control[/keybt] + [keybt]k[/keybt] 단축키로 일단 텍스트를 잘라낸 후 커서를 이동하지 않은 상태에서 바로 [keybt]Control[/keybt] + [keybt]y[/keybt]로 텍스트를 제자리에 돌려 넣고 이후 필요한 위치에 커서를 이동해 [keybt]Control[/keybt] + [keybt]y[/keybt]단축키로 텍스트를 ‘붙여넣기’하는 방법을 사용하면 된다.
마지막으로 기본 클립보드에는 텍스트뿐만 아니라 이미지도 보관할 수 있는데 반해, 보조 클립보드는 오로지 텍스트만 저장할 수 있다. 자주 반복해서 입력해야 하는 단어는 보조 클립보드에 저장해놨다가 수시로 붙여 넣을 수 있다면 최고의 기능이지 않을까 생각한다.
OS X와 iOS의 클립보드
MacOS Sierra 및 iOS 10의 Universal Clipboard 덕분에 복사한 장치와 다른 장치에서 클립보드 기록에 액세스 할 수도 있다. 사용하려면 장치가 적어도 iOS 10 및 macOS Sierra를 실행하고 Bluetooth 및 WiFi가 모두 켜져 있고 서로 가까이 있어야 한다. Universal Clipboard는 iCloud를 사용하여 데이터를 동기화하므로 iCloud에 로그인해야 하며, 그런 다음 각 장치에 일반 복사 및 붙여넣기 방법을 사용하여 하나의 장치에 복사하여 다른 장치에 붙여넣기만 하면 된다.
개발자나 디자이너에게 ‘색상’을 고르는 과정은 흔히 있는 일인 동시에 매우 중요한 일이다. 특히 모니터에서 ‘색상값(Color Code)’을 추출해야 할 때가 많이 생기는데 이럴 때를 대비해 OSX 안에는 ‘디지털 컬러 측정기(Digital Color Meter)’라는 유틸리티가 내장돼 있다. 생각보다 잘 알려지지 않은 이유는 사용 방법이 다소 모호하기 때문인 듯한데, 이번 기회에 디지털 컬러 측정기의 기본적인 사용 방법을 살펴보도록 하자.
Digital Color Meter 사용 방법
디지털 컬러 측정기는 응용 프로그램 > 유틸리티 폴더에 위치해 있다. 스팟라이트나 알프레드를 쓰는 경우 ‘Color’라는 키워드로 손쉽게 불러낼 수 있다.
아래는 디지털 컬러 측정기를 실행한 모습이다. 왼쪽에 마우스 포인터 주변을 확대한 섬네일 이미지가 보이고, 오른쪽에는 마우스 포인터가 올려져 있는 픽셀의 색 값이 다양한 방식으로 표시된다.
마우스 포인터가 놓은 위치의 픽셀 하나가 아닌 주변 픽셀의 평균값을 구하고 싶을 때는 조리개 슬라이드 바를 통해 조리개 크기를 조정할 수 있다. 정확도보다는 좀 더 조화로운 색상을 찾을 때 유용한 기능이다.
디자이너는 주로 RGB 모델을 바탕으로 한 색상값을 사용할 때가 많다. 우측 상단에 달린 풀다운 메뉴를 통해 총 5가지 색상 표준을 선택할 수 있는데 아래의 그림에서는 RGB 모델을 선택한다.
이제 화면(또는 이미지)에서 색상값을 추출해 본다. 색상값을 추출할 픽셀 위에 마우스 포인터를 올린 후 [keybt]⌘ Command[/keybt] + [keybt]L[/keybt] 키를 눌러주며, 나중에 마우스 포인터를 움직이더라도 색상값을 유지하기 위해서 사용된다.
참고로 웹 작업에 주로 이용하는 색상값을 얻으려면 디지털 컬러 측정기 보기 > 값 표시에서 16진수를 선택해야 한다. 예컨대 기본 상태에서 ‘흰색’의 색상값을 측정하면 ‘255, 255, 255’라는 값을 얻게 되고, 16진수에선 #FFFFFF라는 값을 얻게 된다.
이제 [keybt]⌘ Command[/keybt] + [keybt]⇧ Shift[/keybt] + [keybt]C[/keybt] 키를 누르면 색상값이 클립보드에 텍스트로 저장되며 다른 응용 프로그램에 붙여넣을 수 있게 된다.
예컨대 클립보드에 저장한 색상값을 포토샵 컬러 픽커에 붙여 넣으면, 현재 작업 중인 이미지에 해당 색상을 사용할 수 있게 된다. 또 같은 방법으로 HTML이나 CSS 코드에 붙여넣을 수도 있다.
이처럼 OSX 안에는 의외로 유용한 기능을 품은 유틸리티가 곳곳에 숨어 있다. 보다 전문적인 도구가 필요하다면 맥 앱스토어와 인터넷을 뒤져봐야 하겠지만, 간단한 도구로도 괜찮다면 OSX에 내장된 프로그램을 먼저 이용해 보는 건 어떨까?
그라바타(Gravatar – Globally Recognized Avatar)는 이메일 주소를 기반으로 사용자의 프로필과 아바타를 등록해두고 필요에 따라 불러들여 매번 각각의 애플리케이션마다 이를 작성해야 하는 노고를 줄여주는 애플리케이션이다. 매일 80억 건 이상의 아바타 이미지가 그라바타에 의해 서비스되고 있으며, WordPress, github, DISQUS, stackoverflow 등과 같은 유명 애플리케이션 및 사이트에서 사용되고 있으며, 이를 무료로 제공하고 있다.
Gravatar.com
모든 웹 사이트가 Gravatar ( Facebook , Twitter 및 Linkedin은 아직은 아니지만)를 지원하지는 않지만, 수백만 개의 사이트가 있다. GitHub , StackOverflow , Disqus , WordPress , Hoodline , HootSuite , American Idol 모두 gravatar를 지원한다. Automattic에 따르면, gravatar 이미지는 전 세계 웹 사이트에서 하루에 86억 번 제공된다고 한다. KNULAB 사이트도 Gravatar를 지원하므로 Gravatar에 등록하게 되면 회원 가입 시 자동으로 아바타 이미지와 프로필 확인이 가능하다.
사용할 전자 메일 주소를 입력하고 제안된 사용자 이름을 수락하거나 직접 암호를 만들거나 암호를 만든다. 이미 워드프레스 계정이 있는 경우 클릭(내가 이미 WordPress.com 계정이).
받은 편지함에서 확인 이메일을 찾아 확인하고 Gravatar에 로그인한다. 받은 편지함에 다음과 같은 이메일이 전송된다.
로그인 페이지에 액세스 하려면 “계정 활성화”를 클릭한다.
로그인하면 업로드된 이미지가 없다는 메시지가 나타나며, “여기를 클릭하여 추가하십시오!” 링크를 클릭하고 화면의 지시를 따른다.
이미지를 올리고 자르기를 한다. 그런 다음 (영화처럼) G, PG, R 또는 X 등급을 지정한다.
모든 것이 완료~!
Caution: 이미지 등급 참조 G : 모든 웹사이트에 표시하기에 적합한 등급 PG : 무례한 제스처, 도발적으로 옷을 입거나 가벼운 폭력성을 뛴 등급 R : 거친 욕설, 격렬한 폭력, 과도한 노출, 또는 나쁜 약물 사용과 같은 것을 포함할 수 있는 등급 X : 하드 코어 섹스 이미지 또는 매우 불안한(?) 폭력을 포함할 수 있는 등급
조언
특히나 디자이너는 소셜 활동이나 블로그 운영이 필요하므로 브랜딩 목표를 가장 잘 뒷받침하는 이미지를 사용하는 것이 효과적이다. 방문자에게 전달하려는 첫인상이 무엇이든, 이미지에 모든 면이 의도를 반영하는지 확인해야 하며, 우수한 사례 뒤에는 과학이 있다는 사실을 잊어서는 안 된다.
Sublime Text는 맥, 윈도우즈 및 리눅스에서 사용할 수 있는 코드, 마크업 및 정교한 텍스트 편집기이다. 속도와 조화로움에 최적화 된 맞춤 UI 툴킷을 사용하면서 각 플랫폼에서 기본 기능을 활용할 수 있다.
GPU 렌더링
Sublime Text는 이제 인터페이스를 렌더링할 때 Linux, Mac 및 Windows에서 GPU를 활용할 수 있습니다. 그 결과 이전보다 더 적은 전력을 사용하면서 최대 8K 해상도까지 유동적인 UI를 만들 수 있습니다.
애플 실리콘과 리눅스 ARM64
Mac용 Sublime Text에는 이제 Apple Silicon 프로세서에 대한 기본 지원이 포함됩니다. Linux ARM64 빌드는 Raspberry Pi와 같은 장치에서도 사용할 수 있습니다.
탭 다중 선택
파일 탭은 인터페이스와 내장 명령 전반에 걸친 지원으로 분할 보기를 쉽게 만들 수 있도록 향상되었습니다. 사이드 바, 탭 바, Goto Anything, Goto Definition, 자동 완성 등이 그 어느 때보다 쉽고 직관적인 코드 탐색을 위해 조정되었습니다.
컨텍스트 인식 자동 완성
자동 완성 엔진은 프로젝트의 기존 코드를 기반으로 스마트 완성 기능을 제공하도록 다시 작성되었습니다. 제안은 또한 종류에 대한 정보로 보강되고 정의에 대한 링크를 제공합니다.
새로워진 UI
기본 및 적응형 테마는 새 탭 스타일과 비활성 창 흐림 처리로 새로 고쳐졌습니다. 테마 및 색 구성표는 자동 다크 모드 전환을 지원합니다. Windows 및 Linux의 적응형 테마에는 이제 사용자 지정 제목 표시줄이 있습니다.
TYPESCRIPT, JSX 및 TSX 지원
가장 인기 있는 새 프로그래밍 언어 중 하나에 대한 지원이 이제 기본적으로 제공됩니다. 최신 JavaScript 에코시스템 내에서 Sublime Text의 모든 스마트 구문 기반 기능을 활용하십시오.
강력한 구문 정의
구문 강조 엔진은 비결정적 문법, 여러 줄 구성, 지연 포함 및 구문 상속 처리와 같은 새로운 기능으로 크게 개선되었습니다. 메모리 사용량이 줄어들고 로드 시간이 그 어느 때보다 빨라졌습니다.
업데이트된 PYTHON API
Sublime Text API는 Python 3.8로 업데이트되었으며 Sublime Text 3용으로 빌드된 패키지와의 하위 호환성을 유지합니다. API가 크게 확장되어 LSP와 같은 플러그인이 그 어느 때보다 잘 작동할 수 있는 기능이 추가되었습니다. 여기 에서 개정된 설명서를 읽으십시오 .
그래픽 디자이너들은 타이포(typo)라는 단어를 많이 사용한다. ‘타이포’? 도대체 뭐지? 무엇을 이야기하기 위해 ‘타이포’라는 단어를 사용하지? 타입디자인… 타이포그래피… 타입페이스… 타이포그래픽… 타이포그래퍼? 도통 알 수가 없다. 디자인을 전공하는 학생들 사이에서 ‘타이포’라는 단어를 큰 문제없이 사용하곤 한다. 학생들이 ‘타이포’라는 단어를 서슴없이 아무때나 사용하는데는 학교 디자인 교육에 큰 책임이 있다. 편집, 패키지, CI, 그래픽 디자인 등 타이포그래피를 응용한 과목을 강의하는 선생님들 중 일부는 서슴없이 ‘타이포’라는 단어를 사용하기 때문이다. 심지어 몇몇 타이포그래피를 가르치는 선생님들도 ‘타이포’ 라는 단어를 큰 구분 없이 사용하는 경우를 볼때가 있다. 일부 그래픽 디자이너와 학생들은 타이포(typo)라는 단어를 보통 ‘타이포그래피(typography)’의 줄임말로 사용하는 듯하다. 하지만 ‘타이포(typo)’라는 표현이 정말 맞는 것일까?
잘못된 단어의 사용은 타이포그래피를 좀 더 전문적으로 공부하려는 학생들이나 디자이너들에게 많은 의문을 갖게 한다. 하나의 학문을 깊게 공부할수록 단어에 대한 의미나 표현은 굉장히 중요해지기 때문이다. 특히 시각디자인을 전공하는 사람들에게 ‘타이포그래피’는 절대 간과할 수 없는 부분이기 때문에 이 부분을 심각하게 생각해 볼 필요가 있다. 이 글에서는 Type 과 Typo의 단어적 의미와 타이포그래피와 관련된 용어들의 의미에 대해서 이야기해 보고자 한다.
일반적으로 디자인 현업에 종사하는 디자이너들 중 ‘타이포그래피’나 ‘타입페이스’ 혹은 ‘타입 디자인’을 뭉뚱그려 ‘타이포(Typo)’라고 말하는 경우가 있다. 예를 들어 학교 과제에서 ‘타입페이스’가 어울리지 않거나, 디자인 작업에서 타이포그래피에 문제가 있을때 “타이포가 잘못되었다”라고 이야기 한다. 이미 이런 상황에서 ‘타이포’라는 표현은 일반화되어 많은 디자이너 사이에서 아무 문제나 의심 없이 사용되고 있다. 하지만, 우리는 타이포라는 단어의 본래 의미에 맞게 사용하고 있었던 것일까? 우선 사전적 의미를 알아보자.
위의 사전적 의미에서도 알 수 있듯 타이포(typo)는 인쇄공(타이포그래퍼)와 오식(오탈자)을 이야기한다. 전자 인쇄공을 현대적 의미와 시각디자인 전문분야의 의미로 해석하면, 디자인된 글꼴을 다루고 활용하는 사람 즉, ‘타이포그래퍼’로 이해할 수 있다. 하지만 후자인 오탈자의 의미로 사용되는 경우도 있기 때문에 ‘타이포’ 표현은 앞뒤 상황을 고려하지 않는다면 표현상의 큰 오류이다. 그렇다면, 이어서 Type에 대한 사전적 의미도 알아보자.
type 5. [집합적] 【인쇄】 활자;자체;인자체(印字體)
(출처) 네이버 사전
타입(type)은 디자인 전문분야에서 글 자체를 의미한다. 여기서 중요한 것은 타입은 글 자체만 의미할 뿐 글꼴을 이야기하지 않는다. 다시 말해 한글의 명조나 고딕의 형태보다는 이 모두를 포함한 글 자체만을 의미한다. 그렇다면, 이어서 타입페이스(Typeface)의 의미도 알아보자.
type・face 1 활자면 2 (활자) 서체(書體)
여기서 타입페이스는 ‘type+face’의 합성어로 타입의 얼굴 즉, 타입의 형태를 이야기한다. 타입페이스는 우리말로 글꼴이라고 하는데, 마찬가지로 ‘글+꼴’의 합성어로 순 우리말이다. 위의 사전적 의미에서도 알 수 있듯이 우리가 과제를 하다가 타입페이스의 선택이 잘못되었거나 이상할 때 ‘타이포’가 잘못되었다고 하는 것은 단어적 의미에서 큰 오류를 범하고 있다는 것을 알 수 있다. 이때 우리는 타이포가 잘못되었다고 말하기보다는 “타입이 잘못되었다.” 혹은 “타입페이스의 선택이 잘못되었다.” 라고 말해야 옳다. 타이포그래피의 어원은 많은 사람이 알고 있듯이 그리스어인 Typos(글자)라는 단어에서 유래했다. 하지만, 본래 유래한 단어의 의미와 다르게 타이포그래피의 의미는 활자를 다루는 행위를 이야기한다. 좀 더 정확하게 이야기하자면 “디자인된 활자를 상황에 맞게 선택하고 배열(혹은 조판)하는 행위”라고 할 수 있겠다. 여기에서 요점은 바로 “디자인 된…”에 있다. 즉, 타입을 직접 디자인하는 것이 아니라 디자인되어 있는 활자를 선택하고 배열하는 것을 의미한다. 에밀루더의 표현을 빌리자면 “타이포그래퍼는 타입 디자이너와 다르게 타입페이스를 객관적인 시선에서 선택하고 배열 한다”고 할 수있다.
타이포그래피는 과거와 다르게 일반적인 기술직이 아닌 창의적인 전문분야를 이야기한다. 단지 타입을 배열하는 행위만으로 타이포그래피라고 하지 않는다. 더욱 전문적이고, 창의적인 감각으로 이루어지는 타입페이스의 선택과 배열을 타이포그래피라고 이야기 한다. 타이포그래피는 “타이포+그래피”의 합성어로 이루어졌는데, 풀어서 이야기하면 ‘타이포’는 위에서 이야기했듯—오탈자의 의미와—타이포그래퍼의 줄임말로 즉, 타입을 배열하는 사람이고, ‘그래피’는 그것을 여러 가지 기법 및 양식으로 표현하는 것을 말한다. 이를 통해 현대적인 의미의 “타이포그래피”란 ‘타입을 다루는 사람들(타이포그래퍼)의 전문적인 양식 또는 기법’을 이야기 한다. ‘타이포그래피 분야’와 관련된 기초적인 용어들을 정리해 보면 아래와 같다.
type = 글 자체
typeface = 글꼴의 형태 및 양식
typo = 타이포그래퍼의 줄임말 혹은 오탈자
type design = 글꼴을 디자인 하는 행위
typographer = 디자인 된 글꼴을 선택하고 배열하는 사람
typography[일반적인] = 디자인 된 글꼴을 선택하고 배열하는 행위
typography[전문분야] = 타입을 다루는 사람들의 전문적인 양식 및 기법
‘타이포’라는 잘못된 표현에 대한 문제제기에서 출발하여, 타이포그래피 분야의 용어에 대해 간단히 정리해 보았다. 단어의 정확한 의미는 특정 전문분야에서 대단히 중요한 부분이지만 한편으로는 항상 간과되는 부분들이기도 하다. 그래서 언제나 자신의 전공분야에 대한 단어들은 그 의미에 맞게 사용되었는지 항상 조심하고 신경써야 한다.
