February 2007 Archives

Processing

| No Comments | No TrackBacks

담배를 피다가 문득 기억이 나서 다시 까먹지 않도록 적어둔다. 옛날에 구글링을 하다가 알게된 Processing '99이라는 흥미로운 오픈소스 프로그래밍 언어이자 플랫폼이다. Java Applet 또는 QuickTime Java를 이용해서 Web 상에서 표현이 가능하다.

Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

위의 주소 말고도 예전에 Processing 포럼도 있었으나 사라졌는지 찾을 수가 없다.

Adobe TED 2006에서 NYU의 Jefferson Y. Han에 의해 시연된 Multi-touch Interface Interaction Demo. 그의 사이트에서 더 많은 연구 결과물들을 QuickTime 동영상으로 볼 수 있다.

Multi-touch Interface를 일상에서 찾아볼 수 있는 디바이스의 예는 대표적으로 Apple 랩탑 시리즈의 트랙패드와 iPhone이다. iPhone의 경우 대부분 Single-touch이지만, 지금까지의 Apple의 행적을 보았을때 iPhone과 임베드된 Mac OS X는 리비전 또는 펌웨어 업데이트를 통해서 더 확대 적용될 가능성이 크다고 본다. 위의 데모와 Mac OS X에서 사용된 ZUI에 대한 상세한 내용은 다음에...

Firefox 3 Passes Acid2 Test

| No Comments | No TrackBacks

Digg에서 Mozilla Firefox 3가 Acid2 테스트를 통과했다는 지난 소식을 보고, Minefield 3.0a3pre 버전을 설치해 봤다. 역시나 아래 결과와 같이 제대로 렌더링이 된다. Acid2 테스트는 User Agent가 HTML과 CSS를 작성된 코드의 상관관계에 맞게 제대로 표현을 해주는가에 대해서 사용자가 테스트할 수 있는 방법이다.

여기에서 가장 최근 Nightly Snapshot을 다운로드 받을 수 있다. 참고할 점은 Acid2 테스트를 통과하긴 했지만, 개발중인 버전이므로 다른 버그들이 존재한다.

지금까지 CSS를 가장 올바르게 표현해주는 WebKit (aka. KHTML) 엔진을 사용하는 Apple Safari를 주로 사용하고 Firefox와 IE를 사용하는 방법을 썼었다. 작업시에 Firefox를 주로 사용하지 않은 이유는 CSS 렌더링에 버그가 있었기 때문이다. W3의 스펙 그대로 작성했을 경우 시각적으로도 정확히 표현된다면 어떤 브라우저든 사용이 가능하겠지만, 아직은 어려운 점이 있다.

하지만 이건 어디까지 개발자의 기준이고, 중요한건 사용자의 브라우저에서 제대로 보이는게 우선이기에 개발시에 각 브라우저로 테스트를 해보는 수 밖에 없다. 코드는 중립성을 지켜야 하고, 버그에 대한 해결책이나 우회가 안되는 최악의 경우 코드를 갈아 엎는 수 밖에 없다.

마지막으로 Firefox의 차기 버전에 대한 개인적 바램은 탭 닫기 버튼의 위치 변경, Quartz Extreme 지원과 Cocoa로 빌드 되었으면 한다.

Best Programming Language

Ruby가 독보적으로 1위를 달리고 있다.

Best Text Editors

TextMateVim과 큰 격차를 두고 1위다.

저번에 보았을때랑 순위가 약간 바뀌긴 했지만, 사람들이 너무 몰아주는거 아닌가 싶긴 하지만 Ruby와 TextMate는 편하고 좋긴하다. 하지만 3, 4위까지 랭크된 다른 언어랑 에디터도 충분히 좋고 어떤 점에선 더 뛰어나다. 재밌는 것은 상위에 랭크된 대부분의 에디터중 Mac OS용이 많다는 것...

Allan은 Leopard 출시 이후에 CoreText를 이용해서 기존 1.5 사용자들에게 TextMate 2.0을 무료로 업그레이드 해주겠다는데, Snippets를 비롯해서 편리한 기능들이 인종차별 주의자가 아닐까 의심이 갈 정도로 single byte char rendering 영향으로 CJK 입력 문제는 심각했다. 과연 2.0에서 얼마 만큼 CJK Support를 해줄지 기다려진다.

더 많은 랭크들은 UnSpun에서 볼 수 있다.

바보 짓하는 정부

| No Comments | No TrackBacks

최근 Windows Vista가 출시되어 여러가지 말들이 많은데, 그 중에 재밌는 것은 ZDnet에 올라온 윈도우 비스타에 대한 정통부 기자회견이다. 동영상을 보면 알겠지만, 정통부의 기자회견 내용은 은행에서 사용중인 ActiveX를 통해서 공인 인증서를 기존 방식대로 사용하기가 어렵기 때문에 기존 ActiveX를 사용하기 위해서 Windows Vista의 핵심 기능인 UAC 보안 레벨을 낮추도록 우회하는 방법을 2월까지 고안해내기 전에 MS사에서 판매중인 Windows Vista를 사용하거나 구매하지 않기를 당부하는 내용이다.

이전에는 정부가 Microsoft사에게 국내에 출시될 Windows Vista의 보안 레벨을 낮춰달라는 전대미문의 요청을 했다. 정부는 Windows 98과 XP SP2 업데이트에 대해서도 사기업 MS에게 어리광을 부리기도 했다. 이러한 병신짓은 Slashdotted 되었고, 대한민국 정부가 Microsoft라는 사기업에게 머리를 조아리는 병신짓을 한것으로 World Wide 바보 국가로 유명세를 타게 되었다.

담당 기관이 수수방관 하다가 뒤늦게서야 Windows Vista에서 기존 ActiveX를 어떻게든 주섬주섬 동작시키려고 발버둥 치는 모습이 참 안타깝기 그지없다. 그 동안 오픈웹 캠페인을 비롯해서 여러가지 이슈들이 많이 나왔기에 더 상세히 설명할 필요는 없고, 공인 인증서라는 엿같은 제도를 개선하거나 없애지 않는 이상 Windows 업데이트가 나올때마다 뒤늦게 땜질해댈건 안봐도 비디오다.

공인 인증서가 과연 금융기업과 사용자에게 편리함과 체계적인 보안 서비스를 줄 수 있을까? 난 회의적이다. SEED 또한 그렇다. 아무리 미국이 128bit 암호화 기술 어쩌구 저쩌구... 구차한 변명은 소용없다. 세월도 꽤 흘렀고 지금은 2007년이다. 국민의 세금으로 대체 뭘하는건가? SEED 암호화 알고리즘 자체는 훌륭할지 모르나 보편적인 암호화 기술이 아니다. Mozilla Firefox에 SEED 모듈을 기본 내장하겠다는 이야기도 나왔으나, 그건 어디까지나 Mozilla 얘기고...

정부는 국민 세금 뜯어서 뻘짓하지 말고 그냥 다른 나라처럼 SSL 인증에 가상 키보드 입력같은 기술로 고치는게 나을 것이다. 변경에 따른 비용부담 보단 지금처럼 허술한 시스템 때문에 업데이트마다 나라가 휘청거리고 사기업에서 우회 솔루션을 개발할때까지 손가락 쪽쪽 빨지 않아도 되고, 매킨토시, 리눅스, 파이어폭스, 오페라 등등 사용자들한테 욕 안먹어도 된다. 지금 처럼 근시안적인 우회 방법만 고심할게 아니고 중장기적으로 바라 본다면 훨씬 나은 선택이리라.

잠깐 ActiveX와 Windows 이야기를 해보자면, 기존 Windows는 UNIX 기반의 Linux, Mac OS X 처럼 root 최고 권한과 사용자 권한이 따로 분리되어 있지 않고, 사용자 생성을 하게 되면 최고 권한을 갖게 되어 있다. ActiveX를 설치할 때 동의를 물어보는 과정에서 ActiveX는 사용자의 최고권한을 얻게 되고 시스템의 구석구석을 마음대로 주물럭할 수 있다. 이런 문제점도 있기에 MS가 Java Applet에 대항해서 ActiveX 만들었을 때도, 수많은 보안관련 전문가들은 우려의 목소리를 높였고 결국 이젠 MS도 거의 내다버린 자식마냥 대하고 있다.

Windows Vista는 코드명 Longhorn 시절부터 내세우던 WinFX와 같은 핵심기능이 별다른 개발진전이 없었고, 빌 게이츠는 Trust-worthy Computing이라는 말을 2002년도에 꺼내기 시작했다. 차기 Windows 개발 방향은 보안에 중점을 맞추고 개발이 되었고, UAC (User Account Control)이라는 보안 시스템을 Vista 버전의 강점으로 꼽고 있다.

지금까지 Windows의 무수히 셀수도 없을 만큼의 보안 구멍이 뚫려 있었고, 그렇기에 안티바이러스 회사들이 타 OS에 비해서 많으며, Vista 버전으로 인해서 높아진 보안레벨로 인해 MS는 Symantec 같은 회사와 서로 으르렁대는 상황이다. MS 또한 사활을 걸고 꽤 보안에 대해서 신경을 썼음을 짐작할 수 있는데, 국내 사기업에서 만든 보안용 ActiveX와 공인 인증서를 사용기 위해서 이러한 UAC 보안 레벨을 사용자보고 낮추라고 기자회견까지 열은 정부는 도대체 무슨 생각을 갖고 있는건가?

보안이 가장 중요한 온라인 뱅킹 서비스를 이용할땐 보안 레벨을 낮춰서 ActiveX를 사용하고, 온라인 뱅킹 이용이 끝나면 다시 사용자가 보안 레벨 설정을 올려서 사용해야 하나?

그리고 은행도 사기업이긴 하지만 공공재적인 성격을 띠고 있음을 스스로 잘 알것이다. 그렇다고 안철수 연구소의 V3 디스트리뷰터도 아니면서 비싼 돈주고 사용자에게 V3 백신에 키보드 후킹 방지 등등 ActiveX 프로그램을 왜 설치하게 해주나? 세상에 사용자 보안위험을 걱정해서 사이트에 접속할때마다 안티바이러스에 방화벽 프로그램까지 설치해주는 나라는 우리나라 밖에 없다. 키 로거, 방화벽, 안티바이러스 어플리케이션은 사용자가 직접 구매해서 설치해야하는 것이지, 정부나 기업이 ActiveX로 배포하는게 어딨냔 말이다. 정부는 어디까지나 보안에 대한 문제는 사용자 개개인의 문제란걸 인지할 필요가 있다.

은행에서 배포하는 보안용 ActiveX에 대해서도 참 웃긴게, 보안은 어차피 창과 방패인데, ActiveX로 되어 있건 아니건 어떤식으로든 우회를 해서라도 보안을 비켜갈 수 있다. 그리고,

은행은 어디까지나 온라인 뱅캥 서비스에 대한 기본적인 보안만 하면 된다. 지금처럼 은행이 사용자에게 각종 보안관련 ActiveX를 설치하지 않으면 서비스 이용이 불가능하도록 하는 것은 보안사고가 발생했을때 사용자 당사자가 아니라 은행이 그에 대한 책임을 물어야 한다. 개인의 계좌 이용에 있어서 개인 보안은 어디까지나 사용자 몫이다.

G-market에서 얼마나 급했으면 오타까지 내면서 사용자들에게 보안레벨을 낮추라고 광고까지 때리나.. 이게 다 조류독감 걸린 정부 때문이다. 억울하다 해도 소용없다. 이런 닭짓하는데 아까운 국민세금 끌어다 쓰지 말고 똑바로 좀 합시다.

웹 표준 관련 직업

| No Comments | No TrackBacks

웹 표준과 접근성을 주업으로 삼는 직업을 부르는 이름들이 몇가지나 있을까 하는 궁금증에 정리해 보았다.

  • Front-end Web Development Engineer
  • UI Engineer
  • UI Developer
  • Semantician
  • Web Publisher

그리고, 웹 표준과 접근성에 대해서 알리는 직업을 일컬어 다음과 같이 부른다.

  • Web Opener
  • Web Standards Evangelist

Web Opener는 Opera에서 칭하는 말이고, Web Standards Evangelist는 Molly E. Holzschlag 아줌마가 유명한데, 개인적으론 Evangelist라는 단어는 특정 종교적 색채가 강하기에 그다지 좋아하는 편은 아니다.

다음은 각 직업에 대한 설명과 갖추어야 할 요구사항이다. 자료는 Apple사의 설명을 참조했다.

Front-end Web Development Engineer

Job description

We are looking for a passionate and talented individual to help us fill out our front-end creative web engineering team. If you are excited by the amazing possibilities of JavaScript, HTML and CSS, and have an eye for usability, style, and design, we want to hear from you. We're busy making the Apple Store the most innovative and usable site in e-commerce, and that requires some very creative minds applying the latest in high tech front-end web technologies.

Responsibilities

Build slick, innovative UI components using semantic HTML, CSS and JavaScript Work directly with other engineers to integrate AJAX components with a highly scalable backend Advocate design and usability in the product development process Improve and maintain cross-browser compatibility.

Requirements
  • Passion for developing the highest quality software and pushing the limits of internet technologies and user expectations
  • Experience in a professional development environment with source-code control and back-end dependencies
  • 3-5 years development experience working on front-end for a large-scale, highly-trafficed site
  • Expert capability in the following web technologies: HTML, CSS, JavaScript, AJAX
  • Experience with design tools: Photoshop, Illustrator, Fireworks or equivalent
  • Expert cross-browser CSS/JavaScript knowledge

Ajax의 경우 Web Developer가 하는 경우가 종종 있지만 점점 분리되는 경향이 되지 않을까 싶다. Web Designer 또는 Visual (Interface) Designer에 대한 요구사항도 하나 더 보자면 아래와 같다.

Web Designer

Job description

In this position you will combine your visual design talents with your interaction design knowledge to deliver dynamic and engaging user experiences. You must be able to work independently as well as with a design team, to provide visual design, creative direction and input, and user-centered analysis for a variety of projects including page layouts, iconography, visual vocabularies, graphic and multi-media assets for marketing campaigns and web sites, information architectures, and sound interaction models and task flows. Responsibilities will vary from project to project and will range from conceptualizing the user experience andor creative direction to execution of production-ready artwork, all within specified guidelines and deadlines.

Responsibilities
  • Participate in early concept development and design ideation.
  • Create visual designs that address business, brand, market, and user requirements, including the design of screen layouts, color palettes, typography, and user interface elements.
  • Collaborate with cross-functional team to refine product requirements; then translate product requirements into a best-of-breed user interface design.
  • Create and be accountable for the user interaction model, workflows, information architecture, and interface guidelines
  • Participate in or conduct design reviews; Iterate on designs based on the results of design reviews, usability testing, and customer walkthroughs.
  • Work hand in hand with web developers and engineers to deliver the final product
  • Responsible or project communication and asset exchange throughout all phases of projects
  • Contribute to a culture of innovation and teamwork.
Requirements
  • Bachelor's or Master's degree in Graphic Design, Digital Media Design or other visual arts, Human Factors, HCI, or other related field
  • At least 3 years professional design experience.
  • Ability to understand complex design problems and generate tangible ideas to solve.
  • Must demonstrate strong interaction design skills and have a solid understanding of user centered design principles and design patterns
  • Excellent interpersonal and communication skills
  • Ability to work independently and collaboratively
  • Ability to communicate design rationale
  • Ability to prioritize and manage work to critical project timelines in a fast-paced environment
  • Solid understanding of web application and website design with working knowledge of HTML a plus

자료를 찾아 보면서 느낀 점은 직업에 대한 명칭이나 범위가 국내에 비해 외국 개발사들이 좀 더 세분화 되어 있더라는 것이었다. 세분화된 만큼 각자의 영역은 적정선에서 유지되도록 구성되어 있으며, 누가 되었든 Web 2.0과 Standards는 기본 요구 또는 이해사항이었다는 것이다.

그리고, 위에 인용된 내용은 Apple에서 요구하는 사항이 일반적인 내용일 수 있으나 공통사항이라고 보긴 힘들고, 대충이나마 자신이 어떠한 것들을 가지고 있으며 필요한지에 대해서 가늠해볼 수 있을것 같다.

기획자

국내에서 기획이라고 칭해지는 분야를 보자면, 기존 컨텐츠를 재분류하고 정리 및 통합하고 기존 사이트의 문제점 및 비효율성을 다시 효율적으로 구성하고 보다 나은 서비스로 개선함을 덕목으로 삼아야 한다.

하지만, 흔히들 '방법론'이라고 불리우는 업계 개발과정을 보자면, 너무나 비효율적인 컨베이어 시스템으로 인해서, 촉박한 기간 동안 무수히 많은 PowerPoint 파일과 피사의 사탑과도 같은 종이 문서를 만들어내야 한다. 만드는 사람, 옆에서 그걸 보는 사람 모두 고역이자 고통이다.

PowerPoint는 Presentation을 하기 위한 편집 에디터이지만, 언제 부턴가 국내에선 기획을 위한 전용 툴로 널리 쓰이게 됐고, 제한된 다이어그램과 컬러를 이용해서 UI 개발자가 해야될 UI 구성을 기획자가 하곤 한다. 전문적인 UI, UX에 대한 이해가 부족할 경우 결코 좋은 바탕을 갖추지 못하고, 디자이너가 최대한 알록달록 컬러와 플래시 신공 또는 귀여운 캐릭터 붙여주기 신공을 펼쳐야 한다.

웹 사이트의 목적이 Redesign이 아닌 이상 이러한 일들까지 기획자가 전적으로 해야함으로 인해서 실제 웹 사이트 구성이나 개선에 대한 부분은 현저하게 낮아질 수 밖에 없다. 기획자 스스로 PowerPoint에서 벗어나서 무의미한 문서 찍어내기 풍토에서 벗어나려는 노력과 함께 정확한 기술, 마케팅, 디자인, 사용자 경향을 파악해야 한다.

아무리 머릿속에서 미칠듯이 아이디어가 샘솟는다 한들 판타지 소설을 쓸 순 없지 않은가. 한국어가 아 다르고 어다르다고 하지만 그게 그걸로 판단하는 사람도 많기에, 스스로 생각과 지식을 올바른 길로 정립하지 않으면 어느샌가 자신도 모르게 넷피아 이판정 사장과 같은 Web 3.0 마인드를 가지게 될지도 모를 일이다.

개발자

협업의 과정중에서 다양한 개발자들과 일을 하는 과정에서 웹 표준과 접근성에 대해 이해는 둘째 치고 과연 HTML에 대해서 지식이 있는가에 대한 궁금증이 발생할 때, 조금은 묘한 기분이 들게 된다. 개발자들 중에선 HTML 비동적 마크업 언어라는 선입견 혹은 JavaScript를 하찮게 생각하는 경우를 종종 보게 되는데, 이러한 의식을 가진 사람들과 작업하게 되면 온전한 HTML 문서와 스크립트를 프레임웍에 넣게 되는 과정에서 웃지 못할 일들이 발생하게 된다.

문서의 형식을 알려주는 Doctype 엄마는 이미 집을 나간지 오래고, body 아들과 iframe 딸들만 무수히 남아있고, JavaScript 삼촌은 IE DOM양과 눈이 맞아 불러도 본체만체 하더라는 것이다. 그나마 이런 문제에 대한 제기를 하고 수정이 이루어지면 다행이지만, 귀찮아 하거나 시간이 없다고 하거나 자체 개발된 프레임웍이 이 모양이라서 안됩니다라는 반어법이 들리면 참 암울할 따름이다.

서버 사이드에서 이루어지는 복잡한 프로그래밍이 결국은 HTML 문서를 Front End에 배포하기 위함이란걸 잊지 말자.

디자이너

어느샌가 Photoshop의 창은 나의 끓어 넘치는 아트함을 마음껏 표현할 순백색의 도화지로 변하고 내 마우스는 붓이 되어 Color Picker를 요리조리 찍어보니 어느 샌가 멋진 풍경화가 눈 앞에 펼쳐지더라. 덤으로 썩 귀여운 캐릭터도 하나 달아주자.

그래, 이런 것이 머리털 쥐어 뜯어가며 고뇌해온 Creative 일수도 있다. 하지만, 웹 페이지는 어디까지나 그림 그리는 도화지가 아니라 문서다. 쉽게 말하자면 어릴때 학교에서 배웠던 편지 양식과도 같은 것이라고 생각하면 된다.

이런식의 Creative 명목하에 잘게 나뉘어진 GIF 파일들과 DreamWeaver로 weave한 테이블들로 인해 발생되는 트래픽은 고스란히 서버 비용과 사용자 트래픽 증가로 인해서 KT 메가패스나 LG 파워콤 같은 ISP 업체들이 인터넷 이용료를 더 올릴지도 모를 일이다. 물론, 이미지나 테이블을 줄인다고 해서 ISP 업체들이 가격을 내릴 일은 없겠지만 말이다.

이렇게 전문적인 UI, UX에 대한 지식이 부족할 경우 지그재그 바둑판 형식 레이아웃과 게시판 목록 좌판 늘어트리기가 되는 경우는 허다하다. 디자인에 대한 고민은 예쁘게 그리고 레이아웃은 같지만 벤치마킹한 사이트랑 뭔가 다르게 보여줘야 하는게 아니다.

Select Box를 Rounded Corner로 포토샵질 해놓고, 요즘 유행하는 Rounded Corner가 이번 웹 사이트의 기본 컨셉이다라고 까지 말한 디자인 팀장이 있다는 이야기도 들은적이 있다. 디자이너 스스로 웹 표준과 접근성에 대한 기술적 이슈를 이해하고 있다면 이런 초현실주의 디자인은 나오지 않을 것이다. 요즘 같은 시대에 사내에서 UI, UX에 관한 업무를 기획자만 하고 있다면, 아마 다른 사람들보다도 디자이너들이 가장 노력해야되지 않나 생각된다.

PM

Project Manager. 별로 생각나는건 없음.

클라이언트

Portal Service라는 단어가 한창 유행하던 시절부터 지금까지 너도 나도 포털이다. 구글에서 포털이라고 키워드를 넣으면 공무원 급여 포털까지도 존재한다. 자신의 사이트가 Yellow Page 역할을 한다거나 네이버 처럼 사용자들이 딴데 안가고 사장님 이력사항까지 즐겁게 읽을 요량이 아니라면 다시금 생각해보자. 홍보가 목적이었다면 홍보차원에서 끝내자.

그리고 무슨 찌라시도 아니고 사장님 이력사항 이딴건 좀 뺐으면 하는게 개인적 바램이다. 담당자라면 영문이고 일본어고 다국어 페이지에 euc-kr로 인코딩 되어 있으면 utf-8 고치자고 의견을 제시할 정도로 기본적인 역량은 갖추자. 우리 사이트를 알고 개발사를 알면 백전백승이다.

요즘 Weblog, Web 2.0, UCC, 사용자화 등등 단어가 급속도로 유행으로 퍼지는데, 과연 이게 우리 사이트에 필요한가 하고 골똘이 생각해보자. 아니 이건 기획자의 몫일수도 있다. 웹 기획자로 전업할 생각이 없다면 기획일에 너무 깊게 관여하진 말자. 또한 자신의 미적 감각을 디자이너에 알리기 위해 솔선수범하지 말자.

마지막으로, 웹 사이트 개발을 왜 위탁하는지와 자기 회사 사이트가 왜 이번에 개편을 하는지에 대해서 곰곰히 생각해보자.

혼용된다고 생각되는 전문 용어

  • 기획서 - 명세서
  • 메인화면 혹은 메인페이지 - Index Page
  • Depth - Level
  • Story Telling - Flow
  • Renewal - Redesign, Relaunch
  • Coding - Markup

마지막으로

틀리거나 열받거나 이상적인 내용도 있을지 모르겠지만, 농담반 진담반으로 받아들여 주시면 감사하겠습니다.

HTML과 HTM 확장자

| No Comments | No TrackBacks

흔히 웹 서핑을 하다 보면 URL에 index.htm 혹은 index.html과 같은 확장자를 쉽게 볼 수 있다. htm과 html 확장자 사이에 어떤 차이점이 있을까? 사실 중요한 차이점은 없다. 차이점이라면 htm 확장자엔 'L'이 없다.

흔히 Apache와 같은 Web Server에선 아래와 같이 MIME Type을 서버 관리자가 관리할 수 있다.

AddType text/html .html

현대의 웹 서버에선 html 확장자가 기본값으로 지정되어 있다. htm 확장자는 사용자 하위 호환성을 위한 확장자라고 볼 수 있는데, 오래된 역사를 가진 Unix를 비롯하여 현재의 대부분 OS들 처럼 파일명과 확장자의 문자 길이에 대한 제약이 없으나, 대중적으로 사용이 되었던 DOS/Windows 3.x 버전이 주류를 이루던 시절에는 파일시스템에서 지원하는 파일명과 확장자는 8.3 문자 길이로 제한되어 있었다. 그렇기에 htm 확장자를 많이 사용했으나, 현대의 웹 서버와 사용자의 OS는 이러한 제약이 없다.

결론은 htm과 html 확장자 모두 서버상의 MIME Type 지정에 의해서 동일하게 사용이 가능하다. html의 L까지 타이핑 하기가 귀찮다고 htm까지만 적는다는 사람도 보았지만, htm 보다는 html (HyperText Markup Language)이라고 모두 적어주는게 낫지 않을까 한다.

사용중인 iMac G5와 PowerBook G4를 포맷하면서 부가적인 어플리케이션 설치 과정을 까먹거나 빼먹는 경우가 종종 있었기에 메모 차원에서 작성되었습니다.

제가 기술한 내용들은 MacPorts (a.k.a. DarwinPorts) 또는 Fink를 사용하지 않고 Custom Build하기 위해서 입니다. 이러한 과정이 귀찮거나 지루하신 분들은 정목님의 Mac에서 Rails 개발환경 구축하기를 참고하시기 바라며, 설치 환경은 Mac OS 10.4 Tiger 기준으로 작성되었습니다.

참고한 사이트

A List Apart에서 System Developer로 활동중인 Dan Benjamin의 블로그, Apple Developer Center, PHPMac, Matías Giovannini, AFP548.com, TextDrive Weblog 등을 참고하였습니다.

어플리케이션과 라이브러리

아래의 목록과 설치에 대한 설명 순서는 절대적인 순서가 아닙니다. 중간에 부가적인 선택적인 어플리케이션이나 라이브러리가 있으므로, 자신의 환경에 맞게 설치하시면 됩니다.

Terminal 환경

처음 Mac OS X을 설치한 상태에서 Terminal을 실행하게 되면 기본적인 설정만 되어 있는 상태이므로, 아래의 경로의 .profile 파일을 열어 ANSI 컬러 사용과, Command Prompt, Path 지정을 위해 아래와 같이 코드를 추가 입력합니다.

vi ~/.profile
export LC_CTYPE=en_US.UTF-8
export TERM="xterm-color"
export CLICOLOR=1
export LSCOLORS=ExFxCxDxBxegedabagacad

PS1="\[\033[01;32m\]\u@\h\[\033[01;34m\] \w \$\[\033[00m\] "

export PATH="/bin:/sbin:/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:$PATH"

stty erase ^H

alias ls="ls -v"

한글을 사용할 수 있도록 .inputrc 파일을 생성합니다.

vi ~/.inputrc
set meta-flag on
set input-meta on
set output-meta on
set convert-meta off

"\e[3~": delete-char

아래와 같이 명령어를 실행합니다.

source ~/.profile
bind -f ~/.inputrc

backspace 키와 forward delete 키가 올바르게 동작하도록 Terminal.app의 Keyboard 섹션에서 Delete key sends backspace 활성화하고 del (forward delete) 맵의 값을 아래와 같이 지정합니다.

\033[3~

기본적인 Shell 환경 설정이 끝났으면, 소스를 다운로드할 디렉토리를 생성해야 합니다.

sudo mkdir -p /usr/local/src
sudo chgrp admin /usr/local/src
sudo chmod -R 775 /usr/local/src
cd /usr/local/src

Xcode

소스를 빌드하고 컴파일하기 위해서 Xcode를 설치해야 합니다. Xcode는 ADC 회원이어야만 다운로드가 가능하므로 회원가입을 하고 받으면 됩니다.

cURL

이제 본격적인 설치에 들어가게 되겠습니다. 순서는 Download, Unzip, Configure, Compile, Install 순으로 진행하게 됩니다.

curl -O http://curl.haxx.se/download/curl-7.16.1.tar.gz
tar xzvf curl-7.16.1.tar.gz
cd curl-7.16.1
./configure --prefix=/usr
make
sudo make install
cd ..

Readline

Ruby 설치에 앞서서 어플리케이션 빌드를 서포트해주는 Readline Library를 설치해줍니다.
curl -O ftp://ftp.cwru.edu/pub/bash/readline-5.2.tar.gz
tar xzvf readline-5.2.tar.gz
cd readline-5.2
./configure --prefix=/usr/local
make
sudo make install
cd ..

Ruby

이제 루비를 설치할 차례입니다.

curl -O ftp://ftp.ruby-lang.org/pub/ruby/ruby-1.8.6.tar.gz
tar xzvf ruby-1.8.6.tar.gz
cd ruby-1.8.6
./configure --prefix=/usr/local --enable-pthread --with-readline-dir=/usr/local
make
sudo make install
sudo make install-doc
cd ..

위의 과정을 거치게 되면 Mac OS X Tiger에 설치되어 있던 Ruby 1.8.2 (2004-12-25) 버전은 최신 버전으로 교체가 됩니다. ruby -v 커맨드로 버전을 확인할 수 있습니다.

$ ruby -v
ruby 1.8.6 (2007-03-13 patchlevel 0) [powerpc-darwin8.9.0]

RubyGems

RubyGems는 루비 패키지 설치를 관리하는 커맨드라인 툴입니다.

curl -O http://rubyforge.rubyuser.de/rubygems/rubygems-0.9.2.tgz
tar xzvf rubygems-0.9.2.tgz
cd rubygems-0.9.2
sudo /usr/local/bin/ruby setup.rb
cd ..

Ruby on Rails

RubyGems가 설치되었으면, 아래의 커맨드로 Rails를 설치합니다.

sudo gem install rails --include-dependencies

Mongrel

Mongrel은 빠르고, Stand-alone HTTPD 라이브러리이며 FastCGI, SCGI, LightTPD, Apache와 같은 루비를 위한 서버입니다. Rails 어플리케이션을 컴파일 과정없이 실행하도록 해줍니다.

sudo gem install mongrel --include-dependencies

Capistrano

Rails 어플리케이션의 Deployment를 자동화 시켜주는 어플리케이션입니다.

sudo gem install capistrano --include-dependencies
sudo gem install termios --include-dependencies

Ruby on Rails Test

여기까지 RoR 환경에 대한 커스텀 빌드가 끝났으면 마지막으로 테스트 단계를 해보겠습니다. 아래의 커맨드를 입력해서 Mongrel 서버를 시작합니다.

rails testapp
cd testapp
script/server

제대로 서버가 시작되었다면, 웹 브라우저에서 http://localhost:3000/를 입력하여 제대로 동작하는지 확인할 수 있습니다.

Expat

curl -O http://nchc.dl.sourceforge.net/sourceforge/expat/expat-2.0.0.tar.gz
tar xzvf expat-2.0.0.tar.gz
cd expat-2.0.0
./configure --prefix=/usr --mandir=/usr/share/man
make
sudo make install
cd ..

zlib

curl -O http://www.zlib.net/zlib-1.2.3.tar.gz
tar xzvf zlib-1.2.3.tar.gz
cd zlib-1.2.3
./configure --prefix=/usr --shared
make
sudo make install
cd ..

libpng

curl -O ftp://ftp.simplesystems.org/pub/libpng/png/src/libpng-1.2.16.tar.gz
tar xzvf libpng-1.2.16.tar.gz
cd libpng-1.2.16
cp scripts/makefile.darwin Makefile
vi Makefile
# Where the zlib library and include files are located
ZLIBLIB=/usr/local/lib
ZLIBINC=/usr/local/include
#ZLIBLIB=../zlib
#ZLIBINC=../zlib
make
sudo make install
export srcdir=.; ./test-pngtest.sh
cd ..

libjpeg

curl -O ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz
tar xzvf jpegsrc.v6b.tar.gz
cd jpeg-6b
ln -s `which glibtool` ./libtool
export MACOSX_DEPLOYMENT_TARGET=10.4
./configure --enable-shared
make
sudo make install
cd ..

freetype2

curl -O http://download.savannah.gnu.org/releases/freetype/freetype-2.3.2.tar.gz
tar xzvf freetype-2.3.2.tar.gz
cd freetype-2.3.2
vi include/freetype/config/ftoption.h
#define TT_CONFIG_OPTION_BYTECODE_INTERPRETER
./configure
make
sudo make install
cd ..

GD

sudo ln -s /usr/X11R6/include/fontconfig /usr/local/include
curl -O http://www.libgd.org/releases/gd-2.0.34.tar.gz
tar xzvf gd-2.0.34.tar.gz
cd gd-2.0.34
./configure
make
sudo make install

GD Test
./gdtest test/gdtest.png
./gdtestft /Library/Fonts/Zapfino.dfont
open test/*.jpg
cd ..


FastCGI (Optional)

curl -O http://www.fastcgi.com/dist/fcgi-2.4.0.tar.gz
tar xzvf fcgi-2.4.0.tar.gz
cd fcgi-2.4.0
./configure --prefix=/usr/local
make
sudo make install
cd ..

PCRE (Optional)

Intel 칩셋 맥을 사용중일 경우에만 CFLAGS=-O1 설정을 추가하고, PPC일 경우 설정하지 않습니다.

curl -O ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-7.0.tar.gz
tar xzvf pcre-7.0.tar.gz
cd pcre-7.0
./configure --prefix=/usr/local CFLAGS=-O1
make
sudo make install
cd ..

LightTPD (Optional)

curl -O http://www.lighttpd.net/assets/2007/2/4/lighttpd-1.5.0-r1605.tar.gz
tar xzvf lighttpd-1.5.0-r1605.tar.gz
cd lighttpd-1.5.0-r1605
./configure --prefix=/usr/local --with-pcre=/usr/local
make
sudo make install
cd ..

MySQL

아래의 패키지를 설치하고 난 뒤 Terminal에서 다음과 같이 커맨드를 입력해 줍니다.

unlink /usr/local/mysql
sudo mv /usr/local/mysql-5.0.37-osx10.4-* /usr/local/mysql

MySQL Native Bindings Gem (Optional)

MySQL/Rails에서 10-15% 퍼포먼스 향상될 수 있도록 해줍니다.

sudo gem install mysql -- --with-mysql-dir=/usr/local/mysql

PostgreSQL and PAM (Optional)

curl -O ftp://ftp.us.postgresql.org/pub/mirrors/postgresql/source/v8.2.3/postgresql-8.2.3.tar.gz
tar xzvf postgresql-8.2.3.tar.gz
cd postgresql-8.2.3
./configure \
--prefix=/usr/local/pgsql \
--enable-recode \
--enable-syslog \
--enable-unicode-conversion \
--enable-multibyte=UNICODE \
--with-bonjour \
--with-CXX \
--with-includes=/usr/local/include \
--with-libraries=/usr/local/lib \
--with-pam
make
sudo make install
cd ..

Apache2

curl -O http://apache.oc1.mirrors.redwire.net/httpd/httpd-2.2.4.tar.gz
tar xzvf httpd-2.2.4.tar.gz
cd httpd-2.2.4
./configure \
--prefix=/usr/local/apache2 \
--enable-rewrite \
--enable-proxy \
--enable-proxy-balancer \
--enable-proxy-http \
--enable-mods-shared=all
make
sudo make install
cd ..

Subversion (Optional)

오픈소스 Version Control System입니다.

curl -O http://subversion.tigris.org/downloads/subversion-1.4.3.tar.gz
tar xzvf subversion-1.4.3.tar.gz
cd subversion-1.4.3
./configure --prefix=/usr/local --with-openssl --with-ssl --with-zlib
make
sudo make install
cd ..

PHP

curl -O http://www.php.net/distributions/php-5.2.1.tar.gz
tar xzvf php-5.2.1.tar.gz
cd php-5.2.1
./configure \
--prefix=/usr \
--mandir=/usr/share/man \
--infodir=/usr/share/info \
--sysconfdir=/etc \
--enable-cgi \
--enable-cli \
--enable-dbx \
--enable-exif \
--enable-ftp \
--enable-mbstring \
--enable-sockets \
--enable-wddx \
--enable-xslt \
--enable-yp \
--with-apxs2=/usr/local/apache2/bin/apxs \
--with-config-file-path=/etc \
--with-curl \
--with-expat \
--with-freetype \
--with-gd \
--with-iodbc \
--with-jpeg \
--with-kerberos \
--with-ldap \
--with-mysql \
--with-png \
--with-pgsql \
--with-openssl \
--with-xml \
--with-xmlrpc \
--with-zlib
make
sudo make install
cd ..

Python (Optional)

Packages for Universal Python 2.5.x, Mac OS X 10.3.9 and later

Modified: Megazoomer

| No Comments | No TrackBacks

Megazoomer는 Mac OS X의 윈도우를 Command-Enter키를 눌러서 Full Screen, Shrink할 수 있도록 해주는 Input Component입니다. 하지만 TextMate와 같은 몇가지 App에선 키가 작동할 수 없어서, Control-Command-Return 또는 Control-Command-M 키를 이용해서 사용이 가능하도록, 소스 코드를 수정해서 다시 컴파일했습니다.

사용법은 SIMBL을 먼저 설치하고, 시스템의 /Library/Application Support/SIMBL/Plugins/ 에 복사하면 됩니다.

Download: Megazoomer 0.4.1 (cmd-ctrl-return ver)

Recent Comments

  • deute: ㅎㅎ 요즘 이상하게 맥북이 무겁네 -_- read more
  • 고로즈: 감사합니다~ ^^ read more
  • Jiyoon Jang: 부산에 다녀오느라 확인을 못했네요. 바로 코멘트가 approve 되도록 고쳤습니다. ㅎㅎ read more
  • Jiyoon Jang: MT로 옮기면서 파일 링크들을 아직 수정하지 못해서 그랬네요. 지금은 폰트 read more
  • 고로즈: 블로그 툴 갈아타시는 중인가봐요. TextMate 한글 글꼴을 받고 싶은데 링크가 read more
  • 일모리: 음 왜 제 코멘트는 moderation 에서 풀리지 않나요;; read more
  • 일모리: 지윤님 새집 차리셨군요 방가 read more
  • Jiyoon Jang: 음… 그 정도면 수리를 받으셔야 할듯 ㄷㄷ;; read more
  • Byeongseon: 좋은 자료 감사합니다 :-D 근데 MBP 초기 시동시 댕~ 하는 read more
OpenID accepted here Learn more about OpenID
Powered by Movable Type 4.21-en
Creative Commons License
This blog is licensed under a Creative Commons License.