Applying Atomic Design to KakaoPage Web: Resolving Component Fragmentation and Practical Tips

KakaoPage Web faced issues with component fragmentation and a lack of design standards due to the limitations of the existing Container-Presentational pattern. Consequently, they adopted the Atomic Design methodology to build a design system, ensuring consistency and reusability within the team.

Applying Atomic Design and Challenges Faced

Atomic Design categorizes components into five levels: Atom, Molecule, Organism, Template, and Page. However, during actual implementation, the subjectivity in distinguishing between Molecules and Organisms emerged as a major obstacle. While context presence and the Single Responsibility Principle (SRP) were used as criteria, reaching consensus among team members took time when domain definitions were ambiguous.

Additionally, when similar components with slight design differences (e.g., comments and replies) appeared, issues such as duplicate component creation or unnecessary Props increase arose. The KakaoPage team addressed this by utilizing the Compound Components pattern or by re-evaluating Organism definitions to respond flexibly.

Practical Operational Tips and Resolution Strategies

To effectively establish Atomic Design, KakaoPage applied the following practical rules.

• External Injection Principle: State control, event handlers, and layout-related styles (margins, padding, etc.) for components are injected via Props from outside the component rather than being managed internally. This made it easier to verify component states in Storybook and improved reusability.
• Single Source of Truth: The naming of Figma components created by designers is kept identical to the naming of React components. This reduced communication errors between developers and designers and increased efficiency.
• Collaborative UI Modeling: FigJam is used for developers and designers to jointly define atomic units and naming conventions. Rather than aiming for a perfect structure in a single modeling session, the ideal structure is gradually improved through continuous feedback and code reviews.