“밑줄이 없어졌어요”
“또 밑줄이 없어졌어요”
“밑줄이 없어졌어요”
스티비는 이메일 편집과 관련한 문의를 많이 받습니다. 아무래도 이메일 편집의 편의를 우리 서비스의 큰 가치 중 하나로 생각하기 때문일 텐데요. 그중 유독 반복되는 CS가 있었습니다. 편집기에서 하이퍼링크를 넣었는데, 테스트 발송을 하거나 실제 발송을 하면 링크의 밑줄이 사라지는 현상이었습니다. 원인을 찾는 과정은 혼란스럽고 어려웠지만 결국 문제는 하이퍼링크를 만드는 <a>태그의 속성 중 이동할 주소를 가리키는 href 속성 때문이었습니다. href 속성을 입력하지 않거나 특정 클라이언트(Gmail😂) 링크를 필터링하는 과정에서 잘못되어 <a>태그에 입혀진 스타일(밑줄, 색상)이 사라지는 거였죠. 그래서 스타일이 사라지지 않도록 코드를 개선했습니다. 이렇게 해결되나 싶었습니다.
“또 밑줄이 없어졌어요”
그런데 이번에는 조금 상황이 달랐습니다. 한날한시에 발송된 이메일이 어떤 곳(pc, Gmail.com)에서는 보이고 어떤 곳(mobile, Gmail앱)에서는 보이지 않았습니다. naver메일, daum메일에서도 들쑥날쑥 했습니다. 서비스를 만드는 사람의 핑계같지만 원인은 클라이언트였습니다. Gmail, naver메일, daum메일…아웃룩😂 모두 각자의 기본 링크 스타일을 가지고 있습니다. <a>태그에 인라인 스타일이라고 하는 특별한 스타일을 사용자가 지정하지 않는다면, 각 클라이언트는 각자의 방식대로 하이퍼링크를 표현했습니다. 밑줄이 있는 곳이 대부분이지만 안드로이드 Gmail앱에서는 밑줄을 보여주지 않습니다. 대부분 파란색으로 표현하지만 완전히 같은 같은 색은 아니고 조금씩 다른 색상으로 표현했습니다.
그래서 뭐가 문제인가
하이퍼링크에 밑줄이 없다고 색상이 조금 다르다고 구독자는 크게 문제삼지 않을 수 있습니다. 내가 pc에서 보던 메일에 하이퍼링크 밑줄이 있었는데 모바일에서는 보이지 않는다고 크게 당황하진 않을 것입니다. 평소에 사용하던 패턴 그대로 사용하면 되거든요.
하지만 링크의 색상을 본문과 같도록 설정하면! 큰 문제가 될 수 있습니다. 메일 안의 하이퍼링크를 본문과 이질감이 없도록 검정색으로 설정합니다. 문단을 쭉 훑다가 갑자가 파란색 텍스트가 나오면 미관상 이상하니까요. 그렇게 편집자가 공들여서 만든 이메일이 발송되지만 그 링크는 클릭(터치)되지 않았습니다…왜냐면 어떤 클라이언트에서는 하이퍼링크의 밑줄을 넣지 않아서 문단 중간의 링크가 링크인지 아닌지 알 수 없었으니까요.
하이퍼링크 = 밑줄?
하이퍼링크는 웹에 있어 핵심 기술이죠. 편집자는 손쉽게 원하는 정보끼리 연결할 수 있고, 독자는 그 링크를 따라다니면서 유용한 정보를 얻을 수 있습니다. 그런데 ‘하이퍼링크 = 밑줄’일까요? 그렇기도 하고 그렇지 않기도 합니다. 하이퍼링크는 <a>태그로 작성하며 여기에 적용되는, 다른 일반적인 텍스트와 구분되는 표현은 여러 군데에서 하기 때문입니다.
먼저 브라우저(크롬, 사파리, IE 등)에서 표현(스타일링)합니다. 대부분의 브라우저는 하이퍼링크를 밑줄이 그어진 푸른색 텍스트로 표현합니다. 밑줄은 대부분의 브라우저에서 표준처럼 사용되지만 ‘푸른색’은 조금씩 다릅니다.
다음으로 웹사이트의 제작자(Gmail, naver, daum 웹과 모바일 애플리케이션)가 표현합니다. 웹사이트, 클라이언트 또는 문서 단위에서 <a>태그의 표현 양식을 지정합니다. 밑줄을 없애는 곳도 있고, 푸른색이 아닌 독특한 색으로 표현하는 곳도 있습니다. 굵은 텍스트나 기울임으로 설정할 수도 있습니다. 어쨌든 다른 일반 텍스트와는 구분되어 있습니다.
그리고 인라인 스타일링이라는 방법이 있습니다. 최근의 웹문서에서는 잘 쓰이지 않지만 아직 이메일을 코딩할 때 쓰이는 방법이죠. <a style=”text-decoration: underline; color: blue”>와 같이 <a>태그마다 매번 스타일을 지정하는 방법입니다. 많은 이메일 제작자들이 이 방법을 사용하고 있습니다.
그럼 어떻게 해야하지?
‘하이퍼링크 = 밑줄’이라는 표준 아닌 표준을 우리는 어떻게 적용시켜야 할까? 스티비팀은 고민했습니다. 다양한 편집자의 표현 욕구를 충족시키면서 하이퍼링크 본연의 기능을 해치지 않도록, 그리고 구독자에게 더 나은 사용자 경험을 주기 위해서요.
먼저 편집자의 오해를 막아야 합니다. 스티비는 브라우저에서 제공되는 웹서비스이므로 에디터에서의 링크가 정확히 표현이 되어야 합니다. 그리고 편집자의 의도대로 스타일을 수정할 수 있어야 합니다 밑줄을 없앨 수도 있어야 하고 하이퍼링크의 색상도 바꿀 수 있어야 합니다. 또한, 에디터에서의 의도한 결과가 발송되는 이메일에도 그대로 담겨야 합니다. 즉, 에디터 화면과 결과물이 같아야 합니다. 하지만 브라우저에서 편집할 때의 하이퍼링크와 다양한 디바이스와 클라이언트로 발송되는 결과물 사이에는 괴리가 있을 수밖에 없었습니다.
다음으로 구독자에게 더 나은 사용자 경험을 주어야 합니다. 하이퍼링크의 표현을 자유롭게 허용한다고 해서 다른 일반 텍스트와 구분이 되지 않아 링크인줄 모르고 지나가는 일이 없어야 합니다. 이는 편집자에게도 큰 위험이지요. 그리고 같은 이메일을 어디에서 보든지 유사한 사용자 경험을 느끼고 사용할 수 있어야 합니다.
그래서 위의 니즈를 풀기 위해 스티비팀은 다음과 같은 하이퍼링크 표현 정책을 갖습니다.
- 링크가 삽입되어 <a>링크가 생성되면 링크마다 매번 인라인 스타일을 지정한다.
- 그 스타일은 표준에 가까운 밑줄(text-decoration: underline), 파란색(color: #0000FF)이다.
- 편집자는 언제든 편집기로 밑줄 여부와 색상을 수정할 수 있다.
- 구독자에게 전달하는 표현은 기본적으로 밑줄+파란색이며, 편집자가 수정할 경우 편집자의 의도대로 표현된다 .
어떻게 보면 단순한 문제입니다. ‘자유롭게 편집할 수 있게 하면 되지 않나’라고 생각할 수도 있습니다. 하지만 다양한 환경과 클라이언트에서 잘 읽히는 이메일을 만드는 것이 스티비의 큰 가치 중 하나입니다. 편집자가 조금 더 편하게 잘 읽히는 이메일을 만들 수 있도록, 구독자가 조금 더 잘 읽을 수 있도록 꾸준히 고민하는 것이 스티비가 할 일이라고 생각합니다.
- 함께 읽으면 좋을 스티비 블로그 글
- MySQL에서 RDS(Aurora) 로 이관하기
- 헷갈리는 UI, 스티비는 이렇게 씁니다.