피터팬의 좋은방 구하기 DESIGN.md

Design System Inspiration of Peterpanz

Overview

Visual Theme & Atmosphere

피터팬의 좋은방 구하기 is a Korean property-finding service operated by 주식회사 두꺼비세상. Its official product introduction traces it to a Naver café for direct property transactions and describes its present scope as homes from one-room accommodation to apartments. The same page emphasizes verified listings and filters for practical needs such as parking, pets and elevators: a documented evolution from a transaction community into a broader home-finding platform.

The measured homepage is the Korean-language product surface at /villa?... on www.peterpanz.com (lang="ko"), reached automatically from /. At 1440×1000, a property list occupies the left side and a map occupies the right. The green active property category, green listing counts and compact white filter bar give the interface its observed visual identity. #1db177 green also connects a community link's hover treatment to the keyboard focus ring.

The terms identify the operator and publish a Seoul address. The company history records the acquisition of 피터팬의 좋은방 구하기 in September 2017.

Primary tasks

Search by neighborhood, station, university or listing number; narrow results with filters; compare property photos and prices alongside their location. The header also exposes the café link and an account-entry button. No account or listing-submission workflow was entered.

Brand Narrative

The official introduction describes a direct-transaction community that now serves a broader search for a home. Its emphasis on verified listings and everyday conditions is expressed in the captured product by certification labels, filter controls, property imagery and geographic context. This connection is an interpretation of the stated product proposition and observed interface, not a quoted brand strategy.

Principles

The official introduction explicitly emphasizes listing reliability and finding a home that fits one's lifestyle. It is product positioning; no official design-principles document was verified.

Personas

No researched personas were established; no demographic or behavioral persona is inferred from the capture.

Colors

The palette below comes from computed styles on identified product controls. These role labels describe the measurements; they are not published CSS custom-property names.

The map-location button's parent has computed color #000000; its visible icon is #535c68. Use the icon fill when reproducing it. Its overall opacity is 0.9.

The paragraph-ink census reports rgb(232, 48, 48) ×39, rgb(137, 137, 144) ×38 and rgb(29, 177, 119) ×33. It does not establish a universal paragraph foreground, so no global body-text color token is assigned. The census includes map content, badges and a customer-support embed; frequency alone does not establish a brand color.

The root exposes only two computed custom properties, both --swiper-*. Of 211 declared properties, 5 are Swiper and 206 are an unattributed :root, :host palette that is absent from the computed document root. Those 206 declarations co-occur with a Channel Talk shadow-root widget, but the survey does not record stylesheet ownership. Both groups are excluded from product tokens.

Typography

Evidence classes

• Official product-use statement: no page opened in this research names an official product font. Live use is the basis for the families below.
• Live-loaded: document.fonts reports Spoqa Han Sans Neo 400, 500 and 700 normal, and Roboto 400 normal. The measured search, filter, account and café controls use Spoqa Han Sans Neo. The survey's map-count buttons declare roboto at 16px/400.
• Official distributed assets: no separate brand font kit or redistribution license was verified. The product ships runtime assets: the opened font stylesheet and census register same-origin WOFF files under /mobile/assets/fonts/: SpoqaHanSansNeo-Regular.woff, SpoqaHanSansNeo-Medium.woff, SpoqaHanSansNeo-Bold.woff and Roboto-Regular.woff for the loaded faces. The binary files were not downloaded.
• Declared-only: Roboto 500/700 and NanumSquare are registered but absent from the loaded list. The body's declared stack is "Helvetica Neue", Helvetica, Arial, sans-serif; those names are not evidence that any of those faces loaded. They receive no specimens or family tokens. FontAwesome, Glyphicons Halflings, fontello and swiper-icons are registered icon faces, not product text-family evidence. The support widget's NotoSansKR declaration is outside product typography.
• Unresolved: a general heading size, paragraph scale, font version and font redistribution rights were not established. Substitute: none chosen.

Measured metrics

The 14px metrics describe these controls, not the body's computed font size. The census declares Spoqa Han Sans Neo on the first h1 and button; it does not give the h1's size.

Layout

At the measured 1440×1000 viewport, the left result panel is 560px wide and the map begins at x=560. The top navigation controls sit at y=24; the filter row's 40px controls begin at y=82; the map area begins at y=132. The location search begins at x=32 and is 260px wide. These are one-viewport measurements, not responsive breakpoints.

The viewport shows two columns of photo-led listing cards in the left panel, with prices and short property details below each image. Panel headers are sticky; the survey records them as 560×59px. Preserve the result/map relationship and compact control density when using this surface as a reference. No global spacing scale was extracted.

Responsive Behavior

Not measured: only the 1440×1000 desktop surface was captured; no mobile or breakpoint behavior is specified.

Elevation & Depth

Measured depth is local: the header account button adds a soft, zero-offset 6px shadow on hover and hovered press; the map-location overlay has a 2px-down, 14px-blur shadow at rest. Their raw alpha values are 0.1 and 0.12 respectively, as listed in §4. Search and filter controls have box-shadow: none at rest. No general elevation ladder is established.

Motion & Easing

The account button's raw computed transition is box-shadow, -webkit-box-shadow 0.3s, 0.3s ease, ease 0s, 0s. The other five sampled controls report all 0s ease 0s. These strings are copied verbatim in the verification Proof block. The nonzero account shadow transition does not establish a general animation scale. No measured cubic-bezier curve, reduced-motion behavior or navigation animation is specified.

Components

All six controls were measured at rest, pointer hover, hovered press and keyboard focus after closing the advertisement with “닫기”. No filled primary CTA was exposed by this survey; the account button is the header action sampled. The product stylesheet corroborates its hover shadow and the café link's hover color/weight. Pointer snapshots satisfy :hover/:active, but the later pointer-state crops have capture errors; the computed observations below remain subject to reviewer remeasurement.

The keyboard outline is 2px solid #1db177, offset 2px on the five non-input controls. It disappears after blur; no persistent change was found. The opened product stylesheet explicitly authors this treatment with html :focus-visible:not(input):not(select):not(textarea). It is a solid author rule, not an auto browser ring.

Shape and comparison scope

The account action is a pill using 24px CSS radius at 48px height. Search uses 29px and filters 80px CSS radii at 40px height; preserve these as the measured pill treatments rather than inventing a global radius scale. The square café hit box and 8px map-control corner serve different contexts.

“No computed change” is limited to self, its pseudo-elements, descendants and their pseudo-elements, and three ancestor levels. Descendants compared: account 1 image; transaction filter 4 including one SVG/path; café and search 0; all-filters 6 including one SVG/two paths; map-location 4 including one SVG/two paths. Styles, backgrounds, masks, images and SVG geometry/paint were compared. This does not establish absence of changes in siblings, canvas/video pixels, closed shadow roots or cross-origin frames. No disabled state or card-link state was measured.

States

The five non-input controls have reversible authored keyboard outlines; the search input has actual :focus-visible with no compared visual change. Café hover and hovered press change color and weight. The account button's hover and hovered press add its shadow. Pressed observations were taken while the pointer remained hovered; neither changed control had any additional pressed difference versus hover. No error, selected-filter, disabled or submitted-form state is specified.

The pointer snapshots are raw computed observations with matching state flags. Their PNG crops failed the later pointer-state guard; the keyboard-focus crops and blur checks succeeded. See verification notes for the error strings and exact comparison scopes.

Do's and Don'ts

• Reuse the measured green for the café hover and non-input keyboard outline; preserve the 400→500 café weight change.
• Keep transparent controls on their measured white context, with the light borders and dimensions in §4.
• Keep the search geometry even though its state styling is not promoted to a component token.
• Keep map tiles, the support widget, advertisements and unattributed shadow-root variables outside the product palette.
• Do not apply the non-input outline rule to every input, invent a disabled treatment, or present a fallback font as the loaded UI face.

These are implementation directions derived from this capture, not a published company design manifesto.

Voice & Tone

The live UI uses short Korean task labels: “거래방식”, “전체필터” and the place-oriented search placeholder. The official introduction uses the invitation “좋은방 구할 때는 피터팬에서 시작하세요!” and explains filters with everyday needs such as parking and pets. Reproduce that concrete housing vocabulary; no broader authored voice guide was verified.

Agent Prompt Guide

“Build a Korean property-search desktop interface using the measured Peterpanz product surface: a 560px left result panel beside a map at the 1440px reference width, a compact white filter row, 40px search/filter controls and loaded Spoqa Han Sans Neo at 14px. Use #1db177 for the café hover and a 2px keyboard outline with 2px offset on the measured non-input buttons and link. Keep the café label 16px/400 at rest and 16px/500 on hover. Follow the component table for borders, radii, shadows and input behavior. Leave unmeasured mobile and disabled states unspecified.”

Governance

Known Gaps

• Contrast, all-filters. Text #898990 on #ffffff measures 3.47:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.