{"id":45225,"date":"2026-03-17T06:52:19","date_gmt":"2026-03-17T06:52:19","guid":{"rendered":"https:\/\/rjydisplay.com\/?p=45225"},"modified":"2026-06-09T08:48:50","modified_gmt":"2026-06-09T08:48:50","slug":"engineering-the-interface-a-practical-guide-to-designing-intuitive-uis-for-a-tft-touch-display","status":"publish","type":"post","link":"https:\/\/rjydisplay.com\/ko\/engineering-the-interface-a-practical-guide-to-designing-intuitive-uis-for-a-tft-touch-display\/","title":{"rendered":"\uc778\ud130\ud398\uc774\uc2a4 \uc5d4\uc9c0\ub2c8\uc5b4\ub9c1: TFT \ud130\uce58 \ub514\uc2a4\ud50c\ub808\uc774\ub97c \uc704\ud55c \uc9c1\uad00\uc801 UI \uc124\uacc4 \uc2e4\uc6a9 \uac00\uc774\ub4dc"},"content":{"rendered":"<p class=\"wp-block-paragraph\">When a user walks up to an industrial control panel, a smart thermostat, or a medical ventilator, their expectation has already been set by the smartphone in their pocket. They expect fluid animations, instantaneous feedback, and an intuitive layout. However, as any embedded engineer or UI\/UX designer working in the European and North American markets knows, designing a user interface for an embedded <strong>TFT touch display<\/strong> is a fundamentally different discipline than designing for iOS or Android.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You are not working with a multi-core gigahertz processor and gigabytes of RAM. You are often working with an STM32 or NXP microcontroller (MCU), limited flash memory, and an RGB565 color space. If you attempt to port a web-based UI directly onto a TFT touch display, the result will be sluggish, unresponsive, and visually broken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This comprehensive, highly actionable guide breaks down the engineering realities and design psychology required to build a flawless, intuitive user interface specifically tailored for embedded TFT touch display hardware.<\/p>\n\n\n\n<h2 id=\"1-hardware-dictates-software-the-embedded-reality-check\" class=\"wp-block-heading\">1. Hardware Dictates Software: The Embedded Reality Check<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you open Figma, Adobe XD, or Sketch, you must understand the physical and computational constraints of your hardware. A brilliant UI design is useless if the MCU cannot render it at 30 Frames Per Second (FPS).<\/p>\n\n\n\n<h3 id=\"mcu-vs-mpu-constraints\" class=\"wp-block-heading\">MCU vs. MPU Constraints<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MCU (Microcontroller Unit):<\/strong> If your TFT touch display is driven by an MCU (e.g., via SPI or an 8080 parallel interface), you do not have a dedicated GPU. Every pixel transition, alpha blending (transparency), and anti-aliased font requires the CPU to calculate the math.\n<ul class=\"wp-block-list\">\n<li><strong>The UI Rule:<\/strong> Avoid full-screen animations, complex gradients, and overlapping transparent layers. Use flat design, solid colors, and sprite-based animations.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MPU (Microprocessor Unit):<\/strong> If your display is driven by a Linux-based MPU (e.g., Raspberry Pi Compute Module, NXP i.MX) via MIPI DSI or HDMI, you have hardware acceleration.\n<ul class=\"wp-block-list\">\n<li><strong>The UI Rule:<\/strong> You can implement fluid transitions, drop shadows, and vector graphics, but you must still optimize asset sizes to ensure fast boot times.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 id=\"resistive-vs-pcap-touch-limitations\" class=\"wp-block-heading\">Resistive vs. PCAP Touch Limitations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The type of touch panel integrated into your TFT touch display entirely dictates your interaction design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ud22c\uc601 \uc815\uc804\uc6a9\ub7c9\uc2dd(PCAP):<\/strong> Supports multi-touch and light swipes (like a smartphone). You can use pinch-to-zoom and swipe-to-scroll gestures.<\/li>\n\n\n\n<li><strong>\uc800\ud56d\ub9c9\uc2dd:<\/strong> Requires physical pressure to register a touch. It is single-touch only. <strong>Do not use swipe gestures on a resistive screen.<\/strong> If a user tries to \u201cswipe\u201d a resistive screen, their finger will drag and skip, resulting in a terrible experience. Rely exclusively on clearly defined \u201cTap\u201d buttons (Up\/Down arrows) for navigation.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"2-the-geometry-of-interaction-sizing-spacing-and-ergonomics\" class=\"wp-block-heading\">2. The Geometry of Interaction: Sizing, Spacing, and Ergonomics<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In an industrial or medical setting, users are often stressed, distracted, or wearing personal protective equipment (PPE). Your UI must accommodate the \u201cFat Finger Problem\u201d and adhere to ergonomic standards (such as ISO 9241-11 and ADA guidelines).<\/p>\n\n\n\n<h3 id=\"touch-target-sizing-fittss-law\" class=\"wp-block-heading\">Touch Target Sizing (Fitts\u2019s Law)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Fitts\u2019s Law states that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. Make your buttons big.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bare Hands (Consumer\/Smart Home):<\/strong> The absolute minimum touch target size should be <strong>9mm x 9mm<\/strong> (roughly 48\u00d748 pixels on a standard 100-150 PPI display).<\/li>\n\n\n\n<li><strong>Gloved Hands (Industrial\/Medical):<\/strong> If the operator is wearing nitrile or heavy leather work gloves, buttons must be increased to a minimum of <strong>15mm x 15mm<\/strong> to prevent accidental misclicks.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"spacing-and-dead-zones\" class=\"wp-block-heading\">Spacing and \u201cDead Zones\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Do not pack buttons tightly together. Leave a minimum of <strong>2mm to 3mm of dead space<\/strong> between interactive elements. Furthermore, avoid placing critical action buttons (like \u201cEmergency Stop\u201d or \u201cFormat Drive\u201d) in the extreme corners of the TFT touch display. The extreme edges of standard PCAP and resistive touch panels are often the least sensitive areas due to the bezel overlay and sensor routing. Place critical buttons slightly inset from the bezel.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"3-visual-hierarchies-and-color-psychology\" class=\"wp-block-heading\">3. Visual Hierarchies and Color Psychology<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An embedded TFT touch display does not have the OLED-level contrast ratios of a modern iPhone. You must design your color palette defensively to compensate for the hardware\u2019s optical characteristics.<\/p>\n\n\n\n<h3 id=\"the-rgb565-limitation\" class=\"wp-block-heading\">The RGB565 Limitation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many embedded TFT displays use a 16-bit color format (RGB565) rather than 24-bit True Color (RGB888) to save RAM. RGB565 allows for 65,536 colors.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Problem:<\/strong> Subtle gradients will exhibit severe \u201ccolor banding\u201d (harsh, visible lines between color transitions).<\/li>\n\n\n\n<li><strong>\ud574\uacb0\ucc45:<\/strong> Use flat UI design. If you must use gradients, apply a \u201cdithering\u201d effect to the image asset before loading it into your UI framework.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"contrast-ratios-and-glare\" class=\"wp-block-heading\">Contrast Ratios and Glare<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If your device is used outdoors or in a brightly lit factory floor, glare will wash out subtle color differences.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Avoid Low-Contrast Text:<\/strong> Gray text on a dark gray background looks sleek on your MacBook, but it will be entirely illegible on a 350-nit TFT panel under fluorescent lighting. Adhere to the <strong>WCAG 2.1 AA standard<\/strong>, which requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.<\/li>\n\n\n\n<li><strong>True Black vs. Dark Gray:<\/strong> LCDs rely on a backlight. \u201cPure black\u201d (#000000) on a TFT panel often looks like a glowing, washed-out dark gray in a dim room. Instead of pure black, use a rich dark blue or charcoal gray (#121212) for your backgrounds. It hides the backlight bleed and makes the UI look more premium.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"typographic-clarity\" class=\"wp-block-heading\">Typographic Clarity<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Embedded fonts are usually pre-rendered bitmaps to save processing power.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid thin, elegant serif fonts. They will look pixelated and broken on a 1024\u00d7600 resolution TFT touch display.<\/li>\n\n\n\n<li>\uacac\uace0\ud55c \uc0b0\uc138\ub9ac\ud504 \ud3f0\ud2b8(Roboto, Open Sans, Inter \ub4f1)\ub97c \uc0ac\uc6a9\ud558\uc2ed\uc2dc\uc624. \ud3f0\ud2b8 \ub450\uaed8\ub294 \u201cRegular\u201d \ub610\ub294 \u201cBold\u201d\ub85c \uc720\uc9c0\ud558\uc2ed\uc2dc\uc624.\u201d<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"4-compensating-for-hardware-lag-the-illusion-of-speed\" class=\"wp-block-heading\">4. Compensating for Hardware Lag: The Illusion of Speed<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uac00 \uc798 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\ub354\ub77c\ub3c4, MCU \uae30\ubc18 TFT \ud130\uce58 \ub514\uc2a4\ud50c\ub808\uc774\uac00 \uc0c8 \ud654\uba74\uc744 \ub85c\ub4dc\ud558\uac70\ub098 \ubcf5\uc7a1\ud55c \uba85\ub839\uc744 \ucc98\ub9ac\ud558\ub294 \ub370 100~300\ubc00\ub9ac\ucd08\uac00 \uc18c\uc694\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc778\uac04\uc758 \ub1cc\ub294 100ms \uc774\uc0c1\uc758 \uc9c0\uc5f0\uc744 \u201c\ub809(lag)\u201d\uc73c\ub85c \uc778\uc2dd\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc9c0\uc5f0\uc744 \uac00\ub9b4 \uc218 \uc788\ub3c4\ub85d UI\ub97c \uc124\uacc4\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 id=\"the-critical-role-of-state-changes\" class=\"wp-block-heading\">The Critical Role of State Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790\uac00 \uc2a4\ub9c8\ud2b8\ud3f0\uc5d0\uc11c \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ud585\ud2f1 \ubaa8\ud130\uac00 \uc989\uc2dc \uc9c4\ub3d9\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc TFT \ud130\uce58 \ub514\uc2a4\ud50c\ub808\uc774\uc5d0\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ud585\ud2f1 \ubaa8\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc989\uac01\uc801\uc778 \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. <em>\uc2dc\uac01\uc801<\/em> \ud53c\ub4dc\ubc31.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ub20c\ub9bc \uc0c1\ud0dc:<\/strong> \ubaa8\ub4e0 \ubc84\ud2bc\uc740 \uba85\ud655\ud55c \u201c\ub20c\ub9bc\u201d \uc0c1\ud0dc(\uc608: \ubc84\ud2bc\uc774 \ub354 \uc5b4\ub450\uc6b4 \uc0c9\uc73c\ub85c \ubcc0\ud558\uac70\ub098 \uadf8\ub9bc\uc790\uac00 \uc0ac\ub77c\uc838 \u201c\ub20c\ub824 \ub4e4\uc5b4\uac04\u201d \uac83\ucc98\ub7fc \ubcf4\uc774\uac8c)\ub97c \uac00\uc838\uc57c \ud569\ub2c8\ub2e4. \uc774 \uc0c1\ud0dc \ubcc0\ud654\ub294 \ud130\uce58 \uc778\ud130\ub7fd\ud2b8\uac00 \ud2b8\ub9ac\uac70\ub418\ub294 \uc21c\uac04, MCU\uac00 \uc2e4\uc81c \uba85\ub839 \ucc98\ub9ac\ub97c \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \ubc1c\uc0dd\ud574\uc57c \ud569\ub2c8\ub2e4., <em>\uba85\ub839 \ucc98\ub9ac \uc804\uc5d0.<\/em> \uccad\uac01\uc801 \ud53c\ub4dc\ubc31:.<\/li>\n\n\n\n<li><strong>\ud558\ub4dc\uc6e8\uc5b4\uc5d0 \uc555\uc804 \ubd80\uc800\uac00 \ud3ec\ud568\ub41c \uacbd\uc6b0, \ubaa8\ub4e0 \uc720\ud6a8\ud55c \ud130\uce58 \uc785\ub825\uc5d0 \ub300\ud574 \uc9e7\uace0 \uc120\uba85\ud55c 20ms \"\ud074\ub9ad\"\uc74c\uc744 \ud504\ub85c\uadf8\ub798\ubc0d\ud558\uc2ed\uc2dc\uc624. \uc774 \uccad\uac01\uc801 \ud655\uc778\uc740 \uc0ac\uc6a9\uc790 \ubd88\ub9cc\uc744 \uadf9\uc801\uc73c\ub85c \uc904\uc5ec\uc90d\ub2c8\ub2e4.<\/strong> \uc804\ud658(\uc608: SD \uce74\ub4dc\uc5d0 \ub370\uc774\ud130 \uc800\uc7a5 \ub610\ub294 Wi-Fi \ub124\ud2b8\uc6cc\ud06c \uac80\uc0c9)\uc774 300ms \uc774\uc0c1 \uc18c\uc694\ub420 \uacbd\uc6b0, \ud654\uba74\uc744 \uc815\uc9c0 \uc0c1\ud0dc\ub85c \ub450\uc9c0 \ub9c8\uc2ed\uc2dc\uc624. \uc0ac\uc6a9\uc790\ub294 \uc7a5\uce58\uac00 \uace0\uc7a5 \ub0ac\ub2e4\uace0 \uc0dd\uac01\ud558\uace0 \ud654\uba74\uc744 \uc5f0\ud0c0\ud558\uae30 \uc2dc\uc791\ud560 \uac83\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"loading-indicators\" class=\"wp-block-heading\">Loading Indicators<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989\uc2dc \uac04\ub2e8\ud558\uace0 \ub9ac\uc18c\uc2a4 \uc0ac\uc6a9\ub7c9\uc774 \uc801\uc740 \ud68c\uc804 \uc2a4\ud504\ub77c\uc774\ud2b8 \ub610\ub294 \ubaa8\ub798\uc2dc\uacc4 \uc544\uc774\ucf58\uc744 \ud45c\uc2dc\ud558\uc2ed\uc2dc\uc624.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc0b0\uc5c5 \ubc0f \uc804\ubb38 \ud658\uacbd\uc5d0\uc11c \uc0ac\uc6a9\uc790\ub294 \uc791\uc5c5\uc744 \uc218\ud589 \uc911\uc774\uba70, \uce90\uc8fc\uc5bc\ud558\uac8c \ud0d0\uc0c9\ud558\ub294 \uac83\uc774 \uc544\ub2d9\ub2c8\ub2e4. \uc7a5\uce58\ub97c \uc791\ub3d9\ud558\ub294 \ub370 \ud544\uc694\ud55c \uc778\uc9c0 \ubd80\ud558(cognitive load)\ub294 \uac70\uc758 0\uc5d0 \uac00\uae4c\uc6cc\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"5-navigational-architecture-flatten-the-curve\" class=\"wp-block-heading\">5. Navigational Architecture: Flatten the Curve<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\"\uc138 \ubc88 \ud130\uce58\" \uaddc\uce59.<\/p>\n\n\n\n<h3 id=\"the-threetap-rule\" class=\"wp-block-heading\">\uc0ac\uc6a9\uc790\ub294 \ud648 \ud654\uba74\uc5d0\uc11c \uc138 \ubc88\uc758 \ud130\uce58 \ub0b4\uc5d0 \ubaa8\ub4e0 \uc911\uc694 \uae30\ub2a5\uc5d0 \ub3c4\ub2ec\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ud544\uc218\uc801\uc778 \uae30\uacc4 \uc81c\uc5b4 \uae30\ub2a5\uc744 \uae4a\uace0 \uc911\ucca9\ub41c \uba54\ub274\uc5d0 \uc228\uae30\uc9c0 \ub9c8\uc2ed\uc2dc\uc624.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2a4\uc640\uc774\ud504\ub85c \ub4a4\ub85c \uac00\uae30 \uc81c\uc2a4\ucc98\ub97c \uc0ac\uc6a9\ud558\ub294 \uc2a4\ub9c8\ud2b8\ud3f0 \uc571\uacfc \ub2ec\ub9ac, \uc784\ubca0\ub514\ub4dc TFT UI\ub294 \ud56d\uc0c1 \uc9c0\uc18d\uc801\uc778 \ud0d0\uc0c9 \ud45c\uc2dc\uc904(\ubcf4\ud1b5 \ud654\uba74 \uc0c1\ub2e8 \ub610\ub294 \ud558\ub2e8)\uc744 \uac16\ucd94\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 id=\"persistent-navigation\" class=\"wp-block-heading\">Persistent Navigation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud56d\uc0c1 \ub208\uc5d0 \uc798 \ub744\ub294 \"\ud648\" \ubc84\ud2bc\uc744 \ud3ec\ud568\ud558\uc2ed\uc2dc\uc624.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud56d\uc0c1 \u201c\ub4a4\ub85c\u201d \ubc84\ud2bc\uc744 \ud3ec\ud568\ud558\uc2ed\uc2dc\uc624.<\/li>\n\n\n\n<li>\ud45c\uc900\uc801\uc774\uace0 \ubcf4\ud3b8\uc801\uc73c\ub85c \uc778\uc2dd\ub418\ub294 \uc544\uc774\ucf58(\uc124\uc815\uc740 \ud1b1\ub2c8\ubc14\ud034, \uba54\uc778 \ub300\uc2dc\ubcf4\ub4dc\ub294 \uc9d1 \ubaa8\uc591)\uc744 \uc0ac\uc6a9\ud558\uc2ed\uc2dc\uc624. \ud45c\uc900 \uae30\ub2a5\uc5d0 \ub300\ud574 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc544\uc774\ucf58\uc744 \ubc1c\uba85\ud558\uc9c0 \ub9c8\uc2ed\uc2dc\uc624. \uc0ac\uc6a9\uc790\uac00 \ub3c5\uc790\uc801\uc778 \uc2dc\uac01 \uc5b8\uc5b4\ub97c \ubc30\uc6b8 \uc2dc\uac04\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>UI \ub514\uc790\uc774\ub108\uc758 Figma \ud30c\uc77c\uacfc \uc784\ubca0\ub514\ub4dc \uc5d4\uc9c0\ub2c8\uc5b4\uc758 C++ \ucf54\ub4dc \uac04\uc758 \uaca9\ucc28\ub97c \ud574\uc18c\ud558\ub294 \uac83\uc740 \uc5ed\uc0ac\uc801\uc73c\ub85c TFT \ud130\uce58 \ub514\uc2a4\ud50c\ub808\uc774 \uac1c\ubc1c\uc5d0\uc11c \uac00\uc7a5 \uace0\ud1b5\uc2a4\ub7ec\uc6b4 \ubd80\ubd84\uc774\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\ud589\ud788\ub3c4 \ud604\ub300 GUI \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uc774 \uc6cc\ud06c\ud50c\ub85c\uc6b0\ub97c \ud601\uc2e0\uc801\uc73c\ub85c \ubcc0\ud654\uc2dc\ucf30\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"6-prototyping-and-implementation-the-tech-stack\" class=\"wp-block-heading\">6. Prototyping and Implementation: The Tech Stack<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc720\ub7fd \ub610\ub294 \ubbf8\uad6d \uc2dc\uc7a5\uc744 \ub300\uc0c1\uc73c\ub85c \uac1c\ubc1c\ud558\ub294 \uacbd\uc6b0, \ub2e4\uc74c \uc5c5\uacc4 \ud45c\uc900 \ud504\ub808\uc784\uc6cc\ud06c \uc911 \ud558\ub098\ub97c \ud65c\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4:.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TouchGFX (STMicroelectronics):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>STM32 MCU\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0, \uc774\uac83\uc774 \ucd5c\uace0 \ud45c\uc900\uc785\ub2c8\ub2e4. WYSIWYG(What You See Is What You Get) \ub514\uc790\uc774\ub108\ub97c \ud3ec\ud568\ud558\uc5ec \uace0\ub3c4\ub85c \ucd5c\uc801\ud654\ub41c C++ \ucf54\ub4dc\ub97c \uc790\ub3d9 \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc800\uc0ac\uc591 \ud558\ub4dc\uc6e8\uc5b4\uc5d0\uc11c 60FPS\ub97c \ub04c\uc5b4\ub0b4\ub3c4\ub85d \ud2b9\ubcc4\ud788 \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/strong> LVGL:.<\/li>\n\n\n\n<li><strong>\uc804\ubb38\uac00\uc6a9 \uc2a4\ud0dd:<\/strong> \ub9e4\uc6b0 \uac15\ub825\ud55c \uc624\ud508 \uc18c\uc2a4 C \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ud558\ub4dc\uc6e8\uc5b4\uc5d0 \uad6c\uc560\ubc1b\uc9c0 \uc54a\uc544 NXP, ESP32 \ub610\ub294 STM32 \uce69\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac00\ubccd\uc9c0\ub9cc TouchGFX\ubcf4\ub2e4 \uc218\ub3d9 \ucf54\ub529\uc774 \ub2e4\uc18c \ud544\uc694\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Qt for MCUs \/ Qt Design Studio:<\/strong> \uace0\uae09 \uc784\ubca0\ub514\ub4dc \uc7a5\uce58(\uc885\uc885 MPU\uc5d0\uc11c Linux \uc2e4\ud589)\uc758 \uacbd\uc6b0, Qt\ub294 \uc2a4\ub9c8\ud2b8\ud3f0\uacfc \uc720\uc0ac\ud55c \uac1c\ubc1c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ube44\uc6a9\uc774 \ub9ce\uc774 \ub4e4\uc9c0\ub9cc \ucd5c\uace0 \uc218\uc900\uc758 \uadf8\ub798\ud53d \ucda9\uc2e4\ub3c4\uc640 \uc2e0\uc18d\ud55c \ud504\ub85c\ud1a0\ud0c0\uc774\ud551\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"conclusion-empathy-in-engineering\" class=\"wp-block-heading\">Conclusion: Empathy in Engineering<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">TFT \ud130\uce58 \ub514\uc2a4\ud50c\ub808\uc774\ub97c \uc704\ud55c \uc9c1\uad00\uc801\uc778 UI\ub97c \uc124\uacc4\ud558\ub294 \uac83\uc740 \uacf5\ud559\uc801 \uacf5\uac10(engineering empathy)\uc758 \uc5f0\uc2b5\uc785\ub2c8\ub2e4. \ud558\ub4dc\uc6e8\uc5b4\uc758 \ud55c\uacc4\uc5d0 \uacf5\uac10\ud558\uc5ec \ubd88\ud544\uc694\ud55c \uadf8\ub798\ud53d \ubd80\ud558\ub85c MCU\uc5d0 \uacfc\ubd80\ud558\ub97c \uc8fc\uc9c0 \uc54a\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4. \ub354 \uc911\uc694\ud55c \uac83\uc740, \uace0\uc2a4\ud2b8\ub808\uc2a4, \uc870\uba85\uc774 \uc5b4\ub461\uac70\ub098 \ube60\ub978 \uc18d\ub3c4\uc758 \ud658\uacbd\uc5d0\uc11c \uc7a5\uce58\ub97c \uc791\ub3d9\ud560 \uc218 \uc788\ub294 \ucd5c\uc885 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uacf5\uac10\ud574\uc57c \ud55c\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc778\uccb4\uacf5\ud559\uc801 \ud130\uce58 \ub300\uc0c1(target)\uc744 \uc5c4\uaca9\ud788 \uc900\uc218\ud558\uace0, \ud558\ub4dc\uc6e8\uc5b4 \uc81c\uc57d\uc744 \uac00\ub9ac\uae30 \uc704\ud574 \ud50c\ub7ab \ub514\uc790\uc778 \uc6d0\uce59\uc744 \ud65c\uc6a9\ud558\uba70, \uc989\uac01\uc801\uc778 \uc2dc\uac01\uc801 \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud568\uc73c\ub85c\uc368, \uc81c\ud488\uc744 \ub2e8\uc21c\ud55c \uae30\ub2a5\uc801 \uae30\uacc4\uc5d0\uc11c \ud504\ub9ac\ubbf8\uc5c4 \uc804\ubb38\uac00\uc6a9 \ub3c4\uad6c\ub85c \ub04c\uc5b4\uc62c\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"frequently-asked-questions-faq\" class=\"wp-block-heading\">\uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38(FAQ)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: \uc544\ub984\ub2e4\uc6b4 UI\ub97c \uc124\uacc4\ud588\uc9c0\ub9cc \ud398\uc774\uc9c0 \uc804\ud658 \uc2dc \ud654\uba74\uc774 \uc2ec\ud558\uac8c \uae5c\ube61\uc785\ub2c8\ub2e4. \uc5b4\ub5bb\uac8c \ud574\uacb0\ud569\ub2c8\uae4c?<\/strong> <strong>A:<\/strong> \uc774\ub97c \u201c\ud14c\uc5b4\ub9c1(tearing)\u201d\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. MCU\uac00 TFT \ucee8\ud2b8\ub864\ub7ec\uac00 \ud654\uba74\uc744 \uadf8\ub9ac\ub294 \uc911\uc5d0 \ub514\uc2a4\ud50c\ub808\uc774 \ubc84\ud37c\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774\uc911 \ubc84\ud37c\ub9c1(double buffering)\uc744 \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4. <strong>\ubc84\ud37c B:<\/strong>. \uc774\ub97c \uc704\ud574 \ub450 \uac1c\uc758 \uc804\uccb4 \ud504\ub808\uc784\ubc84\ud37c\ub97c \uc800\uc7a5\ud560 \ucda9\ubd84\ud55c RAM\uc744 \ud655\ubcf4\ud574\uc57c \ud569\ub2c8\ub2e4. MCU\ub294 \ub2e4\uc74c \ud654\uba74\uc744 \ubc31\uadf8\ub77c\uc6b4\ub4dc \ubc84\ud37c\uc5d0 \uc644\uc804\ud788 \uadf8\ub9b0 \ud6c4, VSYNC(\uc218\uc9c1 \ub3d9\uae30\ud654) \uae30\uac04 \ub3d9\uc548\uc5d0\ub9cc \ud65c\uc131 \ub514\uc2a4\ud50c\ub808\uc774\ub85c \uad50\uccb4\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: \uc784\ubca0\ub514\ub4dc UI\uc5d0\uc11c PNG \ub610\ub294 JPEG \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\uae4c?<\/strong> <strong>A:<\/strong> \uc77c\ubc18\uc801\uc73c\ub85c \ubd88\uac00\ub2a5\ud569\ub2c8\ub2e4. PNG\ub098 JPEG\uc640 \uac19\uc740 \uc555\ucd95 \uc774\ubbf8\uc9c0 \ud615\uc2dd\uc744 \ub514\ucf54\ub529\ud558\ub824\uba74 \ub9c9\ub300\ud55c CPU \uc624\ubc84\ud5e4\ub4dc\uac00 \ud544\uc694\ud558\uba70 MCU\uc5d0\uc11c \ub108\ubb34 \uc624\ub798 \uac78\ub9bd\ub2c8\ub2e4. UI \ud504\ub808\uc784\uc6cc\ud06c(TouchGFX \ub610\ub294 LVGL \ub4f1)\ub294 \ucef4\ud30c\uc77c \uacfc\uc815\uc5d0\uc11c PNG\ub97c \uc6d0\uc2dc C-\ubc30\uc5f4(\ube44\ud2b8\ub9f5)\ub85c \ubcc0\ud658\ud569\ub2c8\ub2e4. \ub2e8\uc810\uc740 \uc6d0\uc2dc \ube44\ud2b8\ub9f5\uc774 \ud50c\ub798\uc2dc \uba54\ubaa8\ub9ac \uacf5\uac04\uc744 \ud6e8\uc52c \ub354 \ub9ce\uc774 \ucc28\uc9c0\ud55c\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: PCAP \ud130\uce58 \uc2a4\ud06c\ub9b0\uc5d0 \ubb3c\ubc29\uc6b8\uc774 \ub5a8\uc5b4\uc9c0\uba74 \uc720\ub839 \ud130\uce58(phantom touch)\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. UI\ub85c \uc774\ub97c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\uae4c?<\/strong> <strong>A:<\/strong> \uc18c\ud504\ud2b8\uc6e8\uc5b4\ub294 \uc815\uc804\uc2dd \ub178\uc774\uc988\ub97c \ud544\ud130\ub9c1\ud558\ub294 \ub370 \ud55c\uacc4\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ud130\uce58 \ucee8\ud2b8\ub864\ub7ec \ucf54\ub4dc\uc5d0 \u201c\ub514\ubc14\uc6b4\uc2a4(debounce)\u201d \uc54c\uace0\ub9ac\uc998\uc744 \uad6c\ud604\ud558\uc5ec \ucd08\uace0\uc18d, \ubd88\uaddc\uce59\ud55c \uc785\ub825\uc744 \ubb34\uc2dc\ud560 \uc218\ub294 \uc788\uc9c0\ub9cc, \uc9c4\uc815\ud55c \ud574\uacb0\ucc45\uc740 \ud558\ub4dc\uc6e8\uc5b4 \uae30\ubc18\uc785\ub2c8\ub2e4. \ud130\uce58 \ucee8\ud2b8\ub864\ub7ec IC(\uc608: Goodix, FocalTech)\uc758 \ud38c\uc6e8\uc5b4\ub97c \uc870\uc815\ud558\uc5ec \ubb3c\uacfc \uc0ac\ub78c \uc190\uac00\ub77d\uc758 \uc815\uc804 \uc6a9\ub7c9 \uc2e0\ud638\ub97c \uad6c\ubcc4\ud558\uac70\ub098, \uc7a5\uce58\uac00 \uc9c0\uc18d\uc801\uc73c\ub85c \uc816\ub294 \ud658\uacbd\uc774\ub77c\uba74 \uc800\ud56d\ub9c9 \ubc29\uc2dd \ud130\uce58 \uc2a4\ud06c\ub9b0\uc73c\ub85c \uc804\ud658\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: \uc0ac\uc6a9\uc790 \uc815\uc758 \ud3f0\ud2b8\uac00 TFT \ub514\uc2a4\ud50c\ub808\uc774\uc5d0\uc11c \ud1b1\ub2c8 \ubaa8\uc591\uc73c\ub85c \uac70\uce60\uac8c \ubcf4\uc785\ub2c8\ub2e4. \uc774\uc720\ub294 \ubb34\uc5c7\uc785\ub2c8\uae4c?<\/strong> <strong>A:<\/strong> \uc784\ubca0\ub514\ub4dc TFT\ub294 \ub370\uc2a4\ud06c\ud1b1 \uc6b4\uc601 \uccb4\uc81c\uc5d0\uc11c \ubcfc \uc218 \uc788\ub294 \uace0\uae09 \uc11c\ube0c\ud53d\uc140 \uc548\ud2f0\uc568\ub9ac\uc5b4\uc2f1\uc774 \ubd80\uc871\ud569\ub2c8\ub2e4. \uc774\ub97c \ud574\uacb0\ud558\ub824\uba74 UI \ud504\ub808\uc784\uc6cc\ud06c\uac00 4\ube44\ud2b8 \ud53d\uc140\ub2f9(4bpp) \uc548\ud2f0\uc568\ub9ac\uc5b4\uc2f1\uc73c\ub85c \ud3f0\ud2b8\ub97c \uc0dd\uc131\ud558\ub3c4\ub85d \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. <strong>4bpp \uc548\ud2f0\uc568\ub9ac\uc5b4\uc2f1.<\/strong>. \uc774\ub807\uac8c \ud558\uba74 \ubb38\uc790 \uc8fc\uc704\uc5d0 \ubc18\ud22c\uba85 \ud53d\uc140\uc744 \ucd94\uac00\ud558\uc5ec \uac00\uc7a5\uc790\ub9ac\ub97c \ubd80\ub4dc\ub7fd\uac8c \ub9cc\ub4ed\ub2c8\ub2e4. \ub610\ud55c \uc800\ud574\uc0c1\ub3c4 \ud654\uba74\uc5d0\uc11c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub354 \uc798 \ub80c\ub354\ub9c1\ub418\ub294 \uad75\uc740 \uc0b0\uc138\ub9ac\ud504 \ud3f0\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc2ed\uc2dc\uc624.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: \uc0b0\uc5c5 \ud658\uacbd\uc5d0\uc11c \uc0c9\ub9f9 \uc0ac\uc6a9\uc790\ub97c \uc704\ud574 \uc5b4\ub5bb\uac8c \uc124\uacc4\ud569\ub2c8\uae4c?<\/strong> <strong>A:<\/strong> \uc911\uc694\ud55c \uc815\ubcf4\ub97c \uc804\ub2ec\ud558\ub294 \ub370 \uc0c9\uc0c1\uc5d0\ub9cc \uc758\uc874\ud558\uc9c0 \ub9c8\uc2ed\uc2dc\uc624. \uae30\uacc4 \uc0c1\ud0dc\uac00 \u201c\uc624\ub958\u201d\ub85c \ubcc0\uacbd\ub420 \ub54c \ub2e8\uc21c\ud788 \uc0c1\ud0dc \ud45c\uc2dc\uae30\ub97c \ub179\uc0c9\uc5d0\uc11c \ube68\uac04\uc0c9\uc73c\ub85c \ubc14\uafb8\uc9c0 \ub9c8\uc2ed\uc2dc\uc624. \ub300\uc2e0 \ubaa8\uc591\ub3c4 \ubcc0\uacbd(\uc608: \ub179\uc0c9 \uc6d0\uc5d0\uc11c \ube68\uac04\uc0c9 \uc0bc\uac01\ud615\uc73c\ub85c)\ud558\uace0 \uba85\uc2dc\uc801\uc778 \ud14d\uc2a4\ud2b8(\uc608: \u201cFAULT\u201d)\ub97c \ucd94\uac00\ud558\uc2ed\uc2dc\uc624. \uc774\ub294 ADA(\ubbf8\uad6d \uc7a5\uc560\uc778\ubc95)\ub97c \uc900\uc218\ud558\uace0 \uc0ac\uc6a9\uc790\uc758 \uc2dc\ub825\uc5d0 \uad00\uacc4\uc5c6\uc774 \uc548\uc804\uc744 \ubcf4\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>When a user walks up to an industrial control panel, a smart thermostat, or a medical ventilator, their expectation has already been set by the smartphone in their pocket. They expect fluid animations, instantaneous feedback, and an intuitive layout. However, as any embedded engineer or UI\/UX designer working in the European and North American markets [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":45227,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[438],"tags":[],"class_list":["post-45225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledge"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/posts\/45225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/comments?post=45225"}],"version-history":[{"count":1,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/posts\/45225\/revisions"}],"predecessor-version":[{"id":45226,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/posts\/45225\/revisions\/45226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/media\/45227"}],"wp:attachment":[{"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/media?parent=45225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/categories?post=45225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rjydisplay.com\/ko\/wp-json\/wp\/v2\/tags?post=45225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}