Category Archives: Front-End

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 앱은 이런 기능을 바탕으로, 사용자 정보를 활용하는 기능을 제공하거나, 대화방에 사용자를 대신하여 메시지를 보낼 수 있습니다.

V8의 히든 클래스 이야기

자바스크립트가 되어 그 기분을 헤아릴 수 있다면

안녕하세요? LINE Fukuoka의 프론트엔드 엔지니어 Yonehara입니다.

저는 프론트엔드 개발자로서 아직 웹 브라우저나 자바스크립트의 기분을 헤아려줄 만큼의 경지에는 올라가지 못했다고 생각합니다. 이로 인해 저희 서비스 사용자에게 원하는 만큼의 쾌적한 UX를 제공해 드리지 못할 때가 있어 괴로울 때가 있습니다. 그나마 다행인 것은, 우리가 이 자바스크립트의 속마음을 상당 부분 분석적으로 들여다볼 수 있다는 점입니다. Google이나 Mozilla가 그들의 자바스크립트 엔진 코드를 공개하고 있고, 여러 곳에서 엔진 설계에 대해 풀어 설명하고 있고, 또 트레이싱이나 프로파일링을 할 수 있는 수단도 넉넉히 준비되어 있기 때문이지요. 이번 포스팅에서는 여러분도 잘 아시는 Chrome의 자바스크립트 엔진인 V8에서 최적화를 위한 장치로 도입한 히든 클래스에 대해 살펴볼까 합니다.

웹 브라우저와 함께 하는 애니메이션 스티커 체커

안녕하세요, LINE Fukuoka의 ha1f입니다. 현재 후쿠오카에서 iOS 앱 개발을 담당하고 있습니다. 저는 LINE에 정식으로 입사하기 전, 채용이 확정된 아르바이트생으로서 LINE의 사내 도구를 개발해 왔습니다. 오늘은 당시 개발한 도구 중 하나인 애니메이션 스티커 체커*에 대해 소개할까 합니다.

APNG란?

APNG(Animated Portable Network Graphics)란 일련 번호가 매겨진 애니메이션용 이미지 파일 형식으로, LINE 애니메이션 스티커에서도 이 형식을 사용하고 있습니다. APNG는 GIF와 달리 풀컬러를 사용할 수 있고 알파 채널을 가질 수도 있으며, 압축율이 높다는 장점이 있습니다. 또한 PNG와 호환되며, APNG를 지원하지 않는 환경에서는 일반적인 정지 화면으로 표시됩니다. 도구를 사용하면 여러 PNG 파일에 일련 번호를 부여하여 APNG 파일을 만들 수도 있습니다.

apng

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

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

엑셀로 관리하던 자리 배치도, Leaflet을 통해 웹 시스템으로 탈바꿈하다

LINE 일본 오피스에서는 늘어나는 인원을 감당하기 위해 2017년 4월, 사무실을 JR 신주쿠 미라이나타워로 이전했습니다. 사무실 이전과 함께 IT 지원실은 몇 가지 새로운 사내 시스템을 도입했는데요, 오늘은 그 중 하나인 ‘자리 배치도’를 소개할까 합니다.

개발 동기

예전 사무실에서는 아래에 보시는 것처럼 엑셀을 이용하여 자리를 관리하였습니다(자리에 배치된 직원의 이름은 지워진 상태입니다).

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 개발자에게 중요한 요인입니다.