IT 15년 썰 - 4
최초의 html 웹 편집기
2002년, 우리나라에서 월드컵이 열리고, 모두가 붉은 악마가 되어 제정신이 아닌 그 해,
내가 몸담은 서비스는 큰 개편을 진행했다.
콘텐츠는 계속해서, 더 '진짜’처럼 표현되는 방향으로 발전해 가고 있다.
다른 말로, 처음엔 모든 것이 텍스트였지만,
사진/이미지의 시대(싸이월드)가 오고,
동영상의 시대(UCC)가 오고,
이제는 3D와 홀로그램의 시대에 도달했다.
홀로그램까지는 이미지의 시대에서부터 쉽게 예상했지만, 이제 그다음이 뭔지는 잘 모르겠다.
아무래도 '시간' 이 추가된 4차원으로 가야 하는 게 아닐지?
(상상이 잘 안되네~ 공간이동을 한다는 점에서 3D 프린터의 시대이려나!)
어쨌든 텍스트 시대에 시작된 한메일 서비스도 2002년 개편으로 이미지 시대에 조인하게 되는데...
텍스트 시대의 한메일
개편후 한메일내가 작업한 부분도 여러 부분 기억이 난다.
하나는, 최초의 html 웹에디터.
정확히 기억은 안나니... '그러던 어느 날' 이라고 하자...
html 의 designMode=on 프로퍼티를 발견했다.
내겐 '유레카'와 같은 사건이었고, 이에 삘받아서 에디터를 만들어 한메일에 붙이게 되었는데,
그게 내가 아는 한, 국내 최초 웹 WYSIWYG html 편집 메일 서비스다. (설마 세계 최초는 아니겠지...)
1. WYSIWYG(What You See Is What You Get) :'보이는 대로 얻는다'는 에디터를 칭한 말
2. 이걸 만들기 전에는 '나모 웹에디터'가 activeX로 구현되어있어서, 선택해서 쓸 수는 있었으나 번거로웠기에 거의 사용하지 않았다.
나름 자바스크립트의 object 개념, method 등도 써가면서 만들긴 했었는데, 자바스크립트도, 나도 어설펐던 시절이었다.
(javascript 가 국내외에서 개발언어로 주목받기 시작한 게 빨라도 2005년, 구글맵이 오픈했을 즈음이 아니었을까… )
메일에 붙인 에디터는 쓸 곳이 더 있을 것 같아 잘 발라내어 사내에 공개도 했는데, 그 후 사내 여러 서비스에 적용되었다.
두 번째는, 편지지.
'아름다운 것들(?)'에 관심이 많았던(지금도 많다) 나는 당시의 편지지의 구현 모습이 뭔가 마땅찮았다.
한 장의 완결된 이미지가 아래로 아래로 반복되어 나오는 것이 '깔끔해' 보이지가 않았다.
그래서 아이디어를 낸 것이,
편지지의 배경이미지 구성a. 머리(header)-몸통(body)-발(footer)을 구분하고,
글은 가운데 몸통 부분에만 쓰게 해서
몸통 부분만 계속 늘어나고(몸통은 반복되어도 티 나지 않는 단색 혹은 패턴 배경으로)
위아래는 뚜껑을 씌워서 편지지 이미지의 완결성을 가져가자.
b. 위아래 뚜껑에는 플래시 애니메이션, 움직이는 GIF를 넣어
더 풍성한 사용자 경험을 줄 수 있지 않겠는가.
어차피 글자도 얹히지 않을 테니.
였다. (이때도 구상하고는 매우 신났었던 기억이…)
이것이 2002년에 탄생해서 지금까지 서비스하고 있는 다음 메일의 편지지고, 나름 히트였다.
(편지지 사용 경험이 있는 분들은 꽤 계시지 않을까?)
그리고 국내 모든 메일 서비스는 한메일의 편지지를 똑같이 카피했다.
이전 글에도 말했지만 IT 세상은 서로 나눠주면서 사는 세상 아닌가 -ㅠ- 뭐 그런 거지.
특허라도 하나 내둘 걸 그랬나 하는 생각이 때 묻은 지금 조금 들긴 한다.
그건 그렇고, 다음메일에 편지지(일상-기분 카테고리 7번째 페이지)에 들어가 보시라...
당시 한 땀 한 땀 그려서 만든 '메일팀 편지지' 가 아직 서비스되고 있다. 캐릭터들에 마우스 오버하면 나름 액션도 한다 :)
(플래시가 사장세를 타고 있으니 언제 사라질지 알 수 없다)
필자가 그린 2002년 메일팀 편지지, 저 중에 5명이 아직 회사에 있다세 번째는, 포토메일.
개인 사진들을 업로드해서 슬라이드쇼 해주고 여러 애니메이션 효과를 더해서 하나의 영상을 만들어 주는,
어찌 보면 개인 사진으로 카드메일을 만들어주는 서비스였고, 플래시로 만들었다.
돌아보면 나의 플래시 사랑은 1998년도부터 시작해서 2007년에 마무리하게 되는데; (플래시 영광의 역사와 함께 했군)
플래시에 대해서는 다음 기회에 -ㅠ-
1단계: 이미지를 넣는다
2단계: 액자와 특수효과를 선택한다(쟁반노래방 액자를 보니 시대를 짐작할 수 있다)
3단계: 메일 내용 쓴 후 글자가 움직이는 효과를 고르고,
낙서펜으로 낙서를 하면, 메일 받았을 때 애니메이션으로 낙서가 진행 되는게 보인다포토메일 서비스는 그다지 흥하지 않았던 기억인데,
기억하는 분이 있다면 차라도 한 잔 사고 싶다 -ㅠ-
아 그리고, 서비스 네이밍을 '액션메일' 로 해야 한다고 끝까지 기획자와 싸웠지만, 졌다. (쓰다 보니 별게 다 기억이 나네;;;)
(참고로 그 기획자랑 지금도 친하다 ㅎㅎ)
또 하나, 당시는 파일서버도 따로 발주받아서 직접 구축했는데,
사진 업로드 용량을 나름 예측하고는,
서버의 disk full 을 막기 위해,
이미지를 100일만 보관하는 것으로 정책을 정하고, 프로그램도 그렇게 짰다.
그래서 100일이 지난 포토메일은 "100일이 지난 포토메일입니다"라고 나오면서 사진을 보여주지 않았는데..
실제로는 서비스를 종료할 때까지 파일서버 증설이 필요치 않았던 것 같다.
지금 돌아보면 유저들께 죄송하다.
앞서서 걱정은 적당히만 하자. ㅎㅎㅎ
이 세 가지 서비스와 2002년의 개편은 참 기분 좋은 기억이다.
(사실 다 잊고 있었는데 15년을 돌이켜 보면서 퐁퐁 기억남)
서비스의 최초 아이디어, 구체적인 기획(기획자분들이 상세한 기능들은 챙기셨지만), 구현까지 스스로 했고,
그것이 가능한 환경이었다.
위의 3가지는 당시로서는 모두 기술로부터 나올 수밖에 없는 아이디어들이었고,
현재도 앞으로도 기술로부터의 아이디어는 계속 있기 마련인데,
그런 요소들을 잘 찾아내고, 공유해서 살려내는 것도 개발자들이 담당해줘야 하는 역할이다.
개발적인 측면으로 짚어보자면,
이 3가지 서비스 모두, 리로딩 없이 유저의 request 가 적용되어야 하는 서비스로,
당시의 개발 환경 아래, 잘 돌아가게 하기 위해 온갖 노하우(꼼수)를 동원했다.
크로스 도메인 이슈를 해결하기 위해 일꾼으로 사용하는 숨은 프레임들이 있었고,
숨은 프레임을 향한 <a> 태그 target 호출과,
같은 도메인 프레임끼리의 javascript 콜이 마치 잘 훈련된 공중그네 서커스처럼 동작했다고나 할까 -ㅠ-
( 아 이때, 메일을 읽으면 옆에 폴더 옆의 새 편지 숫자가 리로딩 없이 1 줄어드는 것도 붙였었다)
vi 에디터로,
printf를 사용한 c 프로그램으로,
서버 코드와 마크업과 javascript 가 뒤섞여 있는 와중에 공중그네 서커스를~
frontend 기술이 훨훨 날고, 잘 정제된 API 들을 사용하고 있는 지금 생각해보면 감개무량하다.
다들 이런 과정을 겪으면서 차곡차곡 정리된 것이려니.
또 하나 감사(?) 한 일은, 그 시절은 IE5 가 전 세계 점유율 95%였다. (우리나라의 IE5는 99.9% 아니었을까)
그래서 플래시도 브라우저에 기본 탑재되어 있었고, 멀티브라우저 지원에 대해서도 고민할 필요가 없었다.
사실 고민을 해야 하나라는 생각조차 안 했다. (이런 시절도 있었다우)
하지만 IE4를 사용하는 사람들을 위해 하위 호환 코드도 넣어줬던 기특한 기억이 얼핏 떠오른다… (ㅎㅎ 나란녀자..)
