처음 me2idea를 만들기 전 다른 미투 데스크탑 애플리케이션을 써볼 때 이상한 점이 있었습니다. 매번 웹브라우저가 뜨면 거기서 로그인한 다음, 애플리케이션 창에서 '인증을 수락하셨습니까? ' 에 '예' 를 클릭해야 그 다음을 쓸 수가 있었지요. 창마다 따라다니면서 클릭 클릭 클릭을 하는 게 참 귀찮았습니다. 정말 안 하고 싶었습니다...만.

me2idea 도 이 인증창의 저주에서 완전히 벗어날 수는 없었습니다. me2day가 제공하는 인증방식이 원래 이렇게 생겼기 때문이죠. T_T

미투 데스크탑 애플리케이션의 인증 흐름은 다음과 같습니다.

핵심은 애플리케이션이 직접 사용자 아이디와 비밀번호에 접근할 수 없다는 겁니다. 그래서 사용자는 못생긴 브라우저와 확인 창에 계속 클릭 클릭할 수밖에 없습니다. 불편하지요. 인증 방식은 어쩔 수 없지만 클릭 수라도 줄이고 싶어서 나온 것이 me2idea 의 인증창입니다.

air의 webkit 브라우저로 미투데이 로그인 창을 띄우면, 시스템 브라우저로 띄울 때와는 달리 창 위치와 크기를 제어할 수 있습니다. 애플리케이션 윈도우 근처에 인증창이 나타나게 해서 브라우저 창을 찾아 헤맬 필요가 없어졌죠. 여기까지는 그럭저럭 순조로웠습니다.

브라우저 창을 닫은 다음 다시 '인증을 수락하셨습니까?' 를 찾아 헤매지 않기 위해, 브라우저 창을 닫는 행동과 인증 수락 확인을 동시에 하게 하면 좋을 것 같았습니다. 그래서 브라우저 창을 위 아래로 나누어 위에는 인증 수락 + me2idea로 돌아가기 제어 버튼을, 아래는 미투 로그인을 보여주고 싶었습니다.

방법을 찾다 보니 air의 stage라는 개념이 적절해 보였습니다. 창에 stage를 더하면 stage마다 다른 url을 로드해 보여줄 수 있거든요. 그럼 위 아래로 하나씩 넣으면 될 거라고 생각했습니다. 혹시 비슷한 생각을 하시는 분이 계시다면, 안 된다고 먼저 말씀드릴게요. stage는 top-left 나 bottom-right를 지정하는 경우, 모든 stage가 같은 지점에서 시작하기 때문에 위-아래 처럼 분리할 수가 없습니다.

그래서 머리를 뜯다 뜯다 나온 것이 지금의 me2idea의 인증창 형태입니다. 첫 stage에 미투의 로그인 url을 넣고, 그 다음 stage에 제어 영역을 둡니다. 두 개의 stage는 top-left 기준이 같고, 제어 영역의 stage는 투명한 배경을 넣어 첫 stage의 미투 화면이 보이도록 했습니다.

이상 me2idea를 개발하면서 미투의 안 쉬운 '데스크탑 기반 쉬운 인증 방식' 때문에 삽질했던 기억을 살려 적어봤습니다. air도 javascript도 익숙하지 않아서 삽질이 두배로 많았던 것 같네요. 다음에 이런 일을 할 때는 삽질이 좀 줄어들길 바라봅니다. T_T