techlist.io
KR EN

frontend

5 posts

woowahan

We Refactor Culture Just Like (opens in new tab)

The Commerce Web Frontend Development team at Woowa Brothers recently underwent a significant organizational "refactoring" to manage the increasing complexity of their expanding commerce platform. By moving away from rigid, siloed roles and adopting a flexible "boundary-less" part system, the team successfully synchronized disparate services like B Mart and Baemin Store. This cultural shift demonstrates that treating organizational structure with the same iterative mindset as code can eliminate operational bottlenecks and foster a more resilient engineering environment. ### Transitioning to Boundary-less Parts * The team abandoned traditional division methods—such as project-based, funnel-based, or service-vs-backoffice splits—because they created resource imbalances and restricted developers' understanding of the overall service flow. * Traditional project-based splits often led to specific teams being overwhelmed during peak periods while others remained underutilized, creating significant delivery bottlenecks. * To solve these inefficiencies, the team introduced "boundary-less parts," where developers are not strictly tied to a single domain but are encouraged to work across the entire commerce ecosystem. * This structure allows the organization to remain agile, moving resources fluidly to address high-priority business needs without being hindered by departmental "walls." ### From R&R to Responsibility and Expandability (R&E) * The team replaced the traditional R&R (Role & Responsibility) model with "R&E" (Responsibility & Expandability), focusing on the core principle of "owning" a problem until it is fully resolved. * This shift encourages developers to expand their expertise beyond their immediate tasks, fostering a culture where helping colleagues and understanding neighboring domains is the standard. * Work is distributed through a strategic sync between team and part leaders, but team members maintain the flexibility to jump into different domains as project requirements evolve. * Regular "part shuffling" is utilized to ensure that domain knowledge is distributed across the entire 20-person frontend team, preventing the formation of information silos. ### Impact on Technical Integration and Team Resilience * The flexible structure was instrumental in the "ONE COMMERCE" initiative, which required integrating the technical stacks and user experiences of B Mart and Baemin Store. * Because developers had broad domain context, they were able to identify redundant logic across different services and abstract them into shared, common modules, ensuring architectural consistency. * The organization significantly improved its "Bus Factor"—the number of people who can leave before a project stalls—by ensuring multiple engineers understand the context of any given system. * Developers evolved into "domain-wide engineers" who understand the full lifecycle of a transaction, from the customer-facing UI to the backend administrative and logistics data flows. To prevent today's organizational solutions from becoming tomorrow's cultural legacy debt, engineering teams should proactively refactor their workflows. Moving from rigid role definitions to a model based on shared responsibility and cross-domain mobility is essential for maintaining velocity and technical excellence in large-scale platform environments.

frontendrefactoringautomationcode-review+3
naver

When Design Systems Meet AI: Changes in (opens in new tab)

The integration of AI into the frontend development workflow is transforming how markup is generated, shifting the developer's role from manual coding to system orchestration. By leveraging Naver Financial’s robust design system—comprised of standardized design tokens and components—developers can use AI to automate the translation of Figma designs into functional code. This evolution suggests a future where the efficiency of UI implementation is dictated by the maturity of the underlying design system and the precision of AI instructions. ### Foundations of the Naver Financial Design System * The system is built on "Design Tokens," which serve as the smallest units of design, such as colors, typography, and spacing, ensuring consistency across all platforms. * Pre-defined components act as the primary building blocks for the UI, allowing the AI to reference established patterns rather than generating arbitrary styles. * The philosophy of "knowing your system" is emphasized as a prerequisite; AI effectiveness is directly proportional to how well-structured the design assets and code libraries are. ### Automating Markup with Code Connect and AI * Figma's "Code Connect" is utilized to bridge the gap between design files and the actual codebase, providing a source of truth for how components should be implemented. * Specific "Instructions" or prompts are developed to guide the AI in mapping Figma properties to specific React component props and design system logic. * This approach enables the transition from "drawing" UI to "declaring" it, where the AI interprets the design intent and outputs code that adheres to the organization’s technical standards. ### Challenges and Limitations in Real-World Development * While AI-generated markup provides a strong starting point, it often requires manual intervention for complex business logic, state management, and edge-case handling. * Maintaining the "Instruction" set requires ongoing effort to ensure the AI stays updated with the latest changes in the component library. * Developers must transition into a "reviewer" role, as the AI can still struggle with the specific context of a feature or integration with legacy code structures. The path to fully automated frontend development requires a highly mature design system as its backbone. For teams looking to adopt this paradigm, the priority should be standardizing design tokens and component interfaces; only then can AI effectively reduce the "last mile" of markup work and allow developers to focus on higher-level architectural challenges.

frontendaidesign-systemdesign-tokens+2
woowahan

In Search of Lost Accessibility | Woowa (opens in new tab)

Achieving a high accessibility score on automated tools like Lighthouse does not always translate to a functional experience for users with visual impairments. This post explores how a team discovered that their "high-scoring" product actually required over 300 swipes for a screen reader user to reach a purchase button, leading them to overhaul their approach. By focusing on actual screen reader behavior rather than just checklists, they successfully transformed a fragmented interface into a streamlined, navigable user journey. ### Navigational Structure with Landmarks and Headings * The team implemented a clear hierarchy using landmarks (header, main, footer) and heading levels, which allows screen reader users to jump between sections via tools like the iOS VoiceOver "Rotor." * To ensure consistency, they developed a reusable component that automatically wraps content in a `<section>` and links it to a heading using the `aria-labelledby` attribute. * They addressed a common CSS pitfall: because setting `list-style: none` can cause VoiceOver to stop recognizing elements as a list, they explicitly added `role="list"` to maintain structural context for the user. ### Consolidating Fragmented Text for Readability * Information that should be heard as a single unit, such as prices (e.g., "990" and "Won"), was often fragmented into separate swipes; the team corrected this by using template literals to merge data into single strings. * For cases where visual styling required separate DOM elements, they used a "NoScreen" component strategy: hiding the visual elements from screen readers with `aria-hidden="true"` while providing a single, visually hidden description for the screen reader to announce. * The team noted that `aria-label` on generic containers like `<span>` or `<div>` is often ignored by iOS VoiceOver, making screen-reader-only text a more reliable method for cross-platform accessibility. ### Defining Roles for Interactive Elements * The team identified that generic buttons like "View All" lacked context, so they updated them with specific labels (e.g., "View all 20 reviews") to clarify the outcome of the interaction. * They ensured that all interactive elements have clearly defined roles, preventing the ambiguity that occurs when a screen reader identifies an element as a "button" without explaining its specific purpose or the data it controls. True accessibility is best measured by the physical effort required to complete a task, such as the number of swipes or touches. Developers should move beyond automated audits and regularly perform manual testing with screen readers like VoiceOver or TalkBack to ensure their services are genuinely usable for everyone.

frontendweb-accessibilityariasemantic-html+2
woowahan

We Did Everything from Planning to (opens in new tab)

The 7th Woowacourse crew has successfully launched three distinct services, demonstrating that modern software engineering requires a synergy of technical mastery and "soft skills" like product planning and team communication. By owning the entire lifecycle from ideation to deployment, these developers moved beyond mere coding to solve real-world problems through agile iterations, user feedback, and robust infrastructure management. The program’s focus on the full stack of development—including monitoring, 2-week sprints, and collaborative design—highlights a shift toward producing well-rounded engineers capable of navigating professional environments. ### The Woowacourse Full-Cycle Philosophy * The 10-month curriculum emphasizes soft skills, including speaking and writing, alongside traditional technical tracks like Web Backend, Frontend, and Mobile Android. * During Level 3 and 4, crews transition from fundamental programming to managing team projects where they must handle everything from initial architecture to UI/UX design. * The process mimics real-world industry standards by implementing 2-week development sprints, establishing monitoring environments, and managing automated deployment pipelines. * The core goal is to shift the developer's mindset from simply writing code to understanding why certain features are planned and how architecture choices impact the final user value. ### Pickeat: Collaborative Dining Decisions * This service addresses "decision fatigue" during group meals by providing a collaborative platform to filter restaurants based on dietary constraints and preferences. * Technical challenges included frequent domain restructuring and UI overhauls as the team pivoted based on real-world user feedback during demo days. * The platform utilizes location data for automatic restaurant lookups and supports real-time voting mechanisms to ensure democratic and efficient group decisions. * Development focused on aligning team judgment standards and iterating quickly to validate product-market fit rather than adhering strictly to initial specifications. ### Bottari: Real-Time Synchronized Checklists * Bottari is a checklist service designed for situations like traveling or moving, focusing on "becoming a companion for the user’s memory." * The service features template-based list generation and a "Team Bottari" function that allows multiple users to collaborate on a single list with real-time synchronization. * A major technical focus was placed on the user experience flow, specifically optimizing notification timing and sync states to provide "peace of mind" for users. * The project demonstrates the principle that technology serves as a tool for solving psychological pain points, such as the anxiety of forgetting essential items. ### Coffee Shout: Real-Time Betting and Mini-Games * Designed to gamify office culture, this service replaces simple "rock-paper-scissors" with interactive mini-games and weighted roulette for coffee bets. * The technical stack involved challenging implementations of WebSockets and distributed environments to handle the concurrency required for real-time gaming. * The team focused on algorithm balancing for the weighted roulette system to ensure fairness and excitement during the betting process. * Refinement of the service was driven by direct feedback from other Woowacourse crews, emphasizing the importance of community testing in the development lifecycle. These projects underscore that the transition from a student to a professional developer is defined by the ability to manage shifting requirements and technical complexity while maintaining a focus on the end-user's experience.

frontendandroiddistributed-systemsmonitoring+4
naver

This is the First Click (opens in new tab)

This session from NAVER ENGINEERING DAY 2025 explores the implementation of visual data tools to interpret complex user behavior within Naver’s Integrated Search. By transforming raw quantitative click logs into intuitive heatmaps and histograms, the development team provides a clearer understanding of how users navigate and consume content. This approach serves as a critical bridge for stakeholders to find actionable evidence for service improvements that are often obscured by traditional data analysis. ### Visualizing User Intent through Heatmaps and Histograms * Click logs from Naver Integrated Search are converted into heatmaps to pinpoint exactly where users are focusing their attention and making their "first clicks." * Histograms are utilized alongside heatmaps to provide a temporal and frequency-based perspective on user interactions, making it easier to identify patterns in data consumption. * The visualization system aims to help developers and designers who struggle with raw quantitative data to gain an immediate, intuitive grasp of user experience (UX) performance. ### Handling Dynamic Data in Real-Time Search Services * The system is designed to respond to the "real-time evolution" of Naver Search, where content and UI layouts change frequently based on trends and algorithms. * The FE Infrastructure team shared technical know-how on collecting and processing client-side logs to ensure data accuracy even as the search interface evolves. * Significant trial and error were involved in developing a visualization framework that remains consistent and reliable across diverse search result types and user devices. ### Practical Application for Service Improvement * By using heatmaps as a primary diagnostic tool, teams can move beyond speculative design and base UI/UX updates on concrete visual evidence of user friction or engagement. * The technology allows for the identification of "dead zones" or overlooked features that may require repositioning or removal to streamline the search experience. * Integrating these visual tools into the development workflow enables faster feedback loops between data analysis and front-end implementation. For organizations managing high-traffic web platforms, moving from raw data tables to visual behavior mapping is essential for understanding the nuance of user interaction. Implementing a robust heatmap and histogram system allows teams to validate product hypotheses quickly and ensures that service updates are driven by actual user behavior rather than just aggregate metrics.

frontenddata-visualizationheatmapuser-behavior-analysis+2