이런 도구가 국내에 있는지는 모르겠지만 없으면 아마도 개발되리라고 봅니다. 이야기를 쓰는 사람이라면 이런 도구 하나쯤 있어야 하지 않을까 생각해본 적이 있을 겁니다. 이야기에는 수많은 인물이나 장소가 등장합니다. 복잡한 이야기라면 인물에 대한 캐릭터와 장소의 특징을 정해놔야 할 것이고 글 쓰는 도중 등장인물이나 장소에 어떤 성격이 있는지 확인이 필요할 때 체크해야 전체 이야기가 모순에 빠지지 않고 체계화될 것입니다. 천재적인 작가는 이런 것을 모두 머리 속에 넣어 놓고 있을지는 몰라도 메모해두지 않으면 나중에 앞뒤가 안맞아 독자로 하여금 "이게 뭐야"하는 소리를 듣지 않게 될 것입니다. https://www.pencilapp.io 우연히 둘러봤는데 워드프로세서보다는 좋을 것 같습니다. 베타버전인지 이용가..

이번에 티스토리에서 보안인증서를 설치하면서 여러 가지 에러가 발생하고 썸네일 이미지가 Mixed Content로 나타나는 등 문제가 발견됐습니다. 현재 제 블로그의 스킨을 업데이트 하기위해 티스토리에서 제작한 반응형 스킨(#2)을 참고해 썸네일 이미지 부분을 수정하면서 #2 스킨을 핀터레스트 스타일로 수정해봤습니다. 사이드바 3단 사이드바 2단. 사이드바 1단 사이드바 2단, 1단은 위젯이 많아지면서 스크롤바가 나타나는데 보기에 좋지않아 크롬에서만 보기좋게 나타나도록 수정했습니다. 설치하고 나면 홈화면과 카테고리 화면이 위처럼 그리드 형 메이슨리 레이아웃으로 나옵니다. 에러가 발생할 수도 있으므로 아직 공유 페이지에는 등록하지 않았습니다. 며칠 테스트해보고 문제가 없으면 공유 페이지에 등록하겠습니다. 공..

몇 년전 비주얼 스튜디오 코드가 처음 등장했을 때 서브라임 텍스트를 베낀 텍스트 에디터라는 오명을 달아줬습니다. 이 글을 보면 이에 대한 이야기가 나옵니다. 며칠전 매일 구독하는 웹디자이너 뉴스에서 비주얼스튜디오 코드에 관한 이야기가 있어서 둘러봤습니다. 새로 설치하고 테마를 변경하려고 봤더니 1,500여개의 테마가 개발돼있더군요. 이전 글에서는 겨우 3개만 있었는데 말이죠. 테마를 검색해 설치하는 방법을 알아보겠습니다. https://code.visualstudio.com/ 위 화면에서 OS별로 다운로드 받을 수 있습니다. https://marketplace.visualstudio.com/ 위 화면에서 theme으로 검색하면 다운로드 받을 수 있습니다. 어마어마한 커뮤니티입니다. 커뮤니티가 잘 형성돼야..

본고딕에 이어 본명조가 작년에 출시됐습니다. 명조체는 웹에서는 잘 사용하지 않는데 혹시 큰 글자로 사용할 수도 있기에 웹폰트로 경량화 해봤습니다. 원래의 폰트가 otf로 제작됐는데 뭔가 잘못된 것인지는 몰라도 웹폰트 변환이 잘 안됩니다. 따라서 woff2 버전이 안돼서 woff 버전만 포함했습니다. 압축해제하면 아래와 같습니다. fonts 폴더에 7개의 폰트를 모두 넣었습니다. 사이트에서 css 파일에 아래와 같이 css 파일을 연결해주면 됩니다. @import url('NotoSerifKR/noto-serif-kr.css'); body, h1, h2, h3, h4, h5, h6, p {font-family:'NotoSerifKr-Regular', serif !important;} 16px로 했을 때 영..

국내의 경우 네이버, 카카오톡의 가입자가 아주 많습니다. 한사람이 둘 다 가입했을 수도 있고 둘 중 하나는 대부분이 가입이 돼있을 수 있습니다. 게다가 페이스북도 아주 많은 사용자가 가입돼있습니다. 트위터, 구글계정도 마찬가지죠. 이들 소셜 사이트에 가입한 사람이 워드프레스 웹사이트에 손쉽게 회원가입하도록 하려면 소셜 로그인 기능을 추가하면 됩니다. 소셜 로그인 기능이 추가된 워드프레스 웹사이트에서 발생할 수 있는 문제점을 알아보고 과연 필요한 기능인지 판단해보겠습니다. 우선 워드프레스에 기본적으로 설치돼있는 회원가입 기능을 알아보겠습니다. 회원가입이 활성화 된 워드프레스 사이트에서는 백엔드에서 기본적으로 로그인이 가능하고 회원가입도 가능합니다. 백엔드를 허용하는 것은 비밀번호와 아이디의 무차별 대입 공..

tvn의 즐거운이야기체를 웹폰트로 경량화했습니다. 원본은 아래의 사이트에서 받을 수 있습니다. http://tvn10festival.tving.com/playground/tvn10font 압축을 풀면 아래와 같은 그림이 포함돼있습니다. 특수문자나 일부 안쓰이는 한글을 입력하면 위 그림처럼 나옵니다. 웹폰트 경량화 버전에서도 위 의도를 살려 특수문자와 그림문자를 포함시켰습니다. woff2 버전이 300kb입니다. 보통 고딕체가 가장 용량이 작고 그다음으로 명조체가 용량이 크고 자유체나 필기체 등 다양한 형태의 폰트는 용량이 가장 큽니다. 키보드에 없는 특수문자와 그림문자는 아래의 글자를 입력하면 사용할 수 있습니다. 핳햫헣혛홓훃훟흏홓훃힣햏헿롲롳롴롵롶롷롞롰※ ☆ ★ ○ ● ◎ ◇ ◆ □ ■ △ ▲ ▽ ▼ →..

"이롭게"라는 명조체 폰트를 경량화 한 버전입니다. "이롭게"는 아래의 사이트에서 데스크탑 버전과 웹버전을 받을 수 있습니다. http://font.iropke.com/batang/#download 웹버전의 용량이 962KB인데 거의 1mb에 달해서 속도가 생명인 웹사이트에서는 경량화가 필요합니다. 원본버전은 모든 한글 글자를 표현할 수 있지만 경량 버전은 한글에서 많이 쓰이는 2350 글자만 추려낸 것입니다. 용량이 WOFF는 263KB이고 WOFF2는 166KB입니다. demo.html 파일을 열면 다음과 같이 나옵니다. Glyphs & Languages 탭을 클릭하면 아래와 같이 포함된 모든 글자를 볼 수 있습니다. 한글의 아름다움을 잘 표현한 폰트로 생각됩니다.

티몬의 몬소리체 웹폰트입니다. 아래의 글에서 라이센스에 관해 알아봤는데 거의 제한이 없을 듯해서 웹폰트로 공개합니다. https://brunch.co.kr/@creative/32 이곳의 라이센스 내용을 보면 다음과 같습니다. 댓글에 웹폰트 변환에 관련한 문의를 달았으나 이전의 댓글들도 거의 답변이 없어서 제한이 된다는 알림을 받거나 이글에 댓글을 달아주시면 글을 내리도록 하겠습니다. 압축을 풀면 다음처럼 파일이 있습니다. demo.html 파일을 열면 아래처럼 나옵니다. 제목체로 쓰기에는 좀 부담스럽고 배너나 슬라이더의 큰 글씨체로 사용하는 것이 적당하다고 생각됩니다.

입력상자(text input box)마다 클릭하면 위처럼 거추장스러운 autocomplete 텍스트가 나타나는데 원하지 않는 것을 제거하는 방법입니다. 입력상자에 클릭하면 제안된 텍스트가 나오고 이때 상하 방향키를 누르면 하이라이트 됩니다. Delete키나 다른 키조합으로 눌러주면 제거됩니다. 크롬의 경우 Shift + Delete 키, 파이어폭스는 Delete키입니다. OS 환경에 따라 다르니 키조합은 Ctrl 키가 될 수도 있고 fn 키가 될 수도 있습니다. 삭제될 때까지 여러 가지 키조합을 찾아서 삭제합니다. 삭제된 후 다른 행도 지우려면 다시 방향키를 누르고 키조합을 이용해 제거하면 됩니다. 위 방법은 일반적인 입력상자의 경우이고 로그인 입력상자는 다릅니다. 로그인 아이디와 비번까지 지우는 방법은..

보안인증서 설치의 의무화가 현실적으로 다가오고 있습니다. 고객의 정보를 수집하거나 처리하는 웹사이트의 경우 보안인증서의 설치는 의무이고 이를 이행하지 않으면 벌금을 물도록 돼있으나 현실적으로 벌금으로 처벌되는 경우를 보지는 못했습니다. 하지만 올해들어 페이스북의 고객정보 도용사건으로 인해 유럽연합에서는 개인정보처리방침의 강화로 이어졌고 구글도 7월부터는 SSL을 설치하지 않은 웹사이트는 도메인 앞에 주의요함(Not Secure)가 표시되고 SEO에서도 감점됩니다. 보안인증서(보안서버, SSL Cetificate)의 역할은 고객이 정보를 입력할 때 웹사이트의 소유자가 이를 알 수 없게 암호화시키는 것을 주로합니다. 예를들어 어떤 해커가 쇼핑몰을 만들어놓고 보안인증서를 설치하지 않은 상태에서 고객의 정보 특..

피싱 메일은 항상 주의하는데 너무 상세하기에 한번 당한적이 있습니다. 위 메일은 작년 10월에 받은 메일인데 내용만 읽어보고 무슨일이 있나 싶어 "구독검토" 버튼을 클릭하고 로그인까지 했었습니다. 일반적으로 네이버에 로그인이 돼있으면 다시 로그인 할 필요가 없다는 생각에 다시 위 화면에 돌아와 보니 보낸 사람 이메일이 네이버가 아닙니다. 또한 안녕하세요. 다음에 보통 이름이 들어가는데 이메일 주소로 돼있습니다. 즉 소유자의 이름은 알 수 없으니 메일 주소를 사용한 것이죠. 바로 비번변경하고 로그인 기록을 봤습니다. 네이버 홈에서 아이디 옆의 "내정보" 클릭, 보안설정 탭을 클릭하면 위 화면이 나옵니다. 참고로 해외로그인 차단과 새로운 로그인 알림을 활성화 해두는 것이 좋습니다. 내활동 기록 보기의 확인하..

워드프레스가 5.0 버전에서 아주 새로운 편집기를 도입합니다. 구텐베르그 편집기라고 합니다. 그동안 단순한 글만 입력할 수 있었던 클래식 편집기에 비해 아주 복잡해지고 다양한 콘텐츠를 입력할 수 있게 돼있습니다. 아주 새로운 시도이므로 시험단계를 거칩니다. 워드프레스 4.9.8 버전에서 구텐베르그 편집기가 플러그인 형태로 설치할 수 있게 됩니다. 클래식 편집기를 계속 사용할지 선택할 수 있습니다. https://wordpress.org/wordpress-4.9.8-RC2.zip 당초 8월 1일 출시 예정이었으나 버그 수정으로 인해 RC3 버전을 내놓고 한번 더 테스트해야 합니다. https://wordpress.org/wordpress-4.9.8-RC3.zip 한국 시간으로 8월 3일 정식 출시 예정입니..

저는 워드프레스 한글화 공식 번역자로 작업을 하고 있습니다. 번역이 개인의 취향대로 이뤄지다보니 개개인의 기호대로 번역이 이뤄지고 있어서 워드프레스 공식 번역사이트에서 마음대로 번역 수정이 이뤄지고 있습니다. 일관성도 없고 통일성도 무시되고 있습니다. 그래서 그동안 번역을 하고 워드프레스 번역사이트에 업로드 했는에 앞으로는 이곳에 업로드하지 않고 제 블로그인 이곳에 업로드 할 것입니다. 필요하신 분은 여기서 다운로드 해 사용하시거나 번역사이트 편집권한이 있으신 분은 필요하시면 이곳의 파일을 업로드 하세요. 멋대로 수정해 사용해도 좋습니다. 이전에도 우커머스 한글화를 제가 작업했는데 개개인의 수정이 아주 많이 일어나 개판이 됐고 더이상 우커머스 번역을 업데이트 하지 않고 있습니다. 위와같은 방법을 취해서라..

웹개발을 하다보면 크로스 브라우징은 필수입니다. 모든 브라우저에서 같은 모양의 디자인과 깨짐이 없는 레이아웃이 나와야 하는 것이죠. 가장 문제가 되는 것이 인터넷 익스플로러(IE)입니다. 오랜 기간 독점을 해오다 보니 웹표준을 지키지 않아도 됐기에 표준 코드를 사용하지 않는다 한들 어떤 규제가 없었던 것이죠. 과거 거의 전세계 시장을 90% 이상 차지하던 IE 브라우저 점유율은 속도 빠르고 웹표준을 잘지키는 파이어폭스와 크롬의 출현으로 점유율이 서서히 줄어들다가 이제는 3% 대로 대폭 줄었습니다. 아직도 레이아웃이 이상하게 나타나고 크롬에서는 잘 보이고 작동이 잘되는데 유독 IE에서는 작동이 안되거나 깨져서 나타나고 있습니다. 이런 것을 해결하는 것이 개발자의 일이죠. 오늘은 고객과의 상담중 고객의 고객..

워드프레스 4.9.6이 현재 가능합니다. 이것은 개인정보 및 유지관리 릴리즈입니다. 새로운 개인정보 기능을 사용하려면 업데이트 하시길 권장합니다. 개인정보유럽연합의 일반 데이터보호 규칙(General Data Protection Regulation (GDPR))이 5월 25일부터 발효됩니다. GDPR은 회사 및 사이트 소유자에게 개인 데이터를 어떻게 수집, 이용, 공유하는지에 관해 투명하게 할 것을 요구하고 있습니다. 또한 개인으로 하여금 자신의 개인 데이터가 어떻게 수집, 이용, 공유되는지에 관해 더 많은 접근 및 선택을 부여하고 있습니다.GDPR은 유럽연합의 규칙이지만 그 필수사항은 모든 사이트와 온라인 비지니스가 어디에 위치하는지에 상관없이 유럽연합 거주자에 관한 개인 데이터를 수집, 저장, 처리할..

워드프레스가 4.9.6 버전으로 업데이트 되면서 개인정보 도구가 새롭게 추가됐습니다. 메이저 업데이트도 아닌데 번역량도 아주 많았습니다. 개인정보와 관련해서 별도로 기능을 추가해야 할 만큼 중요한 기능인지는 모르겠습니다만 최근의 페이스북에서 일어난 개인정보 관련 사건에서 보듯이 웹에서 개인정보의 중요성이 강조되고 있는 것 같습니다. 주메뉴에서 설정 - 개인정보 메뉴를 클릭하면 위와같은 화면이 나옵니다. 이곳에서 개인정보 처리방침 페이지를 만들 수 있습니다. 새 페이지 생성하기 버튼을 클릭하면 자동으로 페이지가 만들어집니다. 콘텐츠가 이미 만들어진 상태로 페이지가 나타납니다. 가이드 참고 링크를 클릭하면 각 항목에 어떤 내용을 추가해야할지 안내를 볼 수 있습니다. 국내법이나 국제법에 따라 어떤 내용이 필요..