Works > Web Development

SNU Card NewsBot

SNU Card NewsBot is an automated slide news service for the 7th local election of South Korea. Slide news (or card news) is a pervasive snack news format in South Korea due to its convenience and quick reading. Users can swipe news slides horizontally to read more news. However, generating quality slide news is challenging because it demands another way of involving visualization, verbal messages, layout design, and storytelling at once. In addition, people have different concerns about local elections (e.g., regions, candidates, parties), manually generating each card news consumes a lot of time. Thus, my team applied robot journalism technology to automate this personalization and generation process.

In this project, my main job was to render news slides from a raw JSON format. To do this, I first designed a declarative (JSON) format grammar for data API to help every part of the tema (front-end, data management, back-end, content generation) effectively communicate with each other. Then, I implemented the renderer of news slides given the declarative grammar. Another mission was to design and implement a user application to reach to general audience. In this case, I applied a card UI because higher fluidity of the elements was needed because the end-product (a web app) contain various heterogeneous elements, such as lists of news articles and contorl panels for personalization.

Period Jan 2017 - May 2017

My Role Front-end Developer and Designer

Director Prof. Joonhwan Lee and Prof. Bongwon Suh

Back-end Developer Joonseok Kim, Sion Baek, and Jinho Seo

Database Management Gibeom Park and Jinhan Choi

Text Generation Sanghyuk Lee (chief), Youjin Hwang, Seongmin Park, Younah Ahn, and Woobin Choi

This project was granted by IITP (Institute for Information and Communications Technology Promotion)

Demo Video

Video credit: Hyeok Kim

Card Rendering API

To reduce the system resources for news slide (card) generation, we decided to generate cards on browser run-time. Thus, I surveyed prior news slide designs to derive layouts for our project, eventually deriving a reusable and extendible declarative grammar that works for those various slide formats. Major types of information elements were text, image, graph visualization, comparison data, and map visualization. To make the grammar generalizable, I divided core methods that univarsally applies to every slide type and type-specific methods for each format. For example, one core method deals with position and size, and map-specific method loads a regional map and shows the data on it. I used vue.js for the front-end framework.

Declarative Grammar for Card Generation

A generalizable grammar was viatal to effectively operate the card rendering API. I designed the card rendering grammar through collaboration with and data management and content generation teams in terms of card layout type (e.g. map+text, vis+text, text, image, cover, and closing) and information element types (i.e. text, image, vis).

Card UI

Main Page

News Slide Viewer (using slick.js)

Personalization Setting Page


Responsive Web design should be aligned with user's journey of using a service. For example, the confirm button could be placed on top because the space is large enough and the button was highly noticeable and accessible at that position. However, it should be at thebottom of the page on its mobile version to lead users to discover various personalization features. Another concern was toprovide various elements (articles, control panels, and alert messages) in a consistent format. The card UI was also effective because many of the control panels had to be foldable.

Concept Arts

The contents of news slides were highly political, so using image was not very easy. Thus, I created various illustrations in order to vividly provide news contents.