이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다).




들어가며

타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다.


예시로 보여드릴게요

타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능한 부분을 이야기해보겠습니다.


그래도 이론적인 부분이 궁금하다면 이걸 보세요.


사용자에 대한 고려

디자인에서 미학적 측면 외에도 사용자가 존재한다는 것을 기억해야 합니다. 고해상도의 주력 상품을 위해서만 디자인하는 것은 아니니까요...



폰트는 더 유연하게 다양한 두께, 더 많은 특수기호를 제공해야 하며, 레티나에서도 잘 적용되어야 합니다. 나의 무심함으로 인해 사용자가 어려움을 겪지 않도록 특히 신경써야 하는 부분입니다. 좋은 타이포그래피는 독자에게 “명쾌함"으로 인식되겠지만, 그 반대의 경우 화면 속 난장판의 주역이 될 것입니다.

가독성이 좋은 활자의 특징을 이해하면, UI를 위한 폰트를 고를 때 무엇을 살펴야 하는지에 관한 총체적인 관점을 얻을 수 있습니다.


판독성(Legibility)

특정한 서체에서 개개의 글자를 얼마나 쉽게 구별할 수 있는지의 정도를 판독성이라고 합니다. 서체와 글자, 디테일에 중점을 두는 것을 마이크로 타이포그래피(Micro-typography)라고 하는데요. 가장 기본적인 요소 중 하나이지만, 모든 서체가 판독성을 주된 디자인 기능으로 하여 만들어지지는 않습니다. 가장 흔한 문제는 대문자 I와 소문자 I의 구분이 없다는 것입니다. 이런 폰트는 작은 화면에서 읽기 어려우므로 피하는 것이 좋습니다.


1) 엑스 하이트(x-height*)

영문에서 우리가 읽는 글자의 95%는 소문자입니다. 대문자에 비해 소문자 x높이의 비율이 클수록 서체가 더 읽기 쉬워지는 경향이 있습니다.

*x-height: 폰트의 하나. 기준선(base line)에서 소문자 x의 높이를 말한다(역자 주).




2) 카운터(Counter)

글자는 여백을 가지고 있기도 합니다. 예를 들어 ‘o’, ‘u’, ‘d’를 보세요. 이 알파벳 안의 공간들을 카운터라고 합니다. 타이포그래피 전문가들은 이 공간이 많을수록 글자를 알아보기 쉽다고 말합니다.




3) 두께(Weight)

보통은 얇은 서체가 굵은 서체보다 판독성이 좋습니다. 이는 카운터와 관련 있으며, 문자 안의 공백을 넓게 하므로 서체를 수정할 필요가 없습니다.


어떤 것이 더 읽기 쉬울까요?


가장 이상적인 문자 획의 두께는

폰트 높낮이의 약 18%입니다.


4) 넓은 면적(Wide proportion)

높이와 연관된 글자의 너비는 면적으로 설명할 수 있습니다. 일반적으로 면적이 넓은 글자가 좁은(condensed) 글자보다 알아보기 쉽습니다.


언뜻 보기에는 차이가 별로 없어 보입니다.



5) 자간(Letter spacing)

글자 간격을 계산하는 궁극적인 방법은 없지만, 대부분의 경우 글자 크기가 클수록 필요한 자간이 더 작아집니다. 안 그러면 서체가 많이 벌어져 보일 수 있고, 이에 따라 수동으로 간격을 조정해야 하기 때문입니다. UI 디자인에서 이 정도 크기는 보통 헤더(header)에 해당하는 부분입니다.


이것도 작은 차이입니다.



가독성(Readability)

가독성(Readability)은 총체적인 읽기 경험입니다. 얼마나 쉽게 텍스트 레이아웃, 제목(header)과 부제(subheading), 문단(paragraphs)과 단락(blocks)을 구별할 수 있는지를 의미합니다. 마이크로 타이포그래피는 텍스트를 시각적으로 매력적으로 만들어 사람들이 더 잘 읽도록 유도합니다. 대비, 색상, 사이즈, 구성, 작은 디테일을 통해 더 좋은 읽기 경험을 가능하게 하는 일종의 예술인 셈입니다.


1) 세리프(Serif) vs 산세리프(Sans Serif)

역사적으로 보면 세리프가 더 읽기 쉽습니다. 오랜 시간 인쇄에 사용되었으며, 긴 텍스트에서의 가독성이 많이 개선되었기 때문입니다. 세리프는 눈이 텍스트의 흐름을 쉽게 타도록 합니다.


그러나 웹과 모바일에서는 다릅니다. 가독성이 좋은 여러 개의 산세리프가 존재하며, 오늘날의 시각디자인은 보다 심플한 글자 모양(letterforms)을 선호하기 때문입니다. 실제로 웹, 특히 모바일에서는 산세리프체가 훨씬 많습니다. 게다가 디스플레이는 종이가 아니고, 보통 웹에서 긴 텍스트는 읽지 않습니다. 특히 앱에서는 더욱 그렇습니다.


트위터 앱에는 세리프를 찾아볼 수 없으나 미디엄에는 있네요.


이는 각자가 제공하는 프로젝트에서 사용자들이 콘텐츠를 어떻게 읽는지에 따라 다를 것입니다. 예로, 보통 미디엄에는 대부분 긴 것을 읽기 때문에 세리프가 많습니다. 이것이 좋은 디자인 접근방식일테니까요.



2) 행간(Line height)

행간(줄 높이)의 경우 황금비율을 사용하시는 것을 강력히 권해드립니다.


글자크기에 1.618을 곱하면

완벽한 행간이 나옵니다.


여기(링크)에서 높이를 계산해보세요.


더 경험이 많은 사람이라면 감으로 조정할 수도 있습니다. 물론 이 규칙에도 예외는 있으며 상황에 따라 대처하면 되겠습니다.


작은 차이지만, 가독성에는 큰 영향을 줍니다.



3) 텍스트 블록 너비(Text block width)

살얼음에 발을 디디는 것과 같은 부분입니다. 텍스트 블록이 너무 넓으면 눈이 다음 줄을 찾기가 어렵습니다. 라인이 너무 좁으면 줄이 너무 자주 바뀌어서 읽기 리듬이 깨지겠지요.


우리의 무의식은 다음 줄로 넘어갈 때 힘을 얻습니다.(너무 잦지 않으면) 독자들에게 계속 글을 읽게 할 에너지를 주려면, 텍스트 라인은 50~75자 정도(영문 기준)가 적당합니다.



4) 색상(Colors)

물론 작업물의 특성에 따라 다르지만, 팁 하나를 공유하자면, 순수한 그레이(또는 검정)를 사용하기보다, 주색상을 고르고 아래와 같이 주변에서 선택하는 것입니다.


분홍색 삼각형을 주목하세요.


이는 일반적인 #CCC를 사용하는 것보다 더 매력적이고 독특할 것입니다. 작은 디테일은 시각적으로 돋보일 수 있게 만듭니다.



5) 여백(White space)

여백에 관련된 많은 책과 출판물이 있지만, 타이포그래피에서는 이 한 가지를 기억해야 합니다.


여백의 주요 역할은

사용자들이 동시에 보는 텍스트의 양을

줄이는 것입니다.


이는 레이아웃을 더 효율적으로 볼 수 있게 하며, 콘텐츠가 과부하 되지 않게 도와줍니다. 여백은 레이아웃 쪽으로 시선을 끌며 잘 정돈된 느낌과 정교함, 우아함을 선사합니다.


Luxy — Tablet by Nguyen Le



6) 위계(Hierarchy)

위계는 콘텐츠를 읽는 법을 정의합니다. 계층은 제목, 부제목, 본문을 구분할 수 있게 도와줍니다. 우리는 다양한 대비(contrast), 글씨 크기(text sizes), 패딩(padding), 마진(margins)등을 사용하여 위계를 완성할 수 있습니다. 훌륭한 가독성을 만들기 위해서 반드시 마스터해야하는 테크닉입니다.


디테일을 주목하세요. 날짜와 서술한 부분의 색상이 다른데, 처음에는 차이가 잘 보이지 않습니다.

(Event_Discovery_App by Jakub Antalík)



7) 세퍼레이터(Separators)

콘텐츠를 섹션별로 나누는 좋은 방법은 세퍼레이터를 사용하는 것입니다. 가장 많이 쓰이는 것은 라인입니다. 다소 애매한 방법이지만 가독성을 높이는 데에 큰 역할을 합니다.


또 다른 방법은 요즘 인기있는 카드형식을 사용하는 것입니다. 이것은 전체 내용과는 분리된 콘텐츠에 사용하기 좋습니다. 모바일과 큰 썸네일에 사용하기 좋으며 레이아웃을 더 잘 감별할 수 있게 하기도 합니다.


두 예시를 함께 보여드릴게요. (왼쪽하단의 카드형식과 오른쪽의 라인 세퍼레이터)

nearby attractions by me



8) 반복과 리듬

이 부분은 UI 디자인에서 가장 많은 시간이 소요됩니다. (적어도 저한테는요) 반복되는 요소들은 통일감을 줍니다. 포지셔닝(positioning), 글씨 크기, 색상, 패딩, 마진, 규칙 사용, 배경, 박스들이 포함됩니다. 예컨대 저는 보통 패딩이나 여백의 사이즈를 5로 주어 일관성을 지킵니다. (제 규칙 중 하나입니다) 반복은 리듬을 만듭니다.


avsc by me



마치며

타이포그래피를 배우는 일은 실력을 향상시키면서 멋진 문구와 만족스러운 뷰를 만들어내는 매력적인 여정입니다. 실력은 블로그 글을 읽는다고 늘지 않습니다. 직접 배우고 연습해보세요. 스케치(Sketch)를 켜(포토샵 사용자들에게는 미안하지만) 멋진 작업물을 만들어보세요.


예술의 훌륭함은

흔한 것이 아닌 독특한 것을 찾는 것이다.

– Isaac Basyenis Singer (1904-1991)


ps. 이번 토픽은 이전 게시글에 대한 Viki G의 코멘트에 의해 만들어졌습니다.



원문 보러 가기





Posted by slowalk


요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 

그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다.


본문 스타일가이드의 예본문 스타일가이드의 예



본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공이 없으면 그 내용을 효과적으로 전달하기 어렵습니다. 


제목은 어떻게 쓸 것인지, 단락은 어떻게 나눌 것인지, 어느 부분에 표와 이미지를 활용할 것인지 고민해보셨나요? 또한, 종이 위의 보고서를 만드는 것이 아니라 웹사이트에 글을 올릴 것이므로 웹의 속성을 고려할 필요가 있습니다. 적절한 콘텐츠 표현을 위해 어떠한 고민이 필요한지, 요소별 체크포인트를 알아봅시다.



텍스트 - 소제목을 활용하거나 단락을 구분합니다.텍스트 - 소제목을 활용하거나 단락을 구분합니다.


1. 텍스트

- 제목과 본문을 구분하였는가: 제목의 단계를 활용하여 내용의 상하/포함 관계를 나타냅니다.
- 소제목으로 구분하였는가: 내용이 길고 단락마다 주요 내용이 다르다면 소제목으로 구분해보세요.
- 요약글을 더했는가: 가독성이 높아집니다.
- (본문 영역의 너비가 넓다면,) 단을 나눠서 글을 썼는가: 가독성을 높이는 데 도움이 됩니다.
- 전체 글의 양이 적절한가: 웹은 스크롤이 되기 때문에 본문의 양이 많아도 괜찮을 것 같지만, '스크롤의 압박'이라는 말도 있지요. 읽기 부담스러운 양의 본문은 사이트 이탈을 유발할지도 모릅니다.



표 - 데이터의 정렬을 확인합니다표 - 데이터의 정렬을 확인합니다


2. 표

- 표의 형태로 표현하기 적합한 콘텐츠인가: 단순히 레이아웃을 위해 표를 사용하지는 않았나요? 행과 열로 구분할 수 있고 여러 항목의 비교가 필요한 내용인지 살펴봅시다.
- 행과 열의 수가 적절한가: 행과 열이 너무 많으면 특히 모바일 디바이스에서 표에 담긴 내용을 파악하기 어려울 수 있습니다.
- 데이터의 정렬을 확인했는가: 숫자 데이터는 오른쪽 정렬을, 일반적인 글자 데이터는 왼쪽 정렬을 합니다. 표의 제목 행은 그 데이터 정렬과 같이 합니다. 되도록 가운데 정렬은 사용하지 않습니다.





3. 도식

- 도식으로 표현하기 적합한 콘텐츠인가: 도식은 주로 그룹 사이의 관계를 나타내거나, 구조, 변화를 나타낼 때 유용합니다. ex) 조직 구조도
- 다른 요소로 대체할 수 있는가: 웹상에서 도식을 사용하기가 쉽지는 않기 때문에 꼭 필요한 부분에만 사용하세요. 절차나 순서를 알려주는 내용에는 화살표 특수기호만 이용해도 좋습니다. 
- 도식의 크기와 형태가 웹사이트에 적절한가: 표와 마찬가지로, 도식을 가로나 세로로 너무 길게 표현하면 오히려 내용을 파악하기 어렵고, 모바일 환경에서는 별도의 도식 이미지를 준비해야 할 수도 있습니다.



이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)




4. 이미지

- 캡션을 표기하였는가: 사진이나 이미지에 설명을 덧붙이면 본문 내용의 이해에 도움이 됩니다. 
- 이미지와 텍스트를 섞어 작성하였는가: 되도록 본문 전체를 웹 포스터 형태의 단일 이미지로 게시하거나, 이미지만 올리는 경우를 피하세요. 로딩 속도를 지연시킬 수도 있고, 특정 내용을 찾기 위한 검색에도 큰 도움이 되지 않습니다. 
- 이미지의 비율이 적절한가: 반응형 웹의 경우, 가로로 긴 와이드 이미지는 모바일 환경에서 너무 작게 보일 수도 있습니다. 



링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)




5. 링크

- 링크와 링크가 아닌 요소를 구분하였는가: 링크 텍스트를 밑줄이나 다른 색상으로 구분해주세요. 클릭할 수 있는 것인지 명확히 해주는 것이 좋습니다. 링크를 단락과 구분하여 별도로 표시하는 것도 좋습니다. 이미지 자체에 링크하기보다는 텍스트로 링크를 표시하여, 사용자가 실수로 클릭하거나 이미지 확대 보기와 혼동하지 않도록 하세요.




웹상에서 글쓰기도 다른 글쓰기와 크게 다르지 않습니다. 다만 몇 가지 특징을 알고 준비한다면, PC와 모바일 모든 환경에서 보기 좋고 이해하기 쉬운 글을 쓸 수 있습니다. 사이트를 통해 제공하는 정보는 결국 방문자들을 위한 것입니다. 같은 내용이라도 쉽고 적절하게 표현하였는지 한 번 더 확인해보세요.







작성: 오예슬


Posted by slowalk


슬로워크 블로그에서는 얼마 전, 비디자이너의 얕은 지식 쌓기: 디자인 용어 20에 대해 포스팅했습니다. 그 글을 보고 저 또한 개발팀 내 유일한 비개발자이기에 많은 영감을 받아 이번 글을 작성하게 되었습니다. 저는 웹기획자로 프론트엔드개발자 두 명, 백엔드개발자 한 명과 함께 팀을 이뤄 작업하고 있습니다. 개발자와 함께 일하기 역시 기본적인 용어를 알지 못하면 혼란스러운 상황(나는 누구? 여긴 어디?..)에 처할 수 있습니다. 고객들도 웹사이트 의뢰를 하면서 익숙지 않은 여러 용어에 낯설어 합니다. 저 역시 아직도 갈 길이 멀지만, 개발자와 소통하기 위한 넓고 얕은 개발용어 몇 가지를 안내해 드립니다.



프론트엔드개발자와 백엔드개발자는 어떻게 다른 건가요?


프론트엔드개발자 - 사용자의 화면에 나타나는 웹 화면을 프론트엔드(Front-end) 영역이라고 합니다. 그리고 이 영역을 설계하는 사람을 프론트엔드개발자라고 합니다. 프론트엔드개발자는 사용자가 보는 화면을 주로 HTML과 CSS를 사용하여 보기 좋게 보이게 만들어주는 사람이라고 할 수 있습니다.


백엔드개발자 - 백엔드(Back-end) 영역은 일반적으로 사용자가 볼 수 없습니다. 예를 들어, 회원가입 정보를 입력하면 그 정보는 서버 데이터베이스에 저장되는데, 이러한 동작들이 처리되는 영역이 백엔드 입니다. 사용자가 보이지 않는 웹서버, 내부로직, 데이터베이스 설계, 데이터 처리를 주로 개발하는 사람입니다.

프론트엔드에서 사용자가 클릭, 드래그의 동작을 하면 이를 백엔드에서 처리한 데이터를 다시 프론트엔드로 돌려주어 사용자가 해당 작업을 수행할 수 있게 됩니다. 예를 들어, 페이스북에 사용자가 사진을 올리면 그 사진을 백엔드에서 데이터베이스에 저장하고 다시 프론트엔드로 돌려주어 내 사진을 다른 사용자가 볼 수 있게 되는 것입니다.

꼭 두 영역을 명확히 나눠서 개발하는 것은 아닙니다. 프론트엔드, 백엔드를 함께 진행하는 개발자도 있는 등 역할의 범위는 다양합니다.



자바, 파이썬, 루비, 펄, C++ .. 이게 다 무슨 이름인가요? 프로그래밍 언어는 다양하여 많은 선택지가 존재합니다. 유행을 타기도 하고 순위가 매겨지기도 합니다. 현재 사용되는 프로그래밍 언어는, 위키피디아에 따르면 698종이라고 합니다. 그 중 가장 많이 사용하는 언어는 C 계열 언어와 JAVA 계열의 언어이고, 최근에는 빅데이터 전문가가 뜨면서 R 프로그래밍이나 하둡에 관심을 두는 사람도 많아지는 추세라고 합니다. 각 언어는 저마다 장단점을 가지고 있고, 그렇기에 개발자들도 다룰 수 있는 언어들이 다양합니다.


출처: TIOBE



사용 가능한 프로그래밍 언어가 계속해서 늘고 점유율 순위가 바뀌고 사라지는 이유는 사용성 때문입니다. 요구사항이 변하고 시스템이 바뀔 때마다 손쉽게 바꿀 수 있어야 좋은 프로그래밍 언어가 됩니다.

비개발자이더라도 위 프로그래밍 언어들의 이름 정도만 알고 있으면 개발자들이 옆에서 이야기할 때 ‘아~ 프로그래밍 언어 얘기하는구나!’ 정도는 이해할 수 있습니다. 개발자와 가까워지는 방법은 그들의 언어를 한 번이라도 더 많이 들어보는 것입니다.



PHP, MySQL, Oracle 들어는 봤는데.. 서버? 백엔드개발자들이 사용하는 언어 맞나요?

PHP는 서버 쪽에서 동작되는 언어입니다. 자바스크립트나 HTML이 웹 브라우저에서 구동되는 것과는 구분됩니다. 사용자가 업로드한 파일을 서버에 저장하거나, 입력 데이터를 받아 데이터베이스나 파일에 저장하고, 저장된 정보를 불러와 HTML을 생성해서 웹브라우저로 전송하는 일을 처리합니다.

MySQL은 데이터를 보관하는 데이터베이스 관리 시스템의 한 종류입니다. 데이터베이스는 파일보다 정보 저장에 관해 더 많은 기능을 제공하기 때문에, 대부분의 데이터들이 데이터베이스에 저장됩니다. 그 중 MySQL은 오픈소스이기 때문에 많이 사용되고 있습니다.  


*서버 - 서버란 파일, 홈페이지, 동영상 등의 자료를 보관하고, 보관된 자료를 인터넷이 연결된 곳에서 언제든지 접근할 수 있도록 구성된 소프트웨어를 말합니다. 서버에는 메일서버, 웹 서버, 데이터베이스를 관리하는 DB서버, FTP프로토콜을 이용하여 파일전송을 가능케하는 FTP서버 등 다양한 서버가 있습니다.



서브라임텍스트3 사용하고 있고요, 깃으로 푸시해주세요~ 서브라임텍스트는 개발도구를 말합니다. 일반적으로 프로그래밍을 하는 데는 윈도우에서 메모장, 맥에서는 텍스트 에디터만 있어도 가능합니다. 그러나 규모가 크고, 오류가 없는 프로그램을 만들기 위해 작업을 도와주는 수 많은 개발도구들이 존재합니다. 좀 더 빠르고 효율적으로 개발하기 위해 도구를 사용하는 것이죠. 개발도구에는 비주얼스튜디오, 노트패트++, 빔, 이클립스 등이 있습니다. 그 중 서브라임텍스트는 개발자가 선호하는 도구 2위를 차지할 만큼 인기를 끌고 있습니다. 현재 슬로워크 1팀에서는 서브라임텍스트3을 사용하고 있습니다. 서브라임텍스트는 유료이지만 무료로도 사용할 수 있습니다. 장점으로는 개발자들이 많이 사용하기에 플러그인이 많아 원하는 대로 기능 확장이 가능합니다. 또한 가벼워서 좋다고 합니다.





기본적으로 이러한 까만 창이 서브라임텍스트3 입니다. 코딩을 위한 폰트도 개발자의 설정에 맞게 변경할 수 있습니다. 자세한 내용은 코딩 폰트 디자인기, Monoid를 참조해주세요.

깃(Git)은 버전관리 시스템으로 소스코드의 중요한 변화를 기록하는 것입니다. 어떠한 문제가 발생했을 때 문제의 전후 상황을 파악할 수 있도록 도와주고, 과거의 상태로 쉽게 돌아갈 수 있게 합니다. 특히 백업, 협업에 쉬워 많이 사용되고 있습니다. 물론 Git이 모든 걸 해결해주진 않지만 도움을 주기 때문에 많이 사용하게 됩니다.


CMS는 주로 워드프레스를 사용해요~


CMS-Collage2.png

출처: wooraky's Minority Report



CMS(Contents Management System)는 콘텐츠 관리 시스템으로 웹사이트를 구성하고 있는 다양한 콘텐츠를 효율적으로 관리할 수 있도록 도와주는 시스템입니다. 콘텐츠를 손쉽게 생성, 배포, 관리할 수 있는 http 기반의 프레임워크*라고 생각하시면 됩니다. 웹 서버상에서 운용이 되고 다양한 방식의 기술적 적용이 가능합니다. 우리나라는 XE(Xpress Engine)가 CMS를 표방하고 있습니다. 또한 요즘은 워드프레스(Wordpress)를 많이 사용하는 추세입니다. CMS는 전 세계적으로 워드프레스, 드루팔(Drupal), 줌라(Joomla) 이 세 가지 툴이 많이 쓰입니다. 특히 워드프레스는 쉬운 사용법과 기능들을 통해  CMS 시장을 거의 장악하고 있습니다. 프로그래밍 언어와 같이 다양한 장단점이 있고 어떤 툴이 가장 좋다고는 할 수 없습니다. 다만 대표적으로 많이 쓰이는 CMS 세 가지 정도를 알고만 있어도 개발자의 이야기를 훨씬 많이 이해할 수 있습니다.


*프레임워크 - 소프트웨어 제작을 편리하게 할 수 있도록 뼈대인 클래스와 인터페이스를 제작한 것들을 미리 모아둔 것입니다. 개발자는 이 뼈대에 살을 붙이는 방식으로 어플리케이션을 완성 시킵니다. 개발 생산성이 증대되고, 유지보수가 비교적 편리하다는 장점이 있습니다.

단점은 익숙해지는 데에 시간이 소요되고 모든 상황을 커버할 수는 없다는 한계가 있다는 점입니다. 그렇기에 개발 프레임워크를 얼마나 쉽게 커스터마이징 할 수 있는지가 프레임워크의 우수성을 평가하는 기준이 되기도 합니다.



HTML / CSS / jQuery / JavaScript 를 사용해서 만들었고요~


HTML - HTML은 웹 브라우저를 통해 사용자에게 보이는 프론트 영역을 작성하기 위한 언어로 웹 문서 내용 작성에 집중 합니다. 웹 사이트의 뼈대가 되는 구조라고 볼 수 있습니다.

CSS - CSS는 HTML로 잡아놓은 뼈대에 다양한 스타일을 추가, 변경하여 웹사이트에 디자인을 부여하고 글자의 크기 모양 줄 간격 등을 제어할 수 있게 만들어주는 언어입니다. HTML로 만들어진 뼈대에 CSS로 디자인을 입힌다는 개념입니다.


14066284_10208305726855618_3819602411510392924_o.jpg

출처: 조성도 페이스북


JavaScript - 자바스크립트는 웹사이트에서 팝업창을 열거나 전화번호 또는 이메일 주소의 유효성을 체크하는 등의 기능적인 요소를 위해 사용되는 언어로 액션에 용이합니다. 즉 HTML로 만들어진 뼈대에 CSS로 디자인을 입히고 JavaScript로 움직임을 넣는 개념입니다.

jQuery - jQuery는 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리입니다. 쉽게 말해 자주 사용하는 자바스크립트의 복잡한 코드를 간소화해주는 모듈을 말합니다. 크로스 브라우징(웹브라우저의 종류에 상관없이 웹사이트의 레이아웃 위치나 모양이 동일하게 보여지도록 서비스 접근성을 향상시키는 기술)이 쉽게 해결됩니다.



반응형 웹으로 할까요, 적응형 웹으로 할까요?


반응형 웹과 적응형 웹도 웹 사이트 구축 시 빠질 수 없는 알아두어야 할 개념입니다. 해당 내용은 더 자세히 설명된 슬로워크 포스팅 글로 이동합니다.

반응형 웹, 정말 효과적일까?



구글지도API를 사용해서 찾아오시는 길에 넣을게요! API?


API - Application Programming Interface의 약자입니다.

각 단어를 나눠서 생각해보시면,

어플리케이션 : 응용프로그램, 즉 흔히 알고 계시는 앱(app)입니다.

프로그래밍 인터페이스 : 기계가 이해하기 쉽게 입출력이 데이터로 이루어지는 인터페이스 입니다.

즉, 웹 어플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 말합니다.


startup_img3.jpg

출처: 공공데이터포털



이렇게 프로그램 간 서로의 커뮤니케이션을 담당하는 기능이라고 이해하시면 됩니다.

최근 우체국의 우편번호 API, 구글과 네이버 다음지도 API등 유용한 API가 많아 홈페이지 구축 시 따로 추가 개발 대신 이러한 *오픈 API를 많이 사용하고 있습니다. 특히 하이브리드 앱이나 워드프레스로 웹사이트를 만들 때 더욱 유용하게 쓰이곤 합니다.


*오픈API - 말 그대로 오픈되어 있는 API, 즉 자사의 API를 개방하여 외부에서 쉽게 쓸 수 있도록 만든 것입니다. 오픈API는 포털의 개방성을 높이기 위한 기술적 기반/개방 응용프로그램 인터페이스입니다.


대표 오픈 API사이트 몇 가지를 소개해드립니다. 아래 사이트에 가보시면API가 어떤 용도로 쓰이시는지 조금 감이 오실 겁니다. 한 번쯤 구경해 보기에도 좋습니다.


서울시공공 오픈API

구글 디벨로퍼

페이스북 개발자

카카오 디벨로퍼



구글api.png

출처: 구글 디벨로퍼

기본적이지만 모르면 외계어처럼 들리는 개발 용어들에 대해 간단히 알아보았습니다. 사실 정말 많은 개발 용어가 존재하고 있고, 개발자마다 사용언어나 사용법이 조금씩 다릅니다. 그렇기에 가장 중요한 것은 내가 함께 일할 동료들의 대화에 귀 기울이며 많은 대화를 하는 것입니다. 이 글을 작성하면서 저 또한 같은 팀 개발자 동료들께 많은 검수를 받고, 조언을 얻었습니다. 그 과정에서 어떤 도구를 사용해 어떤 식으로 일을 하고 있는지도 더욱 자세히 알게 되었고, 커뮤니케이션의 중요성을 다시 한 번 깨닫게 되었습니다.


참조

공공데이터포털 테크엠






Posted by slowalk

지난  ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다.


웹폰트 불러와 사용하기


웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(loading)’ 사용하는 것일 뿐입니다. 그럼 웹폰트는 어떻게 불러올까요? 

가장 먼저 웹페이지에서 사용하고 있는 CSS파일 안에서 불러오기(import) 할 수 있습니다. 만약 index.html 에서 style.css를 사용하고 있습니다. 그럼 style.css의 상담에 다음과 같은 코드를 넣어 웹폰트를 불러올 수 있습니다. 


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


또는 html 페이지에 <link>태그로 바로 적용할 수도 있습니다.


<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">



위와 같은 구조로 html페이지에서 ‘나눔고딕’ 웹폰트를 사용할 수 있습니다. 주소(URL)를 보면 googleapis.com이라는 주소가 보입니다. 구글에서 온라인에 폰트를 올려두고 우리에게 무료로 웹폰트를 서비스해 주고 있는 것이죠. 간편하게 웹폰트를 사용할 수 있는 이유입니다. 사용 방법은 아래와 같습니다. 


  1. https://fonts.google.com/ 에 접속합니다.

  2. 마음에 드는 웹폰트를 찾습니다. 

  3. 우측 상단의 +버튼을 눌러 ‘Family selected’에 담습니다

  4.  ‘Family selected’를 열어보면 <link> 또는 @import방법이 나옵니다.

  5. 내 웹페이지에 적용합니다.

  6. fonts.google.com에서는 영문 폰트만 볼 수 있습니다. 한글은 https://www.google.com/fonts/earlyaccess 를 방문하여 찾아봅시다.




웹폰트 직접 만들어 사용하기


google fonts의 수많은 지원 웹폰트에도 불구하고 마음에 드는 글꼴이 없을 때는? 웹폰트를 직접 만들어서 쓸 수 있습니다. 물론 사용하려는 웹폰트의 저작권 문제가 해결되어야 합니다. 웹폰트를 만드는 가장 손쉬운 방법은 온라인 생성기를 이용하는 방법입니다. 대표적인 생성기인 Web font generator를  사용하는 방법을 알아보겠습니다. 


  1. Web font generator 에 접속합니다.
  2. 가지고 있는 폰트 파일(주로 TTF파일)을 선택하고, 하단의 저작권 관련 내용을 확인합니다.
  3. 웹폰트가 생성되었습니다.
  4. 웹폰트 세트가 묶인 압축 파일을 다운로드합니다.




생성기를 통해 만들어진 웹폰트와 CSS파일을 가지고 있는 서버에 올리고 웹페이지에서 불러와 사용할 수 있습니다. 여기서 잠깐 style.css파일을 살펴보겠습니다.



@import처럼 @로 시작하는 몇 줄의 코드가 보입니다. 2행의 font-family는 앞으로 쓸 폰트의 이름입니다. 기본적으로 업로드한 폰트명으로 설정되지만 다른 것으로 바꾸어도 무관합니다. 그리고 이어 나오는 src는 폰트파일의 경로입니다. 생성된 폰트 파일의 경로를 한 줄 씩 보여주고 있는데요. 폰트는 하나인데 이렇게 복잡한 코드가 필요한 이유는 사용자들이 쓰는 브라우저가 각기 다르기 때문입니다. 브라우저마다 필요한 글꼴의 형식이 달라 이렇게 여러 줄로 안전하게 사용하는 것이죠. 

style.css안의 내용을 우리가 사용 중인 CSS파일 상단에 넣으면 지정한 font-family로 웹폰트를 사용할 수 있습니다. 


웹폰트 서비스 이용하기


웹폰트를 사용하고 싶지만 만드는 과정이 쉽지 않고, 저작권 문제가 걱정되는 것이 사실입니다. 웹폰트 생성기를 통해 상용 폰트를 웹폰트로 만들어 사용할 수도 있지만 그에 따른 저작권 책임은 온전히 사용자의 몫이기 때문입니다. 그럴 때는 유료 웹폰트 서비스를 사용해볼 수 있습니다. 저작권을 가진 웹폰트를 회원가입을 통해 나의 웹사이트에 사용하고 그에 따른 사용료를 지불하는 방식입니다. 


국내에는 아직 많이 사용되고 있지 않지만, 영미권에서는 유료 웹폰트 사용이 매우 활발합니다. Adobe에서 운영하는 Typekit이나  Monotype에서 운영하는 fonts.com이 대표적입니다. Helvetica, Futura 등 알만한 상용 폰트들을 웹에서 서비스하고 있습니다. 단순히 같은 폰트를 온라인에 올려놓은 것이 아니고, 종이가 아닌 스크린 환경에 최적화된 버전들을 서비스하고 있습니다. 


하지만 아직 한글 웹폰트를 서비스하는 곳은 많지 않습니다. 타입스퀘어를 통해 웹폰트 서비스의 사용 방법을 알아보도록 하겠습니다. 


  1. 회원가입 후, 로그인합니다.

  2. 이용 중인 플랜 중 ‘무료 플랜’을 선택합니다.

  3. 이용 범위를 확인합니다.

  4. 이용사이트를 등록합니다.

  5. 다시 위로 올라와 전용 태그를 복사하여 웹페이지에 추가합니다. 

  6. font-family 를 설정합니다.



이용 방법이 무료 서비스에 비해 다소 복잡합니다. 회원이 등록한 사이트에만 제한적으로 웹폰트를 서비스하기 때문입니다. 


마치며


웹폰트는 참 매력적인 도구입니다. 굴림과 바탕으로 밋밋하고 못난 웹페이지를 고급스러운 디자인으로 보이도록 해주기 때문입니다. 화면 밖의 타이포그래피는 참 화려합니다. 수많은 디자이너가 좋은 서체를 활용하여 더욱 아름답고 멋진 디자인을 위해 노력하고 있습니다. 하지만 웹에서는 아직 사용할 수 있는 자원이 많지 않습니다. 특히 한글 글꼴 지원은 아직 걸음마 수준입니다. 웹폰트에 대한 관심이 차츰 성장하고, 다양한 웹폰트 사용이 꾸준히 늘어나 웹페이지에서도 아름다운 타이포그래피를 볼 수 있길 바랍니다. 


작성자: 스티비 개발 문윤기

Posted by slowalk



정보의 홍수 속에 사는 현대인 여러분, 안녕하십니까? 평소에 '웹 서핑' 많이들 하시죠?


저는 주로 출퇴근 길에 휴대폰을 열심히 들여다보는데요. 새로운 정보에 뒤처지기 싫은 마음에, 도움이 될 만한 것을 강박적으로 찾아보는 것 같습니다. 정보로부터 받은 감명은 그때 뿐이고 이내 잊어버립니다. 정작 읽었던 내용이 필요할 때 기억이 나지 않습니다. 봤다는 사실조차 잊어버리지요. 때로는 한 번 찾았던 것을 다시 검색하는 내 모습에 놀라기도 합니다.


우리는 수많은 정보 속에서, 보고도 원하는 정보를 찾지 못하고, 찾고도 원하는 정보를 이용하지 못한 채 매일 잊으며 살고 있습니다. 1분 1초 귀한 시간을 쪼개서 얻은 정보인데 기억 속에 묻어둘 순 없겠죠? 당장 사용하지는 않더라도 내가 찾아봤던 것들, 필요한 레퍼런스를 잘 정리해둬야겠다는 생각을 하게 되었습니다. 


왜 적어두었는지 기억나지 않는 노트 일부


옛날에는 책을 읽으면서 좋은 글귀를 노트에 적어두고 그 노트를 나중에 다시 보는 재미도 있었습니다. 요즘은 주로 웹에서 정보를 얻다 보니 읽을거리, 볼거리도 다양하고 그 양도 많아서 노트 한 쪽에 적어두기에는 한계가 있습니다. 웹에서 찾은 이미지와 문서, 링크 등 각종 레퍼런스를 그에 맞는 방식으로 관리해야겠다는 생각이 들어, 그 방법을 찾아보려고 합니다.



파일로 저장하기 


파일로 저장이 가능한 형태의 레퍼런스라면 문서나 이미지 파일로 보관하는 방법이 괜찮습니다.


좋은 자료는 발견하는 '즉시' 저장하는 것이 포인트입니다. 구글 드라이브나 드롭박스(Dropbox)와 같이 클라우드 서비스를 이용하면 다른 기기에서도 확인할 수 있습니다. 


다만 다소 번거롭고 저장 공간의 용량이 마음에 걸립니다. 이미지의 경우엔 파일로 저장하기 좋지만, 문제는 웹페이지입니다. 본문을 어딘가에 ‘복사+붙여넣기’ 할 수도 있지만, 글의 양이 너무 많으면 그것도 어렵습니다. 브라우저에서 Save Page As를 해보신 분들은 알겠지만 HTML 파일로 저장이 됩니다. 이건 아닌 것 같습니다..



브라우저의 북마크/읽기 목록 활용하기


북마크 기능은 1번에서 얘기한 웹사이트 링크 보관의 문제를 해결해주는 듯합니다. 요즘엔 PC와 모바일 브라우저가 연동되어 데스크톱에서 저장한 북마크를 모바일 브라우저에서도 확인할 수 있습니다. 파일 관리처럼 북마크의 저장 체계를 잘 정할 필요가 있습니다.


Safari 브라우저의 읽기 목록 추가하기


사파리 브라우저에서 제공하는 읽기 목록 기능도 비교적 최근 자료에 대해서는 유용하지만 과거의 자료를 떠올리기에는 한계가 있습니다.



자료수집용 블로그/SNS 계정 만들기


구글 ‘자료수집용' 검색 결과 중 일부


자료 수집용 블로그나 SNS 계정을 본 적이 있을 것입니다. 최근엔 블로그나 트위터, 페이스북에서 많은 정보를 얻다 보니, 바로 그 SNS 계정을 활용하는 것도 좋아 보입니다. 계정에 직접 자료를 올리거나 다른 사람들이 공유한 것을 좋아요/리트윗/공유하기를 하여 내 계정 페이지에서 쉽게 모아 볼 수 있습니다. 내 계정에 유용한 정보가 쌓이면 나의 팔로워도 늘어나 일거양득의 효과가 있습니다.


그러나 자료 수집이 서비스의 본래 목적이 아니기에, 내 타임라인에서 과거의 자료를 찾아보기가 쉽지 않아 아쉽습니다.



관련 서비스, 어플리케이션 이용하기


보다 전문적인(?) 방법을 찾아보았습니다. 자료의 수집과 공유를 위해 만들어진 관련 서비스들이 있습니다. 이 서비스를 이용하면, 내가 혹은 남이 공유한 웹 레퍼런스를 쉽게 얻고 저장하며, 또 다른 사람과 공유할 수 있습니다.


핀터레스트에서 생성한 보드. 업무와 무관하지만 개인 취향의 패션 화보를 모으기도 합니다.


이미 많이 알고계실 핀터레스트(Pinterest)는 웹에서 찾은 자료를 '보드'에 '핀'으로 담아 보관할 수 있는 서비스입니다. 디자인을 비롯하여 사진, 패션, 음식 등 다양한 카테고리의 자료가 많습니다. 진행하는 프로젝트나 평소 관심사에 맞게 보드를 만들어 아이디어를 모읍니다. 


내가 찾아본 것과 유사한 자료를 추천해주는 기능 덕분에, 일촌 파도타기처럼 끝없이 핀들을 둘러볼 수 있습니다. '그룹보드'를 만들어 다른 사람들을 초대하면 함께 보드에 핀을 추가할 수 있어서, 팀원들과 자료를 공유하는 데 유용합니다. 


에버노트에 링크 자료를 모으고 있는 순록 발자국


에버노트(Evernote)와 같은 노트 어플리케이션에 필요한 링크를 저장해 둘 수 있습니다. 여러 연관 자료를 하나의 노트에 모을 수 있고, 링크와 함께 나의 설명을 곁들여두면 '내가 왜 이것을 저장해두었나?' 하는 질문을 미리 방지할 수 있습니다. 노트마다 URL을 생성할 수 있어서 누군가와 공유하기도 좋습니다.


MacOS/iOS 포켓 앱 실행 화면


크롬 브라우저 확장 기능으로 간편하게 웹사이트를 보관합니다.


웹의 아티클이나 동영상 등의 콘텐츠를 수집할 수 있는 포켓(Pocket)이라는 서비스도 있습니다. 크롬 브라우저의 확장 기능을 이용하면, 보고 있는 웹사이트를 쉽게 포켓에 담을 수 있습니다. 저장하는 순간에 내용을 요약할 수 있는 단어로 태그 등록을 해두면, 필요한 순간에 태그로 빠르게 레퍼런스를 찾을 수 있어서 좋습니다. 트위터나 Feedly, Filpboard 등 수 많은 즐겨찾기 앱과 연동이 되기 때문에, 여러 채널을 통해 얻은 레퍼런스를 포켓 하나로 관리할 수 있습니다.


슬랙에 링크를 입력하면 사이트의 메타 정보가 요약되어 내용을 짐작할 수 있습니다.


업무 중에 늘 슬랙(Slack)을 사용하다 보니, 급한 대로 참고할만한 링크를 모아두는 개인 채널을 만들기도 합니다.



이 외에도 유용한 서비스가 많습니다. 다루는 레퍼런스의 유형이나 목적, 개인의 취향, 기준에 따라 적절한 서비스를 이용해 봅시다.


그 외 관련 서비스/툴


  • Designspiration : 디자인에 영감을 얻을만한 자료들이 있습니다. 핀터레스트와 비슷한 구성이며, 컬러 코드로 이미지 검색을 할 수 있습니다.

  • Site Inspire : 웹과 인터렉티브 디자인에 관한 자료를 다루며, 스타일과 주제별 키워드로 자료 탐색을 할 수 있습니다.

  • DRAGDIS : 비주얼 북마크 도구입니다. 웹사이트를 둘러보다가 드래그 앤 드롭으로 레퍼런스 수집을 할 수 있습니다. 브라우저 확장 도구를 제공합니다.

  • Gimme Bar : 북마크 도구로 트위터, 인스타그램과 연동되며 드롭박스에 북마크 목록을 백업할 수 있습니다.

  • Inboard :웹사이트 페이지 전체 캡쳐/저장이 가능하며, 이미지, 사진, 스크린샷 관리에 유용합니다. (Mac 용)

  • Raindrop : 포켓과 유사한 서비스로 웹과 앱의 기사, 사진, 비디오를 저장할 수 있습니다.



마치며


웹에서 얻은 레퍼런스를 보관하는 몇 가지 방법을 알아보았습니다. 혹시 더 좋은 아이디어를 알고 계신 가요? 아무리 좋은 방법이라도 모아두고 다시 보지 않으면 기억에서 지워지는 것은 당연합니다. 평소에 작은 관심과 정성이면 주옥같은 정보를 내 것으로 만들 수 있습니다. 좋은 것을 다른 이들과 나누면 더 좋겠죠! 공들여 찾은 자료와 더는 스치듯 안녕하지 않고, 그때그때 정리하여 적시에 꺼내보는 기쁨을 맛봅시다.



by 비숑 발자국


Posted by slowalk

UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.



1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.



UI의 9가지 상태 ➔ 더 읽기



2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.


모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기




UI디자인에서 버튼이나 메뉴는 다른 곳으로 향하는 '문'입니다. 버튼의 형태나 스타일만큼 중요한 것은 '문의 이름'입니다. 메뉴 버튼의 중요성과 적합한 메뉴명을 결정하는 요소를 알아봅니다.

클릭을 유도하는 이름 붙이기 ➔ 더 읽기




스크롤로 제어하는 원 페이지 구조가 등장하면서 세로형 내비게이션 메뉴도 많이 볼 수 있게 되었습니다. 웹사이트를 디자인할 때 사용하는 세로형 내비게이션이 무엇인지와 세로형 내비게이션 메뉴 활용법을 3단계로 나누어 알아봅니다.

웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 ➔ 더 읽기




사용자의 명령을 인식하거나 긴급 상황을 알리는 데 사용하는 모달 창 (Modal window)는 사용자의 작업 흐름을 흐트러트릴 수 있습니다. 그래서 모달 창 버튼의 색상 사용이 중요합니다. 모달 창 버튼의 3가지 성격에 맞는 색상 지정 방법을 알아봅니다.

버튼색상에도 정답이 있다 ➔ 더 읽기



6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.


스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기



7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.


모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기




8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.


새로운 UI로써의 No-UI ➔ 더 읽기





Posted by slowalk

웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요.



1. 짤방으로 이해하는 웹 디자인의 역사 


웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다.


짤방으로 이해하는 웹 디자인의 역사 (→글 읽기)



2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 


반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭 읽어보세요.



움짤로 이해하는 반응형 웹디자인의 9가지 요소 (→글 읽기)



3. 우리 홈페이지, 어떻게 만들어 활용할까? 


웹사이트 제작을 고민하는 분이라면 꼭 읽어 보아야 할 내용입니다.

1편은 웹사이트, SNS, 블로그 이 세가지 온라인 매체를 자세히 소개

2편은 온라인 콘텐츠의 성격과 순환구조, 특징에 따른 자원목록화(보유자원감사) 방법

3편은 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항을 설명합니다.



우리 홈페이지, 어떻게 만들어 활용할까? 

(→1편 읽기) (→2편 읽기) (→3편 읽기



4. 보기 좋은 약관이 읽기도 좋다. 


회원 가입이 필요한 웹사이트라면 약관은 꼭 필요합니다. 대부분의 약관은 지루하고 이해하기 어려운데요, 사용자의 입장에서 보기 좋고 이해하기 쉬운 약관을 보여주는 방법을 알아봅니다.



보기 좋은 약관이 읽기도 좋다. (→글 읽기) 



5. 기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마!


사용자에게 친절한 웹사이트는 무엇일까요? 도서 ‘(사용자를) 생각하게 하지마’에 나온 웹사이트 메뉴 위치, 메뉴명, 태그라인 선정 방법에 대해 알아봅니다.



기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마! (→글 읽기)



6. 홈페이지 방문자 수를 늘리기 위한 7가지 팁


모든 콘텐츠가 홈페이지에 드러나는 것은 좋은 방법일까요? 기업과 서비스의 철학과 메시지에 맞게 방문자가 흥미를 느끼고 다시 찾아올 수 있도록 하는 7가지 팁을 전합니다. 



홈페이지 방문자 수를 늘리기 위한 7가지 팁 (→글 읽기) 

Posted by slowalk

웹사이트를 제작하고 운영하면서 콘텐츠에 대한 중요성을 다시 한 번 강조하여도 부족함이 없습니다만, 좋은 콘텐츠를 보유하였더라도 이를 출판(발행)할 매체가 없다면 필요한 사람들에게 그 정보를 전달하기가 어렵습니다. 네트워크와 인터넷 기술의 발전으로 고전적인 HTML 문서를 게시하는 것부터 간편하게 스마트폰에서 업로드 할 수 있는 수많은 방법이 생겨났습니다.  


하지만 기관을 대표하는 공신력 있는 웹사이트를 제작하는 것은 단순한 SNS 페이지를 보유하는 것 이상으로 고려해야 할 사항이 많습니다. 이번 포스팅에서는 Mr.slo의 예시로 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항에 대해 설명하도록 하겠습니다.



가상사례

A 기관의 담당자인 Mr.slo는 최근 신설된 A 기관의 온라인 마케팅 담당자로서 부임하게 되었습니다. 


<다양한 감정을 가진 Mr.slo>
출처:슬로데이 인스타그램


사회활동가로 일하던 Mr.slo는 혼자서 간단한 웹사이트를 만들어 운영해 본 경험이 있으며 자신의 블로그를 운영하고 있지만, 그저 단순한 자기 주변의 가십거리 정도를 올리는 용도로 사용 중입니다.


그에게 부여된 임무는 바로 ‘A 기관의 홈페이지(웹사이트)’를 만들어라 - 라는 것입니다. 일부의 정부 지원금과 지정기부금 단체로써 모금된 금액으로 운영되는 A 기관은 빠듯한 예산 중 일부를 할애하여 사업예산을 이미 책정해 둔 상태이고, 기관의 사업범위 중 온라인 마케팅과 관련된 부서나 협력업체 거래는 전혀 없는 상태입니다.


Mr.slo는 우선 사업진행을 위해 관련 업체를 섭외해 보기로 했습니다. '홈페이지 제작’으로 인터넷으로 검색하니 수많은 업체의 링크와 광고글, 블로그글, 까페글로 화면이 가득 차며 제각각 장점을 내세우는 문구들로 가득합니다. 몇 가지 글을 클릭해 읽어보다 도통 무슨 소린지 알 수 없는 내용을 반복적으로 읽다 지쳐 가장 위쪽에 있는 업체부터 클릭해 천천히 둘러보기 시작했습니다. 


다들 자신들의 방법론과 솔루션을 장점으로 내세우며 견적문의로 유도하는 구조 속에 몇 가지 업체의 사이트에 견적문의 글을 남깁니다.


"Q: 홈페이지 제작 견적 문의드립니다.

저희는 작은 NGO기관입니다. 현재 웹사이트는 없는 상태이며, 간단하고 심플하지만 기관을 잘 나타낼 수 있는 이미지와 추후 사업분야의 확장을 고려한 확장성 있는 형태의 웹사이트를 제작하고 싶습니다. 현재 예산은 X백만 원으로 책정되어 있습니다. 견적서와 작업일정을 알려주세요."


글을 남긴 뒤 몇 몇개 업체에서 답변 메일과 전화가 걸려왔고, 그중 몇 개의 업체로부터 최저금액과 최고금액의 차이가 10배 가까운 견적서들이 수신됩니다. 전화로 문의한 업체들은 기관의 규모와 ‘사이트맵’이 정해져 있는지, 홈페이지에서 원하는 기능들이 어떤 것인지를 물어봅니다. 그렇게 수집된 견적서들에는 50만원 부터 1000만원 까지 200배가 차이나는 가격이 적혀있습니다.  Mr.slo는 대체 이게 무슨 차이인지, 누가 사기를 치고 있는지 혼란스러운 와중에 얼마 전 S 에이전시와 웹사이트를 제작한 활동가 친구 B에게 이에 대해 문의를 하게 됩니다.



“대체 견적이 왜 이렇게 천차만별이지?"

일반적인 공산품과는 달리, 웹사이트는 기능과 구조, 그에 따른 운영 시스템에 따라 제작 및 운영에 드는 비용이 크게 달라집니다. 이를 결정하는 것은 제작하려는 웹사이트의 목적과 운영에 필요한 인적/물적 자원의 유무에 좌우됩니다.


기본적으로 고려해야 할 지점은 도메인 등록 및 연결 / 웹사이트 개발 / 웹서버 또는 웹호스팅 / 운영 및 유지보수 입니다.



도메인
웹사이트의 ‘주소'로써 물리적인 웹서버의 위치를 논리적으로 연결된 DNS를 사용해 접근할 수 있게 합니다. 예를 들어, '서울특별시 중구 태평로 1가 31번지’ 의 위치에 서울시청이 위치하지만, 사람들이 ‘서울시청’이라고 말하면 해당하는 위치를 떠올리고 찾아갈 수 있게 하는 것과 유사하다고 볼 수 있습니다. 국제 도메인(.com, .net 등)의 경우 국제 인터넷 주소자원 관리기관(ICANN)에서, 국적도메인(.kr, .co.kr 등)의 경우 한국인터넷정보센터(KRNIC)에서 등록/관리하며 개인이 직접 등록하는 것도 가능하나 그 절차가 복잡하고 다소 까다로워 등록대행업체를 이용해 년 단위로 임대하고 그에 대한 비용을 지불합니다. 

도메인은 무형 자산으로 취급되므로 등록 시 제작을 대행하는 에이전시나 업체의 명의로 등록하기보다 주관기관 명의로 직접 등록하여야 추후 발생할 수 있는 소유권 문제를 사전에 방지할 수 있습니다.




<IP주소와 도메인의 동작개요>
출처:KISA, KRNIC


웹사이트 개발

웹 브라우저가 인식할 수 있는 언어 또는 프로그램으로 웹사이트를 만들어 내는 일련의 과정으로 해당 분야에 지식이 있는 전문인력이 그 역할을 수행합니다. 일반적으로 개발작업은 투입인력과 투입시간에 비례하여 산정되며 복잡하고 어려울수록 비용이 증가합니다. 개발 단계는 개략적으로 ‘요건분석 > 기획 > 설계 > 디자인, 프로그램 개발 > 검수 > 납품’의 단계로 진행됩니다. 이 단계 중 기획-설계 부분에서 구축하려는 웹사이트가 가진 성격과 요구되는 기능/디자인의 요소를 정확하게 커뮤니케이션 하는 것이 중요합니다. 단순히 '있으면 좋겠다' 라는 생각으로 기능이나 페이지를 추가할 경우, 개발에 추가되는 비용뿐만 아니라 이를 운용함에도 물리적 비용뿐만 아닌 시간과 인적자원이 투입됨을 유념하여야 합니다. 


정해진 가격을 제시하는 아주 저렴한 웹사이트를 제작하는 업체의 경우, 본인들이 보유하고 있는 플랫폼 또는 무료로 제공되는 플랫폼 구조 속에 기관에서 제공되는 이미지(주로 로고나 활동사진)와 텍스트를 입수한 뒤 액자에 사진을 넣듯이 정해진 틀에 내용을 채워 넣는 식으로 작업이 이루어집니다. 필연적으로 제작에 필요한 기간 역시 짧은 편이며, 단순히 기관/단체의 연락처와 하고 있는 일 정도를 대외적으로 알리는 용도로는 부족함 없이 사용할 수 있습니다. 다만, 정해진 틀 이상의 작업을 고려하여 제작되지 않았으므로 추후 확장성에 매우 제한적인 단점이 있습니다.


웹호스팅
개발된 웹사이트가 언제나 사용자가 접근할 수 있도록 상시 전원과 인터넷 네트워크에 연결된 컴퓨터, 즉 웹 서버에 위치해야 합니다. 물론 집이나 회사에 서버를 설치하고 유지할 수 있으나 전원유지에 필요한 전기요금과 방열/방습 등 환경적인 요인, 그리고 정전 등의 불가피한 상황에서도 정상적인 서비스가 유지될 수 있는 웹서버/호스팅 업체의 서비스를 이용하는 것이 일반적입니다. 소규모 웹사이트의 경우 1대의 웹서버 자원을 모두 사용하지 않고 호스팅 업체에서 제공하는 서버의 일부 용량과 회선을 임대하는 월간 지불방식을 주로 이용합니다.

<충격과 공포의 구글 IDC 센터에서 서버를 관리중인 엔지니어>
출처: 구글 데이터센터


자료를 저장할 수 있는 용량인 HDD용량과, 하루 전송량이 제한된 경우 일일 트래픽(업로드+다운로드 합산)을 주의하여 계약해야 합니다. 저렴한 호스팅 서비스 중 일부는 제공되는 일간 트래픽 용량이 적어 웹사이트에서 제공할 콘텐츠가 대용량 자료일 경우 수 명이 여러 차례 다운로드 했을 때 일일 트래픽을 소진하는 시점부터 자정까지 해당 일의 웹사이트 접속이 차단되는 경우가 발생할 수 있습니다. 호스팅 계약 시 트래픽을 계산하는 기준이 보통 일 3Gbyte 와 같이 용량 단위로 측정이 되는데, 간단히 3Mbyte의 영상을 1000번 조회(또는 다운로드)했을 때 3000Mbyte = 3Gbyte 용량을 사용한다고 볼 수 있습니다. 이러한 방식을 고려하여 제공하려는 콘텐츠의 종류와 용량을 미리 파악하여 서비스를 선택합니다.


운영 및 유지보수 

개발이 완료된 웹사이트가 웹호스팅을 통해 사용자에게 상시 제공되도록 설정된 이후에 실질적인 웹사이트의 운영 시 발생할 수 있는 추가적인 작업에 대한 필요성과 웹사이트의 기능이 불가항력적인 이유로 인해 정상적으로 작동하지 않을 때 이를 위해 투입되어야 하는 물적/인적 자원 소요를 말합니다. 작은 기관과 단체의 경우 내부에 웹을 위한 별도의 디자인 인력이나 운영을 위해 교육된 개발자 인력이 부재한 경우가 대다수이므로 이에 대응하기 위해 허용된 자원범위 안에서 월간/연간 필요한 소요를 미리 산정한 뒤 이를 수행하는 것을 약속하는 형태로 유지보수의 계약이 이루어집니다. 

인지해야 할 점은 하자보수와 유지보수의 차이점입니다. 웹 개발계약서상에 약속한 기능과 형태가 정상적으로 구현되지 않았을 경우 이를 수정하는 작업은 통상 계약서에 명기된 하자보수 기간에 무상으로 제공되고, 계약 시 약속된 범위 이외의 필요기능이나 수정사항이 발생했을 경우에는 별도의 유지보수의 개념으로 취급되어 이에 대한 비용을 필히 염두에 두어야 합니다. 이러한 점 때문에 웹사이트의 개발 착수 전 사이트의 목적성에 대한 명확한 정의와 함께 이를 뒷받침할 수 있는 요구기능에 대한 정의와 분석, 그리고 그에 적합한 기능에 대한 개발요구가 선행되어야 합니다.


정리하며
웹사이트란 단순하게 보자면 정보를 담는 그릇과 같지만, 그 정보를 담고 효율적으로 전달하기 위해 디자인적인 요소뿐만 아니라 기술적 요소와 운영의 전략 등 많은 부분이 유기적으로 연결된 복잡한 구성체입니다. 다음 포스팅에서는 제한적인 자원을 기반으로 한 운영 목적에 따라 웹사이트를 구현하는 방식과 플랫폼을 선택하고, 이를 사용하는 방법에 대하여 알아보도록 하겠습니다.


더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 1편

            우리 홈페이지, 어떻게 만들어 활용할까? 2편


by 물범 발자국


Posted by slowalk