Skip to main content
HashnodeDoyeong Kim's Blog

Command Palette

Search for a command to run...

Claude 3.5 vs ChatGPT 4o: 웹 디자인 승부

Published
•4 min read
D
Doyeong Kim

This blog is nothing useful for you i think.

어느 날 문득 이런 말이 떠올랐다. ‘Claude가 ChatGPT보다 미적 감각이 뛰어나다. ChatGPT는 미적 감각이 구리다.’ 그래서 아주 간단하게 테스트해봤다. 사실 테스트라고 하기에도 민망한게, 여러 변수들을 통제하지 않고 단순한 프롬프트 한 문장만 비교를 해봤기 때문이다. 그렇기 때문에 콘텐츠 역시 AI가 자동으로 생성하게 되었다. (귀찮아서 그랬다.) 그렇기 때문에 사실 진지한 비교라고 보긴 민망하고, 재미로만 보자.

프롬프트:

HTML로 내가 새로 런칭할 주식 분석 블로그의 랜딩 페이지를 만들어줘.

결과물:

ChatGPT 4o 생성

ChatGPT 4o가 생성한 결과물

Claude가 생성한 결과물.

어떤가? 내가 보기에는 Claude 쪽이 조금 더 보기 편하고, 세련된 감각을 자랑하는 반면에 ChatGPT 쪽은 조금 올드해보이며, 오래된 프로그래밍 튜토리얼 사이트의 메인 화면 같아 보인다.

HTML 역시 첨부하니, 참조해 주었으면 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Insights - Unlock the Market</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 20px;
            text-align: center;
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }
        header p {
            margin: 5px 0 0;
            font-size: 1.2em;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .hero {
            text-align: center;
            padding: 40px 20px;
            background-color: #e8f5e9;
            border-radius: 10px;
        }
        .hero h2 {
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        .hero p {
            font-size: 1.2em;
            margin-bottom: 20px;
        }
        .hero button {
            padding: 10px 20px;
            font-size: 1em;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .hero button:hover {
            background-color: #45a049;
        }
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 40px;
        }
        .feature {
            flex: 1 1 calc(33.333% - 20px);
            box-sizing: border-box;
            padding: 20px;
            background-color: white;
            margin: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
        }
        .feature h3 {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
        .feature p {
            font-size: 1em;
            color: #555;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 20px;
            margin-top: 40px;
        }
        footer p {
            margin: 0;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <header>
        <h1>Stock Insights</h1>
        <p>Unlock the Market's Potential</p>
    </header>
    <div class="container">
        <section class="hero">
            <h2>Analyze, Learn, and Profit</h2>
            <p>Join us to get the latest stock analysis, trends, and insights that will elevate your investment journey.</p>
            <button onclick="window.location.href='signup.html'">Get Started</button>
        </section>
        <section class="features">
            <div class="feature">
                <h3>Comprehensive Analysis</h3>
                <p>In-depth analysis of stocks using cutting-edge tools and data.</p>
            </div>
            <div class="feature">
                <h3>Market Trends</h3>
                <p>Stay ahead with the latest trends and insights.</p>
            </div>
            <div class="feature">
                <h3>Personalized Alerts</h3>
                <p>Get notifications tailored to your portfolio preferences.</p>
            </div>
        </section>
    </div>
    <footer>
        <p>&copy; 2024 Stock Insights. All rights reserved.</p>
    </footer>
</body>
</html>

ChatGPT 4o가 생성한 결과물

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스마트 주식분석 | 데이터 기반 투자 인사이트</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f9fafb;
            color: #333;
            line-height: 1.6;
        }

        nav {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .nav-container {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: #2563eb;
            font-weight: bold;
            font-size: 1.25rem;
            padding: 1rem 0;
        }

        .nav-links a {
            color: #666;
            text-decoration: none;
            padding: 1rem;
            margin-left: 1rem;
        }

        .nav-links a:hover {
            color: #2563eb;
        }

        header {
            background-color: #2563eb;
            color: white;
            text-align: center;
            padding: 4rem 1rem;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        header p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
        }

        .cta-button {
            background-color: white;
            color: #2563eb;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
        }

        .cta-button:hover {
            background-color: #f3f4f6;
        }

        main {
            max-width: 1140px;
            margin: 0 auto;
            padding: 3rem 1rem;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .feature-card {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .feature-card h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .benefits {
            background-color: #f3f4f6;
            padding: 2rem;
            border-radius: 0.5rem;
            margin-bottom: 3rem;
        }

        .benefits h2 {
            font-size: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .benefit-item {
            display: flex;
        }

        .benefit-item .check {
            margin-right: 1rem;
        }

        footer {
            background-color: #1f2937;
            color: white;
            padding: 2rem 1rem;
            text-align: center;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }

        .footer-links a {
            color: white;
            text-decoration: none;
        }

        .footer-links a:hover {
            color: #60a5fa;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-container">
            <div class="logo">스마트 주식분석</div>
            <div class="nav-links">
                <a href="#">소개</a>
                <a href="#">분석</a>
                <a href="#">구독</a>
            </div>
        </div>
    </nav>

    <header>
        <h1>데이터 기반 주식 투자의 시작</h1>
        <p>전문적인 분석과 인사이트로 현명한 투자 결정을 도와드립니다</p>
        <button class="cta-button">무료 구독 시작하기</button>
    </header>

    <main>
        <div class="features">
            <div class="feature-card">
                <h3>기술적 분석</h3>
                <p>차트 패턴과 주가 움직임에 대한 전문적인 분석을 제공합니다.</p>
            </div>
            <div class="feature-card">
                <h3>펀더멘탈 분석</h3>
                <p>기업의 재무제표와 경영 현황을 심층적으로 분석합니다.</p>
            </div>
            <div class="feature-card">
                <h3>시장 트렌드</h3>
                <p>국내외 주식 시장의 최신 트렌드를 파악합니다.</p>
            </div>
        </div>

        <div class="benefits">
            <h2>구독 혜택</h2>
            <div class="benefits-grid">
                <div class="benefit-item">
                    <div class="check">✓</div>
                    <div>
                        <h4>주간 분석 리포트</h4>
                        <p>매주 엄선된 종목에 대한 심층 분석 보고서</p>
                    </div>
                </div>
                <div class="benefit-item">
                    <div class="check">✓</div>
                    <div>
                        <h4>실시간 알림</h4>
                        <p>중요 시장 변동 사항 실시간 알림 서비스</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>스마트 주식분석 © 2024</p>
        <div class="footer-links">
            <a href="#">이용약관</a>
            <a href="#">개인정보처리방침</a>
            <a href="#">문의하기</a>
        </div>
    </footer>
</body>
</html>

Claude가 생성한 결과물 (참고로 원래는 tailwind로 생성해줬는데, CDN 사이트가 깨져서 CSS로 바꿔달라고 했다. 내가 웹을 생성해 달라고 하면 유독 tailwind를 많이 쓰고, 좀 높은 확률로 React로 생성해주더라.)

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Claude에게 Computer Science 1001 생성을 부탁해 보았다.

Claude에게 Computer Science에서 가장 중요한 토픽 1001개를 뽑고, 그걸 카테고리 별로 분류해서 뽑아 보라고 했습니다. 아래는 그 결과인데요, 저는 이런 정보를 그저 글자 몇 번 입력한 것으로 받을 수 있다는게 AI 유행한 지가 꽤 됐지만 아직도 놀랍습니다. Computer Science 1001 by Claude A. 프로그래밍 언어 기초 A1. 변수와 데이터 타입 (1-10) 1. 정수형 데이터 타입과 범위2. 부동소수점...

Nov 19, 202416 min read

Doyeong Kim's Blog

2 posts