<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kim Woohyeok</title>
    <description>The latest articles on DEV Community by Kim Woohyeok (@kim_woohyeok_84171633072f).</description>
    <link>https://dev.to/kim_woohyeok_84171633072f</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4131703%2F549675a7-4f12-45b5-90d9-ccbc879db445.png</url>
      <title>DEV Community: Kim Woohyeok</title>
      <link>https://dev.to/kim_woohyeok_84171633072f</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kim_woohyeok_84171633072f"/>
    <language>en</language>
    <item>
      <title>I Built a Mac Presentation Toolkit for Technical Demos &amp; Teaching (Screen Annotation, Whiteboards &amp; More)</title>
      <dc:creator>Kim Woohyeok</dc:creator>
      <pubDate>Thu, 24 Sep 2026 23:27:48 +0000</pubDate>
      <link>https://dev.to/kim_woohyeok_84171633072f/i-built-a-mac-presentation-toolkit-for-technical-demos-teaching-screen-annotation-whiteboards--3542</link>
      <guid>https://dev.to/kim_woohyeok_84171633072f/i-built-a-mac-presentation-toolkit-for-technical-demos-teaching-screen-annotation-whiteboards--3542</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;I work as a Software Architect and Technical Instructor, and a big part of my job is explaining technical concepts to other people.&lt;/p&gt;

&lt;p&gt;Architecture diagrams. Code. Software demos. APIs. System behavior.&lt;/p&gt;

&lt;p&gt;While presenting on a Mac, I often find myself needing to do things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Draw directly on top of a slide, browser, or IDE&lt;/li&gt;
&lt;li&gt;Point out exactly where people should look&lt;/li&gt;
&lt;li&gt;Sketch a diagram when the prepared slides aren't enough&lt;/li&gt;
&lt;li&gt;Bring an existing image or PDF into the explanation&lt;/li&gt;
&lt;li&gt;Keep what I created and reuse it in another session&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are already great tools that solve each of these problems individually.&lt;/p&gt;

&lt;p&gt;But during an actual technical session, I don't want to think about which tool I need next.&lt;/p&gt;

&lt;p&gt;I want to stay in the explanation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The problem wasn't the lack of annotation tools. It was the interruption of the explanation flow.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's one of the reasons I started building a Mac app called &lt;strong&gt;TeacherPalette&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Rather than simply introducing the app, I wanted to share the problem I was trying to solve and why I designed the workflow this way.&lt;/p&gt;

&lt;h2&gt;
  
  
  First, here's TeacherPalette in 30 seconds
&lt;/h2&gt;

&lt;p&gt;I recently made a short preview showing the current experience:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=IlkBNHuxX_A" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=IlkBNHuxX_A&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are no subtitles or narration.&lt;/p&gt;

&lt;p&gt;It starts with drawing directly on screen, moves into tools for guiding attention, expands into a Whiteboard, and then brings existing images and PDFs into the same explanation flow.&lt;/p&gt;

&lt;p&gt;The individual features matter, but connecting them is what I care about more.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Draw directly on any screen
&lt;/h2&gt;

&lt;p&gt;Prepared slides rarely contain everything I need during a technical session.&lt;/p&gt;

&lt;p&gt;Imagine I'm showing an architecture diagram and saying:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The request enters here.&lt;/p&gt;

&lt;p&gt;Only this part is asynchronous.&lt;/p&gt;

&lt;p&gt;These two components communicate with each other.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes adding an arrow or highlighting a component is much faster than trying to explain its position verbally.&lt;/p&gt;

&lt;p&gt;TeacherPalette therefore lets me draw over almost anything displayed on my Mac using tools such as Pen, Highlighter, Arrow, and Shapes.&lt;/p&gt;

&lt;p&gt;That could be a presentation, browser, IDE, online meeting, diagram, or software demo.&lt;/p&gt;

&lt;p&gt;The thing I'm already showing becomes the canvas.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Guide attention without drawing everywhere
&lt;/h2&gt;

&lt;p&gt;Drawing isn't always the right answer.&lt;/p&gt;

&lt;p&gt;During a software demo, for example, I may simply want everyone to look at one button without leaving permanent marks all over the interface.&lt;/p&gt;

&lt;p&gt;So I added another set of tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Spotlight&lt;/li&gt;
&lt;li&gt;Laser Pointer&lt;/li&gt;
&lt;li&gt;Magnifier&lt;/li&gt;
&lt;li&gt;Cursor Highlight&lt;/li&gt;
&lt;li&gt;Click Highlight&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Magnifier was particularly important to me.&lt;/p&gt;

&lt;p&gt;Instead of zooming the entire display, it enlarges only the area I want to show while preserving the surrounding context.&lt;/p&gt;

&lt;p&gt;That can be useful when explaining a dense UI, a small piece of code, or a complex architecture diagram.&lt;/p&gt;

&lt;p&gt;The goal isn't to add visual effects for their own sake.&lt;/p&gt;

&lt;p&gt;Each tool should answer the same question:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How can I make it immediately obvious where the audience should look?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. When the slide isn't enough, move to a Whiteboard
&lt;/h2&gt;

&lt;p&gt;At some point during a technical explanation, I often say something like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This might be easier if I draw it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's where the Whiteboard comes in.&lt;/p&gt;

&lt;p&gt;TeacherPalette includes a multi-page Whiteboard where I can quickly sketch something like:&lt;/p&gt;

&lt;p&gt;Client → API → Service → Database&lt;/p&gt;

&lt;p&gt;and continue onto another page when I need more space.&lt;/p&gt;

&lt;p&gt;But I didn't want the Whiteboard to be a temporary canvas that disappears after the session.&lt;/p&gt;

&lt;p&gt;Whiteboards are saved so I can return to them later, continue working, or reuse something I created in another training session.&lt;/p&gt;

&lt;p&gt;For me, that distinction is important.&lt;/p&gt;

&lt;p&gt;A useful explanation shouldn't necessarily disappear when the meeting ends.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Bring existing material into the Whiteboard
&lt;/h2&gt;

&lt;p&gt;I also don't want to recreate everything inside TeacherPalette.&lt;/p&gt;

&lt;p&gt;Often I already have an architecture diagram, screenshot, or another piece of material that I want to discuss.&lt;/p&gt;

&lt;p&gt;So images can be dragged and dropped directly into the Whiteboard.&lt;/p&gt;

&lt;p&gt;From there I can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Highlight an important area&lt;/li&gt;
&lt;li&gt;Draw an arrow&lt;/li&gt;
&lt;li&gt;Add a note&lt;/li&gt;
&lt;li&gt;Continue the explanation around the existing material&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The idea is simple:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don't rebuild your material for the Whiteboard. Bring your material into the explanation.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Keep PDFs and Whiteboards in the same flow
&lt;/h2&gt;

&lt;p&gt;PDFs are another common part of technical training.&lt;/p&gt;

&lt;p&gt;Documentation, worksheets, specifications, training materials, and exported slide decks often arrive as PDFs.&lt;/p&gt;

&lt;p&gt;TeacherPalette can import a PDF into the Whiteboard so I can work directly on its pages.&lt;/p&gt;

&lt;p&gt;The workflow can then look like this:&lt;/p&gt;

&lt;p&gt;My own Whiteboard&lt;br&gt;&lt;br&gt;
↓&lt;br&gt;&lt;br&gt;
Add an existing PDF&lt;br&gt;&lt;br&gt;
↓&lt;br&gt;&lt;br&gt;
Explain and annotate the PDF&lt;br&gt;&lt;br&gt;
↓&lt;br&gt;&lt;br&gt;
Return to my own Whiteboard&lt;/p&gt;

&lt;p&gt;This is a small interaction, but it represents something important about the direction of the product.&lt;/p&gt;

&lt;p&gt;I don't want using a Whiteboard and working with a PDF to feel like two completely separate activities.&lt;/p&gt;

&lt;p&gt;They're both part of the same explanation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why put all of this into one app?
&lt;/h2&gt;

&lt;p&gt;There are already excellent Mac apps for drawing on screen.&lt;/p&gt;

&lt;p&gt;There are excellent Whiteboard apps.&lt;/p&gt;

&lt;p&gt;There are PDF annotation tools.&lt;/p&gt;

&lt;p&gt;So the problem I'm trying to solve with TeacherPalette isn't:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"How do I draw a line on my Mac screen?"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The problem I personally kept running into was:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Context switching while I'm trying to explain something.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Draw on the screen.&lt;/p&gt;

&lt;p&gt;Guide attention.&lt;/p&gt;

&lt;p&gt;Sketch something new.&lt;/p&gt;

&lt;p&gt;Bring in existing material.&lt;/p&gt;

&lt;p&gt;Explain a PDF.&lt;/p&gt;

&lt;p&gt;Keep what I created.&lt;/p&gt;

&lt;p&gt;Come back to it later.&lt;/p&gt;

&lt;p&gt;Technically, these are separate features.&lt;/p&gt;

&lt;p&gt;But from the perspective of someone teaching or presenting, they're often parts of one continuous activity.&lt;/p&gt;

&lt;p&gt;That's why I think of TeacherPalette less as a screen annotation app and more as a &lt;strong&gt;presentation toolkit for people who explain things on their Mac.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  I'm still building it — and I'd genuinely like feedback
&lt;/h2&gt;

&lt;p&gt;TeacherPalette is an indie project, and I'm continuing to improve it after launch.&lt;/p&gt;

&lt;p&gt;Feedback from early users has already influenced changes such as drag and drop in the Whiteboard, improvements to the PDF/Whiteboard workflow, and smaller UX refinements.&lt;/p&gt;

&lt;p&gt;I'm also working on localization beyond simply translating the interface.&lt;/p&gt;

&lt;p&gt;TeacherPalette currently supports nine languages, and I'm updating the App Store experience so screenshots and product messaging feel natural for users in markets such as Japan and Korea as well.&lt;/p&gt;

&lt;p&gt;But the product itself is still evolving.&lt;/p&gt;

&lt;p&gt;And that's one reason I wanted to share it here on DEV.&lt;/p&gt;

&lt;p&gt;A lot of people here explain technical things regularly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Live coding&lt;/li&gt;
&lt;li&gt;Architecture reviews&lt;/li&gt;
&lt;li&gt;Product demos&lt;/li&gt;
&lt;li&gt;Developer workshops&lt;/li&gt;
&lt;li&gt;Online training&lt;/li&gt;
&lt;li&gt;Pair programming&lt;/li&gt;
&lt;li&gt;Conference talks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I'd genuinely like to hear what you think.&lt;/p&gt;

&lt;p&gt;If you try TeacherPalette and find something awkward, tell me.&lt;/p&gt;

&lt;p&gt;If there's a feature you'd expect in a technical presentation workflow, tell me.&lt;/p&gt;

&lt;p&gt;If something feels unnecessary, I'd like to hear that too.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"I wouldn't use this because..." is just as useful to me as "I like this."&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As an indie developer, that kind of feedback can directly influence what I build next.&lt;/p&gt;

&lt;h2&gt;
  
  
  Giving 1% back to education
&lt;/h2&gt;

&lt;p&gt;TeacherPalette grew out of my own experience teaching and explaining technology.&lt;/p&gt;

&lt;p&gt;If the product grows, I'd like part of that success to go back into education.&lt;/p&gt;

&lt;p&gt;That's why I've committed to donating &lt;strong&gt;1% of TeacherPalette's profit to initiatives working to reduce educational inequality.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It's still a very small indie project.&lt;/p&gt;

&lt;p&gt;But I'd like the relationship to be simple:&lt;/p&gt;

&lt;p&gt;More people find TeacherPalette useful → TeacherPalette grows → a small part of that growth helps create learning opportunities for someone else.&lt;/p&gt;

&lt;p&gt;It's a small commitment today, but one I want to maintain as the product grows.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try TeacherPalette
&lt;/h2&gt;

&lt;p&gt;🌐 &lt;strong&gt;Official website&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://teacherpalette.com/" rel="noopener noreferrer"&gt;https://teacherpalette.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🍎 &lt;strong&gt;Mac App Store&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://apps.apple.com/app/teacherpalette/id6783567350?mt=12" rel="noopener noreferrer"&gt;https://apps.apple.com/app/teacherpalette/id6783567350?mt=12&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Eligible new subscribers can try all TeacherPalette features free for 7 days with a monthly or annual subscription.&lt;/p&gt;

&lt;p&gt;If you give it a try, I'd really appreciate your feedback — either here in the comments or through TeacherPalette's website.&lt;/p&gt;

&lt;p&gt;Thanks for reading.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Teach. Demo. Present. Create.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>presentation</category>
      <category>programming</category>
      <category>tools</category>
    </item>
    <item>
      <title>Hello all</title>
      <dc:creator>Kim Woohyeok</dc:creator>
      <pubDate>Fri, 18 Sep 2026 14:26:51 +0000</pubDate>
      <link>https://dev.to/kim_woohyeok_84171633072f/hello-all-4pj4</link>
      <guid>https://dev.to/kim_woohyeok_84171633072f/hello-all-4pj4</guid>
      <description>&lt;p&gt;I'm a newbie. Nice to e-meet you :)&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
