Category Archives: Front-End

LINE Search UI 개선기

안녕하세요. 저는 LINE UIT 조직에서 프론트엔드 업무를 담당하고 있는 이상원입니다. 이번 글에선 제가 LINE Search 프로젝트를 담당할 때 새로 추가된 UI를 조금 더 개선하기 위해 노력했던 내용을 공유하려고 합니다.

첫 구현 결과물
마지막 구현 결과물

PM2를 활용한 Node.js 무중단 서비스하기

자바스크립트는 가장 널리 사용되는 클라이언트 측 프로그래밍 언어이자 프론트엔드 웹 개발 언어 중 하나입니다. 그리고 Node.js는 Chrome의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(runtime)으로 ‘Event Driven’, ‘Non-Blocking I/O’ 모델을 사용해 가볍고 성능이 뛰어나 높은 평가를 받고 있습니다. 실제로 여러 글로벌 기업에선 웹 애플리케이션을 개발할 때 Node.js를 많이 선택하고 있습니다. LINE 역시 웹 테크 파트에서 진행하는 여러 프로젝트에서 SSR(Server Side Rendering)과 BFF(Backend for Frontend)등의 역할을 Node.js로 개발해 서비스하고 있습니다. 이번 글에선 이와 같이 최근에 많은 관심을 받고 있는 Node.js를 활용해서 실제 서비스를 무중단으로 운영해 본 경험을 공유하고자 합니다.

TensorFlow.js: 웹 프론트엔드에서 머신러닝 활용하기

안녕하세요! LINE에서 프런트엔드 개발을 담당하고 있는 Jun입니다. 최근 프런트엔드 분야는 흥미로운 기술이 가득해서 전부 다 파악하는 게 힘들 정도인데요. 개인적으로 가장 관심이 가는 건 머신러닝입니다. 오늘은 웹 프런트엔드에서 머신러닝 활용하기를 주제로, TensorFlow.js를 사용해서 간단하게 머신러닝을 구현해 본 경험을 공유하겠습니다.

HTML 같이 레이아웃을 자유롭게 변경할 수 있는 새로운 메시지 유형, ‘Flex Message’를 소개합니다

Flex Message라는 새로운 메시지 유형이 LINE Messaging API에 추가되었습니다. 기존 Messaging API에서도 단순 텍스트 외에 스티커나 이미지, 비디오 같은 미디어 유형, 혹은 다양한 버튼과 URL을 배치할 수 있는 템플릿 유형의 메시지를 사용할 수 있었습니다. 그 중에서도 템플릿은 사용자가 여러 가지 선택지 중에서 답을 골라야 하는 상황에 특히 유용했습니다. 다만, 버튼 템플릿 같은 경우 버튼을 최대 네 개까지만 배치할 수 있다든가, 레이아웃을 제목, 본문, 버튼 순으로만 설정할 수 있다는 제약이 있었습니다.

Flex Message 란?

Flex Message는 바로 이런 제약에서 벗어나 레이아웃을 굉장히 자유롭게 바꿀 수 있는 메시지 유형으로, 변경 가능한 가짓수가 무한대에 가깝습니다. 일정한 디스플레이 프레임이 있으면서도 레이아웃을 HTML처럼 원하는 대로 변경할 수 있고, 각각의 구성 요소도 보기 좋게 정돈되어 나타납니다. 예를 들어, 아래와 같은 메시지를 작성할 수 있습니다.

AMP HTML Components에 LINE 공유 버튼 Component를 추가해보자

안녕하세요, 프론트엔드 개발자 Kyo입니다. Google의 오픈 소스 프로젝트인 AMP Project에 대해 여러분과 나눠볼까 합니다. AMP HTML을 이용해 마크업 작업을 할 때, ‘컴포넌트를 하나 내가 직접 만들어 보고 싶다!’ 라든가 ‘내가 만든 기능을 추가해보고 싶은데..’라는 생각을 많이들 해보셨을 것이라 짐작합니다. 그런 여러분께 도움이 되었으면 하는 바람으로 관련 내용을 준비해 보았습니다.

Messaging API의 신규 기능, LIFF를 소개합니다

LIFF란?

최근 새로 릴리스한 LIFF에 대해 혹시 알고 계시나요? 이 자리를 빌려 여러분께 LIFF를 소개하고 사용하는 방법까지 간략하게 보여드리고자 합니다. LIFF란 LINE Front-end Framework의 약자로, LINE 앱 속에서 작동하는 웹앱 플랫폼입니다. LIFF 앱을 LINE 앱에서 실행시키면 LINE 플랫폼으로부터 LINE 사용자 ID나 LIFF API를 이용할 때 필요한 토큰을 취득할 수 있습니다. LIFF 앱은 이런 기능을 바탕으로, 사용자 정보를 활용하는 기능을 제공하거나, 대화방에 사용자를 대신하여 메시지를 보낼 수 있습니다.

LINE 프론트엔드 개발팀의 OSS 활동 촉진 행사, ‘Let’s Contribute OSS!’

안녕하세요? Frontend Standardization팀의 Kawasako입니다. 저희 팀은 LINE 프론트엔드 개발 조직의 여러 제품 개발에 공통으로 필요한 도구를 개발하거나, 개발자간 정보 교류 및 커뮤니케이션이 더욱 원활히 이루어질 수 있도록 다양한 기획을 담당하는 부서입니다. 오늘은 저희의 업무도 소개할 겸, 얼마 전 열린 사내 워크숍에 대해 전해드리겠습니다.

LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기

안녕하세요, 저는 LINE MANGA 개발을 담당하고 있는 자바 스크립트 개발자, @sunderls입니다.

여러분, 혹시 LINE 앱에서 만화를 보실 수 있는 것*, 알고 계셨나요? 금시초문이라면, ‘더 보기’ 버튼을 눌러 LINE MANGA 메뉴를 통해 멋진 만화들을 만끽해 보세요.

아래의 그림은 LINE MANGA 서비스의 화면 중 일부입니다. 페이지 전환이 참 매끄럽지 않나요? 여러분께 살짝 귀띔을 해드리자면, LINE MANGA 서비스는 웹 기반으로 개발했습니다. 저희가 보기에는 페이지 전환이 네이티브 앱 못지 않다고 생각하는데, 여러분은 어떻게 생각하세요? 이번 글을 통해서 우리가 이런 결과물을 얻기 위해 어떤 노력을 했는지 여러분께 간단히 소개해 드리고자 합니다.

Code splitting을 쉽게 하기 위해 만든 grow-loader

안녕하세요, 저는 LINE MANGA팀의 자바 스크립트 개발자, @sunderls입니다. 일본에서는 LINE으로 만화를 볼 수 있다는 것, 알고 계셨나요? 혹시 여러분은 LINE MANGA1) 서비스를 이용해 보셨나요? 예전에 블로그를 통해서도 나누었듯이(LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기), LINE MANGA는 웹 기반으로 구현되어 있습니다. 이 서비스는 LINE 앱 안에서 구동되는 서비스이기 때문에, LINE 앱을 이용할 때와 마찬가지로 편안하고 매끄러운 UX를 제공하고자 저희는 많은 노력을 쏟았습니다. 우리는 우리의 목표를 달성하고자 code-splitting을 도입하였는데, 이 글을 통해 code-splitting을 손쉽게 적용할 수 있도록 개발한, LINE의 오픈 소스 프로젝트인 grow-loader를 여러분께 소개하고자 합니다.

LINE Creators Studio 개발에 사용하는 Kotlin 소개

시작하기 전에

안녕하세요, 저는 LINE Fukuoka 개발 팀에서 일하는 Freddie Wang입니다. 저는 현재 LINE Creators Studio라는 새로운 Android 앱 개발을 맡고 있습니다. LINE Creators Studio는 누구나 자기만의 스티커를 만들 수 있도록 도와주는 스티커 제작 툴입니다. LINE Creators Studio로 만든 스티커는 LINE Store에서 판매도 할 수 있습니다.

이 블로그에서는 LINE Creators Studio 앱 개발에 전적으로 사용하고 있는 프로그래밍 언어인 Kotlin에 대해 이야기해보려 합니다. 왜 Kotlin을 주요 언어로 선택했는지 설명하고 Kotlin의 어떤 기능을 주로 사용하고 있는지 소개하겠습니다.

참고: LINE Creators Studio는 현재 일본에서만 제공되고 있으며 다른 지역에도 곧 배포될 예정입니다.

Kotlin의 장점과 핵심 기능

Google I/O 2017에서 Google은 Android Studio 3.0부터 Kotlin을 공식 지원한다고 발표한 바 있습니다. 2016년 말 LINE Creators Studio 개발 프로젝트를 킥오프했을 당시 저희는 이 프로젝트를 단기간에 MVP(Minimum Viable Product) 프로젝트로 키워야 하는 과제를 안고 있었습니다. Kotlin 1.0이 출시된 지 한참 지난 후였지만 저희 팀에는 Kotlin을 사용해 본 사람이 아무도 없었습니다. 그래서 개발을 시작하기 전에 먼저 Kotlin을 사용하면 어떨지 알아보았는데, 그 결과 아래에서 설명하는 이유 때문에 Kotlin을 사용하기로 결정했습니다.

Kotlin을 선택하게 된 배경

Java와의 100% 호환성

Kotlin의 가장 큰 매력은 Kotlin 코드와 Java 코드를 한 프로젝트에서 함께 쓸 수 있고 기존의 Java 라이브러리를 모두 사용할 수 있다는 것입니다. 우리 프로젝트에는 레거시 Java 코드는 없지만 Dagger 2, Retrofit, RxJava 같은 Java 호환 라이브러리를 사용하고 싶었습니다.

간결한 구문

Kotlin은 문제 해결을 위해 설계된 언어입니다. Kotlin의 주요 목표 중 하나는 깔끔한 코드를 Java보다 쉽게 쓰는 것입니다. 이것이 Android 애플리케이션을 개발할 때 최우선적이고 필수적인 요인입니다.

줄어든 종속성

Kotlin은 Guava처럼 크기가 큰 Java 라이브러리를 대체할 수 있는 컴팩트한 런타임 라이브러리를 가지고 있습니다. 서버나 데스크톱 환경에서는 대용량 라이브러리가 큰 문제가 아니지만 Android에서는 문제를 일으킬 수 있습니다. Android 앱을 개발할 때는 65K 메서드 제한이 있기 때문에 대용량 Java 라이브러리의 사용을 피해야 합니다. Kotlin의 stdlib 라이브러리(버전 1.1.3-2)는 메서드 개수가 6306개라서 메서드 개수에 따른 영향이 Guava 라이브러리보다 적습니다.

이전 버전의 Android 기기 지원

Kotlin 1.0은 Java 6을 기준으로 하기 때문에 버전 2.3 이상인 Android 기기를 지원할 수 있습니다. 이 또한 Android 개발자에게 중요한 요인입니다.