본문 바로가기

Technology

 (267)
우리 홈페이지, 어떻게 만들어 활용할까? 2편 인류의 역사에서 콘텐츠는 어디에선가, 누군가로부터 늘 제작되어 왔고 이는 구전을 통해, 종이와 활자를 통해, 그리고 매체를 통해 전달되어져 왔습니다. 인터넷 역시 디지털화되거나, 디지털을 기반으로 생산된 정보가 오가는 매개로써 급속한 기술의 발전에 힘입어 손쉽게 정보를 습득할 수 있는 주요한 통로로 자리매김 하였고, 이러한 특징들로 인해 현재 기관이나 단체 그리고 개인에 이르기까지 누구나 인터넷을 이용해 자신이 생산한 콘텐츠를 전달하거나, 타인의 콘텐츠를 조회할 수 있게 되었습니다. 지난 글 '우리 홈페이지 어떻게 만들어 활용할까 1편'에 말씀드린 바와 같이 여기에서 말하는 웹사이트는 그 자체로서 의미 있는 콘텐츠를 담고 있는 웹페이지들이 일련의 장소에 일목요연하게 모여 제공되는 곳입니다. 이번 포스팅에..
보기 좋고, 읽기 좋은 이메일을 만드는 4가지 방법 지난 글 ”비영리단체를 위한 10가지 뉴스레터 팁”에서 비영리 단체에서 어떻게 하면 더 좋은 뉴스레터를 만들어 보낼 수 있는지 살펴보았습니다. 뉴스레터는 연락의 수단으로, 정보의 알림, 자원활동과 후원의 독려 방법으로 매우 중요한 마케팅 수단입니다. 누군가는 뉴스레터의 디자인이나 구성보다는 내용이 중요하다고 생각할지도 모릅니다. 하지만 이메일의 구성과 형식은 뉴스레터의 성공에 매우 큰 영향을 끼치고 있습니다. 한정된 인력과 자원으로 운영되는 비영리단체의 뉴스레터에서 디자인과 형식은 더욱 중요할 수밖에 없습니다. 지난 글에 이어 이번 글에서는 이메일에서 사용하는 글꼴, 제목, 이미지, 푸터 등 상세한 제작 방법을 알아보도록 하겠습니다. 이 글은 Wired Impact의 How to Format Your N..
웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 세로형 내비게이션이란? 웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다. 세로형 내비게이션 메뉴 활용법 1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며..
스크롤 UI를 대체하는 방법이 있을까요? 요즘 웹에서는 화면을 꽉 채우는 사진을 배경과 함께 타이포그래피를 적절하게 배치하는 디자인이 유행하고 있습니다. 유명 웹 에이전시 사이트를 봐도 이런 디자인을 많이 찾아볼 수 있는데요. 이런 큼직한 디자인에서는 스크롤을 유도하는 UI가 자주 보입니다. 한편 브이텍스 랩(VTEX Lab)의 UI 디자이너 로드리고 뮤니즈(Rodrigo Muniz) 씨는 이런 스크롤 ui의 필요성에 대해 의문을 가지고 글을 썼습니다. “당신이 그것을 설명해야 한다면, 그것은 작동하지 않는 것입니다.(If you have to explain it, it’ ain’t working)”라고 그래픽 디자인의 거장 밀튼 글레이저가 말한 적이 있습니다. 만약 스크롤을 유도하는 UI를 넣는다면 사용자의 인지하는 과정을 무시하는 것일지도 ..
가상현실 디자인을 위한 지침 5가지 가상현실(VR)은 존재하지는 않지만, 실제와 유사하게 만들어진 특정 환경 속에서, 사용자가 실제와 같은 외부의 자극과 반응을 통해 진짜와도 같은 경험을 할 수 있는 공간, 기술을 의미합니다. 가상현실의 몰입감을 위해 기술의 발전도 중요하지만, 가상현실의 경험에 대한 생각도 함께 발전하고 있을까요?개인적으로 웹이나 모바일과는 또 다른 가상현실의 사용자 경험에 관심이 있는데요. 몰입형 가상현실 디자인에 대한 이해를 도와주는 미디엄 백채널(Backchannel) 블로그 글을 소개합니다. 1995년 미국, 3D게임기인 닌텐도의 ‘버추얼 보이’가 공개되었습니다. 불행히도, 게임 후 지속되는 붉은 잔상과 눈을 못 뜰 정도로 아픈 두통 때문에 1년만인 1996년 발매가 중단됩니다. 버추얼 보이는 두 개의 선형 배열 ..
UI, UX기획을 손쉽게, 와이어프레임(Wireframe) 혹시 프리랜서로 일하세요? 혼자 다 하는 업무에 지쳤다면, 스트레스 줄이는 프리랜서 풀 샐러드볼로 오세요! UI/UX 기획을 할 때 사용하는 와이어프레임(Wireframe)에 대해 들어보셨나요? 웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다. 와이어 ..
비영리단체를 위한 10가지 뉴스레터 팁 비영리단체에게 이메일 뉴스레터는 중요한 홍보 채널입니다. 특히 상대적으로 홍보 예산이 적은 영세한 비영리단체에게 적은 비용으로 큰 효과를 낼 수 있는 이메일 뉴스레터는 더욱 중요합니다. Nonprofit Tech for Good이 공개한 10 e-Newsletter Best Practices for Nonprofits을 보면, 소셜미디어의 성장에도 이메일은 여전히 효과가 큰 홍보 수단이라고 이야기하고 있습니다. 또한, Email remains the best digital channel for ROI에 따르면 이메일은 적은 비용으로 큰 효과를 낼 수 있는 수단임을 알 수 있습니다. 이메일 자체의 효과는 뛰어나지만 이러한 효과를 극대화하기 위해서는 좋은 뉴스레터를 만드는 것이 중요합니다. 1. 모바일에서 ..
gif로 이해하는 css 포지션의 개념 저는 요즘 사내에서 ‘야매코딩’이라는 스터디를 진행하고 있는데요. css에서 ‘포지션(position)’을 제대로 설명 못 해서 애먹었던 적이 있습니다. 적당히 이해하고 넘어가기에는 아주 중요한 요소인데요. 프룬트 블로그(FROONT BLOG)에서는 포지션의 개념을 gif로 쉽게 설명했습니다. 포지션의 개념이 어려운 분들을 위해 공유합니다. 웹 디자인의 포지션 웹디자인에서 ‘포지션(position)’은 매우 중요합니다. 당연한 얘기지만 포토샵이나 일러스트레이터에서의 캔버스와는 다릅니다. 왜냐면 스크롤이나 스크린 크기 등 여러 가지 요인이 작용하기 때문이죠. 포지션은 크게 ‘스태틱(static)’. ‘앱솔루트(absolute)’, ‘렐러티브(relative)’, ‘픽스드(fixed)’로 나뉩니다. 실제 영..

티스토리툴바