15th Gwangju Biennale Pavilion

Developed the website for the 15th Gwangju Biennale Pavilion.

The main screen of the 15th Gwangju Biennale Pavilion features an animation in which text gradually accumulates and disappears. The intention was to preserve the visual language of the poster while simultaneously embracing the characteristics of the web as a medium.

To support responsive environments, continuous consideration was given to how the graphics, main title text, and country names should scale and reposition proportionally across different screen sizes. The country name texts were designed to overflow beyond the screen without changing size, continuously stacking on top of one another. In contrast, the primary title text was adjusted in both scale and position to remain readable on every screen size.

The main graphic was implemented to always fill the screen according to its aspect ratio, with two separate variations prepared for mobile and desktop layouts. (No dedicated menu icon was used. However, from a UX perspective, there remained ongoing questions about whether this approach was the most appropriate choice.)

All text elements were uploaded as SVG files. Certain texts required subtle adjustments, and some elements needed to preserve exact proportions and spacing. In practice, the text was often placed inside bounding boxes larger than the visible characters themselves in order to control spacing more precisely.

One of the most challenging aspects was the inconsistency of SVG rendering across browsers. Even when spacing appeared perfectly aligned in the design files, each browser calculated and rendered SVG layouts slightly differently. In some cases, this was due to legacy browser bugs, while in others the rendering calculations themselves differed. Through this process, it became clear that further exploration would be necessary to determine the most effective methods for handling fine typographic adjustments in future projects.

The venue page features a single large-scale map, with actual position tracking handled through defined map areas. To implement interactions such as hover effects, a separate highlighted-state image of the map was layered on top of the base map at the exact same dimensions.

Although now more widely supported, the CSS property text-wrap: pretty was not available in Safari at the time. In addition, the pretty option itself often behaved unpredictably. For this reason, the title layout was implemented using a balance-based line-breaking approach instead.

The mobile version of the detail page included navigation that allowed users to move between previous and next sections. The most challenging aspect of implementing this feature was determining the criteria for what should be considered the “previous” or “next” section.

Although some assistance was taken from existing plugins, the more important process involved finding a perceptual standard for identifying the moment when a user genuinely feels they have moved into the next section. There turned out to be far more edge cases than expected — particularly situations where the scroll reached the very end of the page and could no longer continue, or cases where a section was so short that it became ambiguous which section was actually being viewed.

This issue was ultimately resolved through repeated scroll testing and fine-tuning based on visual and interaction-based judgment. Additional logic was also implemented to detect whether the viewport had reached the edge of the page and how much of a given section was actually visible on screen, which helped improve the overall stability of the navigation system.