한국어
← All categories
05

Displaying data

The same data shown as cards or as a list makes for a completely different product. This category also settles what that sliding banner on the home page is actually called.

15 terms15 live demos
Everyone says "slider", but it is a carousel

That banner on the home page that slides left and right — most Korean teams call it a "slider" or a "rolling banner", but the proper name is carousel. The clash with the form slider (the drag-to-set-a-value bar) causes real accidents.

01

Card

카드

When this comes up

"Show the products as cards" — on lists where the image matters.

A unit that groups related information into one box. Image, title, description and button arrive as a set.

See it Try clicking
Summer linen shirt
An everyday shirt in a cool fabric
£39.00
Easy to get wrong

A card assumes it repeats in a list. Make something that does not repeat into a card and it is just a box. When a card holds several clickable things, decide where pressing the card itself goes.

Using it on the job

A button inside a card collides with the card-wide link. Ask for the button press not to trigger the card link as well.

Ask for it like this

Build the product list as a card grid. The whole card links to the detail page, and the "Add to cart" button inside must act independently of that link. Truncate long titles at two lines so card heights stay even.

Related terms
02

List

리스트

When this comes up

"Change the list from cards to rows" — when raising information density.

Items stacked vertically. Denser than cards and easier to scan.

See it Try clicking
J
Jihoon Kim
Sharing the materials for the meeting
14:20
S
Seoyeon Park
Got it, thanks!
13:05
Easy to get wrong

Cards or list comes down to "does the image matter". Shop products want cards in a grid; inboxes and notification centres want a list. Two-column cards get cramped on mobile, so they often become a list there.

Ask for it like this

Build the notification centre as a list. Each row is avatar + title + one line of body + timestamp, with unread items distinguished by background colour.

Related terms
03

Table · Data Grid

테이블 · 데이터 그리드

When this comes up

"Put the order history in a table" — guaranteed to come up on admin screens.

A table showing data in rows and columns. Add sorting, filtering and paging and it becomes a data grid.

See it Try clicking
Order no.ItemStatusAmount
#10293Linen shirtShipping39,000
#10292Cotton trousersDelivered52,000
#10291Canvas bagAwaiting payment28,000

When the width is tight it scrolls sideways — that is option ①.

Easy to get wrong

What to do with a table on mobile is always the problem. The options are ① scroll horizontally ② keep only a few columns ③ convert to cards. Decide at mockup stage or development will decide for you.

Ask for it like this

Build the order history as a table with per-column sorting. On mobile, scroll only the table area horizontally (the whole page must not move sideways). Freeze the first column.

Related terms
05

Accordion

아코디언

When this comes up

"Build the FAQ" — whenever you need a collapsible list.

A UI where pressing a heading folds and unfolds its content. The standard form for an FAQ.

See it Try clicking
How long does delivery take?

Orders paid before 2pm on a weekday ship the same day and usually arrive within one to two days.

Can I exchange or return an item?

You can request one within 7 days of delivery. For a change of mind, return postage is at your expense.

Can I get a receipt?

You can issue a receipt or tax invoice from My Page > Order history.

Easy to get wrong

Decide whether several can be open at once (one-at-a-time vs. multiple). And important content that people search for gets missed when it is folded away.

Ask for it like this

Build the FAQ as an accordion. Allow several open at once and open the first item by default. Make sure collapsed content is still found by browser search (Ctrl+F).

Related terms
06

Disclosure

디스클로저 · 더보기 / 접기

When this comes up

"The text is long — let people fold and unfold it"

The single-item version of an accordion. One piece of content that folds and unfolds.

See it Try clicking
More product details

Fabric: 55% linen, 45% cotton · Made in: South Korea · Care: hand wash separately in cold water · Made: May 2026

Easy to get wrong

Press "More" and it expands in place → disclosure. Press it and a list is appended below → load more. The implementations differ, so ask for the right one.

Ask for it like this

Show three lines of the long product description with a "More" control that expands it. Use a disclosure that expands in place, and switch the label to "Less" once expanded.

Related terms
07

Badge

배지

When this comes up

"Show the unread count"

A small marker showing a count or a state. The red number over a notification icon is the classic case.

See it Try clicking
12999+Numeric · capped · dot
Easy to get wrong

The difference from chips and tags is that a badge is for looking at, not pressing. Decide how large numbers display (999+) and whether it hides at zero.

Ask for it like this

Add an unread-count badge to the notification icon. Show "999+" above 999, and hide the badge entirely at zero.

Related terms
08

Avatar

아바타

When this comes up

"What do we show for people with no profile photo?" — a question that always arrives mid-build.

The profile image element representing a person. Usually circular.

See it Try clicking
J
?
J
S
M
+5

First letter · no image · several stacked

Easy to get wrong

You must decide what appears when there is no photo — the first letter of the name, a default icon, a generated colour. Skip it and you get a broken-image icon.

Ask for it like this

Build an avatar. With no profile image, show the first letter of the name on a background colour; with no name either, show a default icon. For groups, stack up to three and show "+N".

Related terms
09

Thumbnail

썸네일

When this comes up

"The image proportions are all over the place" — when card heights go uneven.

The representative image shown at reduced size. Named for being about the size of a thumbnail.

See it Try clicking
1:1
Square
4:3
Standard
16:9
Wide
Easy to get wrong

Standardise the ratio (4:3, 16:9, 1:1) across the project. Otherwise card heights vary in the list. Also decide whether off-ratio uploads get cropped or letterboxed.

Ask for it like this

Standardise product thumbnails at 4:3. Crop from the centre when the source ratio differs (object-fit: cover), and show a placeholder when there is no image.

Related terms
10

Toolbar

툴바

When this comes up

"Group the editing buttons into one row"

An area that collects function buttons into a row. The bold / italic / align row at the top of an editor is a toolbar.

See it Try clicking
Easy to get wrong

Keep adding buttons and a toolbar overflows fast. Agree the rule in advance: frequently used ones stay out, the rest collapse into "More (⋯)".

Ask for it like this

Build the editor toolbar. Expose the six most-used actions and put the rest in a "More (⋯)" dropdown. Scroll it horizontally on mobile.

Related terms
11

Timeline

타임라인

When this comes up

"Show the order process in order"

Events listed vertically in time order. Used for order progress and activity history.

See it Try clicking
Delivered29 July, 14:20
In transit28 July, 09:10
Dispatched27 July, 18:40
Payment complete27 July, 11:02
Easy to get wrong

Looks like a step indicator, but steps are what is still to come, a timeline is what already happened. Decide the time format too (absolute time vs "3 minutes ago").

Ask for it like this

Show delivery tracking as a timeline with the most recent entry at the top. Use absolute times in the format "29 July, 14:20".

Related terms
12

Tree

트리 · 계층 구조

When this comes up

"Let me manage categories like folders"

A structure showing parent–child relationships that fold and unfold. Used for folder structures and category management.

See it Try clicking
Women

Outerwear
Tops
Dresses

Men

Shirts
Trousers

Accessories

Bags
Shoes

Easy to get wrong

People lose their way past three levels deep — admin screens included. Set the depth limit during planning.

Ask for it like this

Build category management as a tree. Allow a maximum of three levels, and keep the expanded state after a refresh.

Related terms
13

Chart · Graph

차트 · 그래프

When this comes up

"Show the sales trend as a graph"

Turning data into a picture so it can be grasped at a glance.

See it Try clicking
MonTueWedThuFriSatSun
Easy to get wrong

A chart must be designed for three cases together: no data, exactly one data point, and an abnormally large value. Draw only pretty data in the mockup and the real service breaks.

Ask for it like this

Build a weekly sales bar chart. Define the no-data and single-data-point states as well. Do not distinguish series by colour alone — label them too.

Related terms
14

Dashboard

대시보드

When this comes up

"Put the key metrics on one screen" — discussing the admin landing screen.

A screen that gathers key metrics in one view so the situation can be read. Named after a car dashboard.

See it Try clicking
Revenue today
₩1,240,000
▲ 12.4%
New sign-ups
48
▼ 3.1%
Easy to get wrong

"Show everything" is the most dangerous requirement there is. A dashboard is the work of deciding what to leave out. Start by defining what decision someone makes from this screen.

Ask for it like this

Before I build the admin dashboard — what decision do you make from this screen? I would like to place only the three to five metrics that decision needs, at a large size, and move the rest to sub-pages.

Related terms
15

Skeleton vs Placeholder Image

스켈레톤 vs 플레이스홀더 이미지

When this comes up

When you cannot tell whether a grey rectangle means loading or no image.

A skeleton is the grey frame shown while loading; a placeholder image is the stand-in shown when there is no image at all.

See it Try clicking
Skeleton — loading

Becomes the real content shortly

Placeholder — no image

Stays like this

Easy to get wrong

Both are grey rectangles, which is why they get confused — but they mean opposite things. A skeleton says "coming shortly"; a placeholder says "there is none". A skeleton that never resolves is a bug.

Ask for it like this

Distinguish the two — an animated grey skeleton while loading, a static icon placeholder when there is no image. If they look the same, nobody can tell loading from empty.

Related terms