본문 바로가기

Technology

 (267)
사람 친화적 기술을 위한 시상식, 휴먼테크놀로지어워드 수많은 기술과 서비스 중에 사람을 배려한 사람 친화적인 부분에 가장 큰 가치를 두어 상을 주는 시상식이 있습니다. 올해 처음 만들어진 한겨레 사람과디지털연구소의 휴먼테놀로지어워드(Human Technology Awards / HTA)를 소개합니다. 시상식의 전체 아이덴티티와 홍보물 디자인은 슬로워크가 함께했습니다. 휴먼테크놀로지어워드는? 휴먼테크놀로지어워드는 한겨레신문사 사람과디지털연구소가 디지털 환경에서 사용자 주권과 기술의 가치를 드높이기 위해 제정한 상입니다. (한겨레 사람과디지털연구소 관련 포스팅 바로가기) 사람친화적 디지털 기술을 평가해 탁월한 성취를 격려하고 진작시키고자 만들어졌습니다. 이 상은 국내에서 서비스되고 있는 디지털 기기와 인터넷 기반 서비스를 대상으로 사회적 영향력과 제공 가치가 ..
코딩 폰트로 즐겁게 코딩하기 들어가며 “코딩하는 디자이너”, “코딩 교육 열풍” 등 코딩에 대한 열기가 뜨겁습니다. 디자이너부터 어린이까지 코딩에 대한 관심이 커지고 있고, 전문 프로그래머뿐 아니라 누구나 코딩을 할 수 있다는 “생활코딩”까지. 코딩이 대중화되고 있는 시대입니다. 텍스트 에디터에 사용되는 코딩 전용 폰트에 대해 알아보려고 합니다. * 이 글은 "코딩 폰트 디자인기, Monoid"와 함께 읽으면 더욱 좋습니다. 코딩 폰트는 왜 필요할까요? 코딩을 할 때는 우리가 자주 사용하는 MS워드나 한글과는 조금 다른 폰트가 사용됩니다. 우리가 작성하는 모든 것들을 문서라고 한다면, 워드프로세서로 작성하여 출력된 문서, 블로그 포스팅, SNS의 짧은 글과 같은 문서들은 사람이 사람에게 전하는 말입니다. 하지만 코딩은 사람이 컴퓨터..
우리 홈페이지, 어떻게 만들어 활용할까? 3편 웹사이트를 제작하고 운영하면서 콘텐츠에 대한 중요성을 다시 한 번 강조하여도 부족함이 없습니다만, 좋은 콘텐츠를 보유하였더라도 이를 출판(발행)할 매체가 없다면 필요한 사람들에게 그 정보를 전달하기가 어렵습니다. 네트워크와 인터넷 기술의 발전으로 고전적인 HTML 문서를 게시하는 것부터 간편하게 스마트폰에서 업로드 할 수 있는 수많은 방법이 생겨났습니다. 하지만 기관을 대표하는 공신력 있는 웹사이트를 제작하는 것은 단순한 SNS 페이지를 보유하는 것 이상으로 고려해야 할 사항이 많습니다. 이번 포스팅에서는 Mr.slo의 예시로 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항에 대해 설명하도록 하겠습니다. 가상사례A 기관의 담당자인 Mr.slo는 최근 신설된 A 기관의 온라인 마케팅 ..
디자이너 부럽지 않은 아이콘 활용하기 ‘아이콘’이라는 말은 그림을 의미하는 그리스어 ‘eikoon’에서 유래되었습니다. ‘아이콘’은 각종 프로그램, 명령어, 또는 데이터 파일들을 쉽게 알아볼 수 있게 조그만 그림 또는 기호로 표기해 주는 것을 의미합니다. 이는 사용자가 처음 접하는 시스템도 어려움 없이 사용할 수 있게 합니다. 웹 디자인, 편집 디자인 등 각종 프로젝트에서는 다양한 아이콘을 필요로 하는 경우가 있습니다. 하지만 프로젝트 마다 모든 아이콘을 새로 작업하는 것은 쉬운 일이 아닙니다. 또 비디자이너들도 각종 문서 작업이나 블로그 운영을 하다 보면 아이콘이 필요할 때가 있습니다. 이때 필요한 아이콘을 구글로 검색할 수도 있지만, 무료가 아니어서 불편할 경우가 많습니다. 이렇게 다양한 아이콘을 필요로 하는 디자이너, 그리고 비디자이너..
[웹 활용팁] 버튼색상에도 정답이 있다. 웹 페이지에서 "회원에게만 공개되는 내용입니다. 로그인 해주세요." 라는 창이 뜬 경험은 한번 쯤 있을 텐데요. 그럴 때 뜨는 창을 "모달윈도우(Modal Window)"라 부릅니다. 즉, 모달 창은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용됩니다. 이 기능 사용자가 진행하던 작업의 흐름을 흐트러트리기에 버튼 기능은 더욱 중요합니다. 버튼은 3가지 성격으로 나뉩니다. 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 (전송하기, 더보기) 2. Neutral: 화면의 변화가 없는 버튼, 화면으로 되돌아가는 버튼 (예를 들면 "취소하기"버튼을 말합니다.)3. Negative: 삭제, 리셋, 추가정보를 차단하는 버튼그럼 3가지의 버튼마다 컬러는 어떻게 ..
홀로그램으로 기억하는 홀로코스트 생존자 홀로코스트(Holocaust)는 일반적으로는 인간이나 동물을 대량으로 학살하는 행위를 가리키지만, 고유명사로는 제2차 세계대전 중 나치가 자행한 유대인 대학살을 의미합니다. 70년이 지난 지금 홀로코스트 생존자는 매년 조금씩 줄어들고 있는데요, 이러한 생존자들을 오래도록 기억하기 위한 프로젝트가 있어 소개합니다. 홀로그램으로 기억하는 홀로코스트 생존자 'NDT(New Dimensions in Testimony)' 입니다. USC 쇼아 재단과 USC 연구소의 협력 프로젝트인 NDT는 증언을 새로운 방식으로 기록합니다. 홀로코스트 생존자들의 증언을 녹화하여 홀로그램으로 보존하는 방식입니다. 이를 위해 생존자의 증언은 7개의 조명이 있는 녹색배경 앞에서 50대의 카메라로 녹화되었습니다. 녹화된 홀로그램이 준비..
추천! 웹디자인 스타일 가이드 7가지 스타일 가이드의 개념은 ‘패턴 라이브러리’, ‘UI 툴킷’, ‘UI 가이드라인’ 등등 소통하는 방식은 각양각색입니다. 어떤 단어로 소통하는 것은 중요하지 않습니다. 하지만 그 의미는 우리가 통일할 필요가 있는데요. 스타일 가이드는 웹사이트를 만드는 이들을 위한 설명서와 재료라고 할 수 있습니다. 이들은 개발자가 될 수 있으며, 디자이너, 콘텐츠 제작자, 혹은 협력업체의 사람일 수도 있습니다. 스타일 가이드의 의미를 알아봤는데요. 이제는 비교적 잘 만들어진 7가지 스타일 가이드를 소개합니다. 에어비엔비(AIRBNB) 에어비엔비의 UI 툴킷은 폼의 입력필드, 메뉴, 광고와 툴바 등의 가이드를 가지고 있습니다. 특히 흥미로운 것은 그들만의 컬러 테마를 만들어서 보여줬다는 점이죠. 웹디자인은 뎁스와 대비 등 다..
한글이 깨져요 웹서핑을 하다 보면 가끔 읽을 수 없이 깨진 글자들을 만나게 됩니다. 꼭 보고 싶었던 글이 깨져서 볼 수 없었던 기억이 있으신가요? 분명히 제대로 입력한 것 같은데 결과 화면에서는 외계 문자로 보였던 적이 있으신가요? 오늘은 웹페이지에서 문자들 중 특히 우리말 한글이 깨져 나오는 현상과 간단한 해결 방법에 대해 알아보려고 합니다. 1. 꿹쁅쒥뛟, 외계 문자를 만났어요. “인코딩”. 한 번쯤 들어보셨을 겁니다. 웹페이지에서 한글이 깨지는 이유 중 대부분이 바로 이 인코딩 문제 때문입니다. 인코딩은 문자 그대로 “코드를 해석하다”라는 의미를 가지고 있는데요. 도대체 무슨 코드를 해석한다는 걸까요? 우리가 보는 웹페이지는 사실 처음부터 영어나 한글로 저장되는 것이 아닙니다. 어떤 문자가 입력되면 이를 0과 1..

티스토리툴바