[프론트엔드 프로그래밍 입문 CAMP/강사 인터뷰] “1픽셀을 구현하는 법을 이해하면 디자인 퀄리티까지 높아진다” 우아한형제들 조 은 강사님

한때, ‘얕은’ 수준의 개발이라 폄하되었던 프론트엔드 프로그래밍이 사용자 경험(UX)의 급부상과 함께 중요해지고 있습니다. 우리가 물과 공기처럼 매일 같이 접하는 웹 서비스의 최전방에 있기 때문인데요. [프론트엔드 프로그래밍 입문 CAMP] 4기 개강에 앞서,국내에서 가장 우아하다는 곳(우아한형제들)의 개발자이신 조 은 강사님으로부터 프론트엔드가 무엇이고 왜 중요한지 들어보았습니다!

프론트엔드 프로그래밍 입문 CAMP 자세히 보기 >>>


안녕하세요? 짧게 자기소개 부탁드립니다!

안녕하세요? [배달의민족]을 서비스하는 [우아한형제들]에서 프론트엔드 개발을 담당하고 있는 ‘조 은’입니다. 반갑습니다.

 

‘프론트엔드’라는 용어 자체가 생소할 수도 있을 거 같습니다. ‘프론트엔드(Front-end)’와 ‘백엔드(Back-end)’가 무슨 차이가 있나요?

비유를 해드리는 것이 이해하기 쉬울 것 같아요. (강의실 벽을 가리키며) 저 벽을 한 번 보세요. 우리 눈에 보이는 저 벽엔 하얀색으로 페인트칠도 되어 있고, 시계, 액자도 걸려있습니다. 애초에 저 벽이 흰색으로 되어 있지도 않았을 것이고, 아무 물건도 걸려있지 않았겠죠. 프론트엔드는 우리가 지금 눈으로 보고 있는 저 벽에 해당합니다. 아름답게 꾸며져 있고(디자인), 어떤 물건을 걸 수도(기능) 있습니다. 꾸며져 있지 않았던 저 벽이 하얗게 되고, 또, 무언가를 걸 수 있게 하는 것을 굳이 비유하자면 ‘프론트엔드 프로그래밍’이라고 할 수 있습니다.

이번에는 백엔드를 한 번 설명해 보겠습니다. 우리가 지금 보고 있는 저 벽의 안은 콘크리트로 채워져 있겠죠. 또, 스티로폼이 들어 있어서 단열 기능을 한다거나 내진 설계를 위해 철근이 심겨 있을 수 있습니다. 이처럼 우리 눈에는 보이지 않지만, 드러나 있는 벽면을 밑에서 떠받쳐주고 이것이 제 기능을 할 수 있도록 하는 것, 이것이 ‘백엔드’입니다. 이것을 만드는 것이 ‘백엔드 프로그래밍’이고요.

실제 웹 개발에서는, 프론트엔드는 사용자와 소프트웨어가 상호작용하는 모든 지점이 프론트엔드의 영역입니다. 상호 작용 이후에 사용자가 원하는 결과를 돌려주기 위해 데이터를 처리하는 작업을 하는 영역이 백엔드의 영역이고요. 사용자 경험의 측면에서 본다면, 어느 하나 소홀히 할 수 없는, 둘 다 너무도 중요한 영역입니다.

프론트엔드를 처음 시작하는 개발자들을 많이 보셨을 테고, 버거운 순간이 공통으로 있었을 거 같습니다. 주로 어떤 부분에서 어려워하시는지, 이번 프론트엔드 프로그래밍 입문 CAMP에서 그런 어려움이 해결될 수 있을지 궁금합니다.

프론트엔드를 공부할 때 제일 어려운 순간은 구현하고자 하는 이상과 실제로 구현하는 환경 사이의 괴리를 인식할 때 옵니다. 기존 브라우저들이 과도한 점유율 경쟁으로 인해, 표준에 맞지 않게 자신들 만의 표준으로 구현되어 있고, 개발자들에겐 표준을 준수하는 브라우저와 그렇지 않은 브라우저를 동시에 대응해야 하는 이슈가 생겼습니다.

문제는 유저가 어떤 브라우저를 사용할지 모른다는 점입니다. 한국에서는 아직 IE7 등 구 버전 브라우저의 점유율이 높아 이런 점을 충분히 유의하여 개발에 임해야 합니다. (※ 패스트캠퍼스 주 : 2015년 상반기(6월) 기준, IE6과 7이 세계적으로는 1.11%에 불과하나, 국내에서는 8.87%에 달합니다.)

[국내 PC 브라우저 버전별 점유율]

※ 출처 : KOREA HTML5, 2015년 상반기(6월) 기준

[해외 PC 브라우저 버전별 점유율]

※ 출처 : NETMARKETSHARE, 2015년 상반기(6월) 기준

가령 예를 들어 애니메이션을 구현해야 한다고 하였을 때, CSS3 애니메이션이나 트랜지션을 사용하면 쉽게 구현할 수 있는 애니메이션도, IE7에서 같은 동작을 구현해야 한다면 JavaScript를 사용하여 구현해야 합니다. 이는 CSS를 사용하는 것보다 느리며 비효율적입니다.

프론트엔드 프로그래밍은 자신의 철학과 표준을 준수하겠다는 마음이 굉장히 중요합니다. HTML, CSS, JavaScript에 접근하기는 매우 쉽습니다. 하지만 접근한 이후, 그 기술을 오롯이 잘 이해하여 사용하는 것과 다른 사람이 일궈놓은 코드를 따라 하기만 하는 것은 범위가 매우 다릅니다.

하지만 위에서 설명한 비표준 브라우저 등으로 인해 표준을 준수하였으나 제대로 보이지 않거나, 오류가 발생할 수 있습니다. 디자인을 100% 구현하지 못할 수도 있습니다. 그럴 때 기술에 대한 이해도 및 자신의 철학, 그리고 유관 부서와 협의를 통해 디자인과 성능을 동시에 잡는 방법을 찾아낼 수 있을 것입니다.

이번 수업에서는 앞서 말한 2가지 중 웹 표준에 조금 더 포커스를 맞출 것입니다. IE7에 대응하는 건 구 버전의 유산이지만, 웹 표준은 미래로 나아가기 위한 길입니다. 구 버전에 대응하기 위한 방법도 당연히 소개하겠지만, 이 수업을 듣는 분들은 미래를 향해 나아가기를 바랍니다.

왜 프론트엔드부터 시작하면 좋을까요?

프론트엔드는 유저와 브라우저가 상호 작용하는 부분이기 때문에 당장 내 눈에 쉽게 볼 수 있다는 장점이 있습니다. 내 눈에 당장 보이는 프로그램 오류(이후 ‘버그’라 부릅니다)를 잡기 쉬울 겁니다. 또한, 이미 일궈놓은 레퍼런스가 많고, 무엇보다도 ‘웹 표준’이라 부르는 표준이 있으므로 표준을 잘 준수하는 것만으로도 버그를 피할 수 있습니다. 또한 HTML은 누구나 쉽게 만들 수 있어야 한다는 것을 모티브로 삼고 있기 때문에 접근이 쉽고, W3C Validator 등의 도구를 사용해 문법상 오류도 쉽게 찾을 수 있습니다.

디자이너가 프론트엔드 프로그래밍을 배우면 좋은 이유는 무엇인가요?

개발자와 디자이너의 협업 과정에서 가장 많이 나오는 문제는 아마 “1픽셀(px)”일 것입니다. 디자이너가 준 디자인을 브라우저에서 잘 나오도록 하는 게 프론트엔드 개발자의 역할 중 꽤 중요한 위치를 차지하고 있습니다. 문제는 ‘잘’ 나오는 것과 ‘완벽하게’ 나오는 것의 차이입니다.

디자이너가 디자인을 열심히 해서 주었을 때, 개발자에게 가장 큰 우선순위는 ‘이걸 브라우저에서 보이게 해야 한다’는 것입니다. 그다음 순위가 ‘디자이너가 준 것과 비슷하게 픽셀을 맞추어야 한다’이고, 그다음이 ‘픽셀을 완벽히 맞춰야 한다’일 것입니다. 실제로 현업에서 많은 충돌이 1px에서 발생합니다.

하지만 이런 충돌의 대부분은, 각자가 서로의 영역을 이해하지 못하는 데에서 발생합니다.

개발자가 개발만 잘하고 디자이너가 디자인만 잘하면 회사는 망합니다. 웹을 디자인한다는 건 순수 미술이 아닙니다. 웹 환경을 잘 이해하고, 사용자가 정말 편하게 웹사이트의 정보를 습득할 수 있도록 하는 것이 웹 디자인입니다.

그러므로 디자이너가 프론트엔드 프로그래밍을 배우길 권장합니다. 기본적인 프론트엔드 프로그래밍을 배우면, 단순히 프론트엔드가 아닌 웹 환경 자체에 대해 잘 이해할 수 있을 것이며, 디자인의 퀄리티도 향상할 것입니다.

‘애니메이션은 IE9 이상에서만 구현하는 게 성능상 좋다고 하였으니 IE8 이하에서는 조금 어색하더라도 애니메이션을 포기하는 게 좋겠다’, ‘웹 폰트를 사용하면 조금 더 아름답게 구현할 수는 있겠지만, 용량이 커서 성능 저하를 일으킬 것이므로, 모바일보다는 PC에서 사용해야지’ 등 기본 내용을 이해하는 것만으로도 내가 원하는 내용에 조금 더 포커스를 두고 디자인할 수 있습니다.

이렇게 함으로써 개발자와 충돌을 피하고 더 본인이 원하는 디자인에 가깝게 디자인을 할 수 있으리라 생각합니다.

프론트엔드 프로그래밍 입문 CAMP에서 디자인에 대해서도 어느 정도 다루나요?

디자인 자체에 대해서 본격적으로는 다루지 않습니다. 하지만 CSS는 디자인과 밀접한 관계가 있으므로, 디자인을 간접적으로는 다루고 있습니다.

폰트 크기, 자간, 행간 등 가장 기본적인 타이포그래피로 시작하여, 색상, 레이아웃, 애니메이션, 미디어쿼리 등 실무에서 활용 가능한 예제들로 실습을 진행할 예정입니다.

이번 캠프를 수강하면 어떤 결과물을 얻을 수 있을까요?

[슬랙(Slack)]과 같은 메신저 서비스를 구현해 볼 예정입니다. 결과물은 수강생이 디자인을 얼마만큼 멋지게 해오느냐에 따라 많이 달라질 것 같습니다. 제가 슬랙을 결과물로 선택한 이유는 현재 프론트엔드 프로그래밍의 기술이 총집합되어 있는 서비스가 슬랙이라고 생각하기 때문입니다. 슬랙을 처음 들어보시는 분들도 이번 기회에 한 번 경험해 보시고 멋진 메신저 서비스를 만들어 가셨으면 합니다.

수업을 듣기에 앞서 필요한 프로그래밍 지식은 무엇인가요?

사실상 없습니다. 기술 문서를 읽을 수 있는 수준의 영어 독해 능력만 있으면 좋겠습니다.

프론트엔드 프로그래밍 입문 CAMP 자세히 보기 >>>

프론트엔드 프로그래밍 입문 CAMP 수강신청하기 >>>

Recent Posts